Using Stylesheets to Create a Print This Page ViewBy Scott Mitchell
Web pages often contain much content in addition to the actual interesting content, such as navigational menus, advertisements, and so on. For example, on this Web page you are likely only reading and are only currently interested in the text of this article. You could care less about the advertisements you see, or the navigational menus on the left. While these extraneous elements don't hold your interest while reading the article, they provide use later on. Perhaps after reading the article you'll use the navigation on the left, or click on an advertisement.
While the Web has moved masses of information from printed paper to the computer monitor, many people still enjoy consuming information the old fashioned way - by reading it off of a piece of paper. When printing an article, though, it's clear that all the user wants to see is the text of the article. At no point will the advertisement or navigational hyperlinks be of any interest to the reader. For this reason, many Web sites offer a "printer-friendly" version of the Web pages, one that strips out all the superfluous material. (All 4Guys articles have a printer-friendly version; simply click on the printer icon in the upper-right hand corner of the article!)
In this article we will briefly enumerate the variety of ways one can create printer-friendly Web pages. We will then focus on one particular method: using cascading stylesheets (a.k.a. CSS).
Creating a Separate Web Page for the Printer-Friendly Page
One option for creating a printer-friendly Web page is to create a single page whose sole responsibility is to display the printer-friendly version of a Web page. This is the approach used here on 4Guys. Namely, there is a single page,
Web page receives through the querystring the URL of the page to render in a printer-friendly format.
This page then accesses the specified Web page using the FileSystemObject
and strips out the navigational and advertisement sections. (A more detailed description of this
script can be found at: How the "Print This Page" Script Works.)
There are some variations to this simple approach. For example, in Troy Eberhard's article, A "Print This Page" Script Using the MS-XMLHTTP object and Regular Expressions, a method is examined that uses the XML-HTTP component instead of the FileSystemObject to retrieve the Web page's output. It also uses more sophisticated techniques for delimiting the content that should, and should not, appear within the printer-friendly version. For an article examining how to implement the "Print this Page" script in ASP.NET, read: Print this Page - Comparing Classic ASP to ASP.NET.
Using a Stylesheet Designed for Printing
Cascading stylesheets, or CSS, are a means of specifying stylistic settings for an HTML document. For example, using CSS you can specify that the content within paragraph tags (
displayed in a bold Verdana font by using the following stylesheet declaration:
With CSS 2.0, you can specify a printer-friendly stylesheet for a Web page along with a "normal" stylesheet. When a user visits the Web page through the browser, the normal stylesheet is used; however, when the user prints the Web page, the printer-friendly stylesheet's specifications are used instead. For example, imagine we had a Web page that had a left-hand side navigational bar, as shown in this live demo.
For the printer-friendly version we would not
want to display the left-hand navigational section, only the content in the "main" section of the
Web page. In order to accomplish this effect using a printing stylesheet, we would want to create a
stylesheet for the printer-friendly version that declared a style class for the left-hand navigation
elements with a
display: none attribute. This would cause the left-hand navigation elements
to simply not appear in the printed version. An example of this can be seen below:
Note that the printer-friendly stylesheet is imported via the following tag:
Of utmost importance is that you include the
media="print". The content of the
printer-friendly stylesheet for this example is fairly simple. It specifies is the default
font settings for the
body, that elements with the
navStuff class should
be hidden, and that hyperlinks should display the value of the
href attribute after the
actual link. The contents of the printer-friendly stylesheet used for this example follows:
a:after stylesheet attribute indicates that after
<a> tags (the
HTML tags used for creating hyperlinks), that the content should be brackets with the value of the
href attribute inside. This is useful for a printer-friendly view since when viewing
a printer-friendly view the user cannot visit a hyperlink. By placing the actual URL after the hyperlink
in the printer-friendly view, the person reading the printed version at least knows the URL the
hyperlink leads to.
|Specifying a Printer-Friendly Stylesheet|
In addition to using the |
So far we have examined two ways to allow for a printer-friendly Web page: creating a separate page that accesses the file and strips out certain content; and using a CSS 2.0 printer-friendly stylesheet. There's a third technique worth discussing which, in my opinion, combines the advantages of both approaches. We'll look at this third approach in Part 2 of this article.