The Bible for CSS Print Style Sheets

Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet.

Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen.

Also, following tutorials is easier if you have one next to you, with your code editor open on the screen; that way, you don’t have to switch windows every time to look something up.

In case you’ve forgotten, here’s how to set up a print style sheet:

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

The media="print" attribute ensures that users don’t see any of the styles defined in the print.css file.

Some attention is required, though: if your main style sheet has no media attribute, the print style sheet will inherit its style. To separate them, set your main style sheet as follows:

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

Here are some tips to get you started with the print style sheet.

1. No Nav is good Nav

Remove your Navigation!!! Paper is static, while a computer is interactive. And to facilitate that interaction, websites have navigation, which becomes useless on paper.

Hide the navigation and other parts of your website that become pointless on paper, such as sidebars that link to other posts. The code for this is very easy: just set the element’s display to none.

#nav, #sidebar {
        display: none;
}

2. Fill out the Page

With the navigation and sidebar removed, our content is now spread across the page. This makes the print style sheet look more like an ordinary document, instead of a paper version of the website.

All we need to do to expand the content is reset the float, remove any margins and set the width to 100%.

#content {
	width: 100%;
	margin: 0;
	float: none;
}

3. Reset the Background Colors

Most browsers already ignore background properties to preserve ink. But to make sure that the entire background is white, we can set the body to white, and then give every child element still on the page a white background.

#body {
	background: white;
}
#content {
	background: transparent;
}

4. Reset Text Colors

By resetting the background, another problem pops up. What if you have a dark-gray “Author information” box at the end of your posts, with the text in light gray or white? With the background now set to white, this information will invisible.

To fix this, change any light-colored text to something darker: black or, preferably, dark gray.

#author {
	color: #111;
}

5. Make Links Stand Out from Regular Text

Readers need to be able to distinguish links from regular text. Basic usability rules apply here: blue and underlining is preferred, but I prefer to add bolding, too.

Remember that documents are often printed in black and white. Don’t depend only on color difference. Here is the code for sensible printed links:

a:link {
	font-weight: bold;
	text-decoration: underline;
	color: #06c;
}

#0066cc is a fresh blue color, and it looks like #999999 when printed in grayscale. With this, links will look good printed either in color or in black and white. They will also stand out from regular text.

6. Display the Destination of Links

Because paper is not an interactive medium, readers of course cannot click through on links to gather more information.

Say someone is reading a print-out about a fancy new product. Seeing “Click here for more information” all of a sudden would be rather irritating for them, wouldn’t it? This is easily fixed by adding the link destination after the link text itself, giving you something like this: “Click here for more information (http://hereismore.com/information).”

What’s more, for CSS 2-ready browsers, this can be done with plain old CSS. Here’s the code:

a:link:after {
	content: " (" attr(href) ") ";
}

You can spice things up with a smaller font size, italics or whatever else.

In any browser that doesn’t understand the rule, there should be no ill effects—the links will still show up however you styled it. They just won’t have a URL appear after the text of the link, that’s all.

Note that the spaces before and after the parentheses are actually part of the rule above—the spaces have to appear in the rule in order to be inserted into the document.

There is one aesthetic problem with this new rule, precisely because it causes the value of a link’s href attribute to be inserted into the document verbatim.

If you look at the code of many pages, you’ll quickly notice there are a lot of “rooted” URLs like /topic/css. Those will be dropped into the document exactly as they are, which makes them less useful than if they were displayed as an absolute URL.

As it happens, the CSS3 selectors draft offers us an out. Any attribute selector that uses the operator ^= selects elements based on the beginning of their attribute values. Thus we can select any href that starts with a slash and insert enough text to fill out the value.

#content a[href^="/"]:after {
  content: " (http://www.610design.com" attr(href) ") ";
}

This rule transforms a value like /topic/css/ into http://www.610design.com/topic/css. It won’t help with relative URLs that don’t start with slashes, but fortunately ALA doesn’t use those kinds of URLs.

!IMPORTANT: As mentioned, ^= is a CSS3 selector. The W3C CSS validator can only test for compliance with CSS1 and CSS2. Unable to understand the CSS3 selector, the W3C validator will report it as an error, even though it is perfectly valid per the CSS3 Selectors Candidate Recommendation.

7. What About Font Size?

In print, 12 points is the standard. But how do we translate that to CSS? Some say setting the font size to 12 points (pt) is good enough. Others recommend setting it to 100%. Still others say not to declare any font size in your print style sheet at all, because doing so would override the user’s preferences.

Personally, I go with a 12-point font size most of the time:

p {
	font-size: 12pt;
}

8. What About Fonts?

Most people prefer serif fonts because they are less tiring on the eyes, they better lead the reader through the text, and so on. Setting the font-family to serif in your print style sheet is probably a good idea, although some readers may be surprised to find that the font in their print-out is not the same as the one on your website.

Here is the code for a good print font stack:

body {
	font-family: Georgia, 'Times New Roman', serif;
}

9. My Blog Has a Lot of Comments. What Should I Do?

Well, this is really your choice. On the one hand, think of all the trees you’d be saving just by adding #comments { display: none; } to your print style sheet. On the other hand, comments are of great value on some blogs and contain some great discussion.

By moving the comments to their own page, you give users the choice of whether to print them. CSS has a property that makes this very easy:

#comments {
	page-break-before: always;
}

For example, if your article is two-and-a-half pages long, the comments would run from page 4 up to, say, 6. Users would be able to choose which pages to print, without losing any information.

10. Known bugs

From time to time you’ll notice that when you try to print in FireFox your article will be cut off unexpectedly. If this happens to you there is a simple solution. Insert the following code into the div that is being cut-off.

#Problem-Div {
	overflow:visible !important;
}

11. Show a Print-Only Message

“Thank you for printing this article! Please don’t forget to come back to mysite.com for fresh articles.” Why not display a friendly message like this in the print-out? Or perhaps ask readers to recycle the paper they have used to preserve the environment.

Here is what that would look like:

Thank you for printing this article. Please do not forget to come back to mysite.com for fresh articles.

#printMsg {
	display: block;
}

You could add a bit of styling, too, like a 1-pixel border. Don’t forget to add #printMsg { display: none; } to your regular style sheet, to avoid confusing visitors.

Resources

• Printing in Firefox cuts off content after 1st page
• Handy tips for creating a print CSS style sheet
• Print style sheet: The definitive guide
• CSS Design: Going to print
• CSS-Tricks finally gets a print style sheet