Creating Printer Friendly Web Pages With CSS


Creating Printer Friendly Web Pages With CSS

One of the most annoying experiences for Internet users is printing a page that displays undesirable web page elements. For example, users have no interest in printing out a web page that includes a navigation menu, and other design elements that don’t relate to the content they’re trying to capture.

A work around for this issue has been to include a printer-friendly hyperlink that takes the user to a more printer friendly web page. This creates two problems. First, the user has to go one extra step with the exact same content, before they can actually try to print it. Second, it creates a duplication of content. Duplicate content is frowned upon by search engines; and if the website’s revenue is ad-based, profits could be lost from people linking to the printer-friendly version, instead of the original.

Using CSS to control the print output of a web page is by far the best solution for the user and webmaster. CSS has different media types that can be assigned to each CSS document. The two most common media types are screen and print. Here’s an example of how I generally use media types:

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

Although you can specify the media rules inside one CSS (The @media rule), my personal preference is to separate them out into individual documents. That way, I don’t have to worry about any inherited styles, because the browser is only using the print.css document to style the web page. If you appropriately design your HTML to have its layout and content blocks controlled by the CSS document, you will be able to specify the ids and classes related to those blocks, and choose which ones to show and hide. To hide a block, use the code below (replacing the id or class with your own).

#nav { display:none; }

You can also add styles for content that’s affected by elements, like anchors. For example, since the print.css document isn’t inheriting any rules from the screen.css document, if I don’t specify how to handle images that are wrapped inside anchors, those images will print out with borders around them. The same rule applies to anchor text. Users have no need for text with underlines on paper, especially since they can’t click on it. To remove the image borders and anchor text underlines, I use the following code.

a img { border:0; }
a { color:#000;text-decoration:none; }

Using this technique allows users to take away a well formatted copy of your web page’s content. This technique is particular useful for pages that are article based (like blogs) or contain useful marketing material. Below is an example of a screen view and a print view using these techniques.


Comments are closed on this post