To read the article online, visit http://www.4GuysFromRolla.com/webtech/061103-1.shtml

Using Stylesheets to Create a Print This Page View

By Scott Mitchell


Introduction
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, /ASPScripts/PrintPage.asp. The PrintPage.asp 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 (<p>) be displayed in a bold Verdana font by using the following stylesheet declaration:

<style type="text/css">
  p  { font-family:Verdana; font-weight:bold; }
</style>

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:

<HTML>
<HEAD>
<link rel="stylesheet" media="print" title="Printer-Friendly Style" 
         type="text/css" href="/webtech/code/printStyle.css">
<style type="text/css">
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
TABLE
{
    FONT-SIZE: 10pt
}
</style>
</HEAD>
<BODY>
   <table width="100%" border="0">
      <tr><td width="200" class="navStuff" align="center">
           The navigational stuff goes here.  Note it is inside a <td>
           element with its class attribute set to navStuff.
           In the printer-friendly stylesheet, the navStuff class has
           display: none set.
      </td>
      <td width="*" valign="top">
           This content will appear in the printed version.
      </td></tr>
   </table>
</BODY>
</HTML>
[View a Live Demo!]

Note that the printer-friendly stylesheet is imported via the following tag:

<link rel="stylesheet" media="print" title="Printer-Friendly Style" 
         type="text/css" href="URL to stylesheet">

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:

BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
.navStuff
{
    DISPLAY: none
}
a:after
{
	content:' [' attr(href) '] '
}

The 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.

To see this in action, visit the live demo and print out the page. You'll see that the printed-version contains the hyperlink's URL listed after the hyperlink text. live demo shows,

Specifying a Printer-Friendly Stylesheet
In addition to using the <link> tag there are many more ways to specify a printer-friendly stylesheet; this article, however, does not intend to delve into the myriad of ways to accomplish this. For more information on using printer-friendly stylesheets, see this tutorial.

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.

  • Read Part 2!


  • Article Information
    Article Title: Using Stylesheets to Create a Print This Page View
    Article Author: Scott Mitchell
    Published Date: Wednesday, June 11, 2003
    Article URL: http://www.4GuysFromRolla.com/webtech/061103-1.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers