When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
Print this page.
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.

    - continued -

    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;
    // -->
    <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";
    // -->
    [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.

    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

  • ASP.NET [1.x] [2.0] | ASPFAQs.com | Advertise | Feedback | Author an Article