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.
Filed under: CSS, Web Design
Is there an advantage to using 4 styles to hide the navigation (#nav) over using display:none?
And I’ve been using generated content to display the URL’s of links using the technique from A List Apart’s Going to Print:
#content a:link:after, #content a:visited:after {
content: ” (” attr(href) “) “;
font-size: 90%;
}
Pretty slick effect for non-IE users
I also like leaving a little message like “thanks for printing this page. I hope you used recycled paper!” depending on the page’s purpose.
Keep up the great work!!
Allan, I’ve been using that code for so long, I’ve never actually stopped to think about simplifying it to just “display:none;”. I’ll check that out and let you know if that works for me, and also works correctly accross multiple browsers. If so, I may update the post (and my websites) with just that. Thanks!
Allan, thanks for the tip. I can’t remember why I was doing it the way I was. Using “display:none;” is the simplest way I can think of, now that you mentioned it. I updated the article with it.
My pleasure Jon! I honestly thought that there may have been some advantage (maybe a cross-browser thing) to using the more verbose way of stating it. CSS is tricky like that
Use this code to show linked URLs when printing:
a[rel="external"]:after, a[rel="email"]:after {
content: ” [" attr(href) "]“;
font-size:smaller;
}
Jon,
Thanks for the tip, I’m not an expert in CSS but this is just what I was looking for.
Cherrs
Jim
thanks, I am also looking for code for hiding URL on the Top of the printed page.
Sarfaraz, I don’t think you can control that with CSS — it’s controlled by the browser. For example, I think IE supports the ability to turn it off in their Print prefs.
How do you deal with form controls on the page such as a listbox with many items? The end user wants to see all the items on the listbox on the printed page.
How do you add a comment that you want to appear on the print version but not on the screen version?
frank, you create an ID or class and make it display:none; on the screen CSS. Wrap your content inside of an element that uses that ID or class. Then it shouldn’t appear on the screen, but should appear when you print.
Thanks for the tutorial. I appreciate you providing graphics along with the post so we can see how the printer-friendly pages appear.
Nice post. Printer friendly version are an extra version of web and are very useful. You done a great work.