Using Stylesheets to Create a Print This Page View, Part 2By Scott Mitchell
In Part 1 we looked at two methods for displaying representations of printer-friendly Web pages: one required the user to click on a link that whisked them to an ASP or ASP.NET Web page designed specifically for displaying the page in a printer-friendly format. The other approach utilized CSS 2.0 features to create a stylesheet that would be applied when the user printed the page. In this final part we'll look at a third approach that combines the two approaches examined in Part 1.
Toggling Between Two Stylesheets
In Part 1 we saw how to create a printer-friendly page using CSS stylesheets. While the approach spares the user from having to click a link and load up a new Web page to get a printer-friendly view, there's no way that the user can determine what the printed output will look like without printing the document or choosing File/Print Preview. Personally, I find this annoying. Users are accustomed to clicking a "Print this Page" link to get a printer-friendly version, and might not understand that just by printing the page they will get a printer-friendly version. Furthermore, the user might not want to print out the printer-friendly version, but the normal version instead.
One way to overcome this is to define two stylesheets on the Web page - a default one and a printer-friendly
allows for a "Print this Page" link, but does not require a round-trip to the Web server to display the
printer-friendly version. Essentially, you need to use two
<link> tags, the first
one linking to the standard stylesheet and the second one linking to the printer-friendly stylesheet.
The syntax is as follows:
rel attribute for the first one is set to
<link> tag should contain the URL to the "normal" stylesheet. The
rel attribute of the second
<link> tag should be set to
alternate stylesheet, and contain the URL to the printer-friendly stylesheet. Note
that the second
<link> tag does not have
If you specify this for the second stylesheet, then this stylesheet will be used when the user prints
the document, regardless of what stylesheet is currently employed.
The user can then toggle between the stylesheets by clicking on the links. This approach lets the user see what the printer-friendly view of the Web page will be before printing it, but saves the cost of having to make a round-trip to the Web server.
Unfortunately, this specific code does not work with Internet Explorer. Rather, replace the
(code provided by alert 4Guys reader Miles Feinberg):
Examining the Advantages and Disadvantages of Each Approach
Each approach has its advantages and disadvantages that must be carefully weighed before deciding which approach is the best one for your Web site.
The Single "Print this Page" Approach
The single "Print this Page" script approach has a couple of disadvantages, in my opinion. First, it requires the user click on a link and load up a new Web page. This is usually no big deal for those of us with broadband connections, but visitors using slower dial-up connections might have to wait a few seconds to move from the normal view to the printer-friendly view. Second, you have to create a "Print this Page" script! While this isn't a terribly difficult process, it does require time that could be spent on other tasks. Furthermore, for a single "Print this Page" script to work effectively, either all of your articles have to be in a certain format that can be parsed by the script, or you have to add special delimiting characters to each of your articles to denote what should and should not be included in the printer-friendly version.
The major advantage of the single "Print this Page" approach is that Web visitors are accustomed to this model. On most Web sites users must click a "Print this Page" link. This means that if a user is interested in printing the Web page, they'll likely scan the page for such a link.
The CSS 2.0 Printer-Friendly Stylesheet
The CSS 2.0 printer-friendly stylesheet approach's main advantage is that it does not require an extra click and round-trip to the Web server in order to print the printer-friendly version. In fact, all the user has to do is click the Print button in their browser and the printed output will be the printer-friendly version. While this approach is ideal theoretically, many users might not realize that a printer-friendly version is available. They may search the page for that common, "Print this Page" link, and decide not to print the content when they cannot find such a link. Furthermore, the user cannot easily opt to not have the printer-friendly version printed when they print the document.
Toggling Between Two Stylesheets
Personally, I find this approach to be the best. It provides the user with the model they are accustomed to - clicking a link to get a printer-friendly version of the page - but does not require a round-trip to the Web server or the time needed to create a "Print this Page" script. The downside is that the user does have to click a link before printing, which does seem superfluous; this disadvantage is a very minor one, in my opinion, since this is what users are accustomed to anyhow.
In this article we looked at three ways to add "Print this Page" functionality to your Web site's content. Each approach has its advantages and disadvantages. Looking at all three approaches, I find the best one to be the last one examined, toggling between the two stylesheets. This approach combines the advantages from both of the first two approaches, while canceling out many of the negatives.