Using Print Stylesheets Effectively

Using Print Stylesheets Effectively

Using Print Stylesheets Effectively

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>

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>