Recipe 6.10. Creating a Printer-Friendly Version of Your Site

Problem

You want to offer a printable version of all your web pages without creating separate, specially coded versions of every page, or by using complex scripting.

Solution

Add a new style sheet to the <head> section of your web pages that will reformat your existing code into a printer-friendly format:

 <link href="print.css" rel="stylesheet" type="text/css" media="print">

Discussion

The desire to read web pages on paper, rather than on a low-resolution computer screen, hasn't diminished much at all in the 10-plus years of the Web's existence. When visitors find something on your site they want to read, many will print the page and retire to a more comfortable offline venue to fully absorb your content. Fortunately, the techniques for facilitating this common web surfer behavior have evolved to make life easier on the web designer.

In the early days of the Web, site builders often would create separate versions of web pages that closely mimickedpage for printed pagetheir on-screen counterparts. (How many pixels wide is an 8.5"x11" sheet of paper? Anyone?) Others were savvy enough to install and configure a script or CGI that would strip a page of its HTML eye-candy and return a printer-friendly version.

Along the way, some browser makers added a Print Preview feature that would allow web surfers to tweak the web page layout that was sent to their printer. But the wasted effort (not to mention ink and paper) involved in getting the output "just right" caused many to throw up their hands (and their lunch) in disgust.

Enter the power of CSS, where one web page can have multiple formatting "personalities." The media attribute of the stylesheet tag specifies which CSS rules to use depending on the device on which the page will be rendered or output. For example, here is the code for two stylesheets, one for the computer screen and one for printing:

 <link href="screen.css" rel="stylesheet" type="text/css" media="screen"> <link href="print.css" rel="stylesheet" type="text/css" media="print">

The pages shown in Figures 6-7 and 6-8 are based on the same HTML code, which uses <p>, <div>, and heading tags to format and position the various elements on the page.

Figure 6-7. The screen version of a printer-friendly web page

The screen stylesheet has rules for the background, text, link, and primary navigation colors, as well as placement settings for the logo and advertisement (left column). The print version of the stylesheet specifies serif type and reverses the text colors to white on black:

 body {    background-color: white;    color: black;    font-family: serif;    font-size: 12pt; }

Figure 6-8. Using the same HTML code, but a different stylesheet, the printer-friendly version of the same web page is ready to be committed to paper

Then it uses the display:none rule to hide page elements that I don't want on the printed version, such as the navigation and the advertisement:

 #weblogo {    display:none; } #primnav {    display:none; } #sidead {    display:none; }

Finally, the stylesheet includes rules for removing the underline from links and including the URL of the link after link text in paragraphs:

 a:link {    text-decoration: none; } p a:after {    content: " <" attr(href) "> "; }

Problem

Solution

Discussion

Figure 6-7. The screen version of a printer-friendly web page

Figure 6-8. Using the same HTML code, but a different stylesheet, the printer-friendly version of the same web page is ready to be committed to paper

See Also