Published: Wednesday, June 11, 2003
Using Stylesheets to Create a Print This Page View, Part 2
By Scott Mitchell
Read Part 1
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
one. You can then use client-side JavaScript to toggle between the two instantaneously. This approach
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:
<link rel="stylesheet" type="text/css"
href="URL to stylesheet" title="Normal Style">
<link rel="alternate stylesheet" title="Printer-Friendly Style"
type="text/css" href="URL to stylesheet">
|
Note the rel attribute for the first one is set to stylesheet. This
first <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 media="print" specified!
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 first stylesheet will be used when the page is first loaded, but we can toggle between the two
stylesheets using a bit of client-side JavaScript. Specifically, we can create a "Print this Page" link
that, when clicked, runs the needed client-side JavaScript to switch from the standard style to the
printer-friendly style. This is accomplished using the following JavaScript code:
<script language="JavaScript">
<!--
function printerFriendlyView()
{
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
}
function normalView()
{
document.styleSheets[0].disabled = false;
document.styleSheets[1].disabled = true;
}
// -->
</script>
<a href="javascript:printerFriendlyView();">Printer-Friendly View</a>
<a href="javascript:normalView();">Normal View</a>
|
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
printerFriendlyView() and normalView() JavaScript functions with the following
(code provided by alert 4Guys reader Miles Feinberg):
<script language="JavaScript">
<!--
function printerFriendlyView()
{
document.styleSheets[0].href = "/webtech/code/printStyle.css";
}
function normalView()
{
document.styleSheets[0].href = "/webtech/code/normal.css";
}
// -->
</script>
|
[
View a Live Demo!]
Sadly, the above does not work in Mozilla/Netscape. So... in order to have the code work
for both IE and Netscape, you will need to use browser-detection client-side JavaScript code,
and enact the proper JavaScript calls. To learn more about detecting what browser is being used,
see: JavaScript Browser Detection.
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.
Conclusion
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.
Happy Programming!
By Scott Mitchell
