Using Print Stylesheets Effectively

Using Print Stylesheets Effectively

October 31st, 2008

So I finally put up my print style sheet this week since I have been writing articles that are lengthy. Usually when I see a good article online, I like to print it out and highlight key parts just like you would with a good book. I felt this may be a good time to just go over a few points and share some resources on creating print friendly articles on the web.

Before you begin this tutorial, step back and ask your self:

1. What would the user want to print on my website?
2. Which assets are the most important?
3. What would they expect to see when they hit print?

Now we’re ready to start!

Print CSS

You must first declare your Print CSS media type in your ‘head’ tag just as you would with your main style sheet.

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

Start a new CSS document, and save it as print.css. What we need to do first is hide any section or elements on the page that is not essential for the user. Taking my article as an example, below are some things that are not important to the user when they want to print the page.

We will be adding a “display: none;” to the following sections:

• Header
• Sidebar
• Comments
• Footer

#header, #blog .rightcol, #footer, .similar, .sociable, .disclaimer, #commentform, h3#respond, #blog h1, img.print, ol.commentlist, h3#comments {
	display: none;
}

Now we would get rid of any borders on images especially the ones with a link. (By default, there will be a nasty purple border around images with links)

img {
	border: none;
}

CSS Page Breaks

Check out this article by w3schools.com explaining the page break properties.

.classname {
	Page-break-after: always;
}
.classname {
	Page-break-before: always;
}
.classname {
	Page-break-inside: avoid;
}

Print Friendly <pre> Styles

I stumbled across this great article by Tyler from www.longren.org, explaining how to fix text wrapping for your code examples.

pre {
	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */ /*
	width: 99%; */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Read his full article regarding styling pre tags for more details.

Javascript for Easy Printing

Some javascript so the user is able to print by just clicking on a link.

<a href="#" onclick="javascript:print(); return false;">Print Article</a>

Free Print Icons

• http://www.ndesign-studio.com/resources/mini-pixel-icons/
• http://www.freeiconsweb.com/printer_icons.html
• http://www.tenbytwenty.com/products/icon-sets/vaga
• http://brainstormsandraves.com/archives/2008/04/10/blogicons/
• http://famfamfam.com/lab/icons/
• http://stemplate.com/icons.html
• http://www.webappers.com/2008/02/12/webappers-released-free-web-application-icons-set/

Related Print CSS Articles

• http://www.8164.org/hypertext-print-css/
• http://www.alistapart.com/stories/goingtoprint/
• http://www.digital-web.com/articles/css_styling_for_print_and_other_media/
• http://www.smashingmagazine.com/2007/02/21/printing-the-web-solutions-and-techniques/

Conclusion

As you can see, being print friendly on the web is very important especially if your site contains rich content. Most users on the web do not like to read full articles since it creates stress on their eyes reading line by line. It’s always helpful to have a print friendly version as an option. If you have any suggestions, comments, or questions feel free to let me know.

Tags: Print CSS, Resources

This entry was posted on Friday, October 31st, 2008 at 1:38 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.