CSS-Tricks Finally Gets A Print Stylesheet

This is way past due…but it’s finally here: a print stylesheet!

I’ll start by showing you the entire stylesheet, then I’ll explain a little bit about what I was thinking.

body {
	font-family: Georgia, serif;
	background: none;
	color: black;
}
#page {
	width: 100%;
	margin: 0; padding: 0;
	background: none;
}
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
	display: none;
}
.entry a:after {
	content: " [" attr(href) "] ";
}
#printed-article {
	border: 1px solid #666;
	padding: 10px;
}

1. Make the type as readable as possible

On the web, the body type for articles here is a sans-serif. On the printed page, I think that serif fonts are easier to read so I reset the font-family to Georgia. No background and black text is the default, but just in case, I explicitly declare it in the body.

2. Use as much of the page as possible

Again, I think this is default behavior, but since I wrap my content in a “page” tag anyway I thought I would make use of that to set a 100% width and remove any margin and padding.

3. Default styling ain’t bad for print

Notice that I didn’t do typographic styling whatsoever except setting the font. Default print styling does, what I feel, is a pretty decent job here on its own. This is assuming that you are using quality markup. In my articles, the title is an <h2> tag, the sub-titles are <h3> tags, and the body paragraphs are in <p> tags. This results in a nice hierarchy of font sizes on the printed page without any styling necessary.

Code samples, which are wrapped in <code> and <pre> tags default to a monospace font, which is great. Unordered lists get a healthy indent and are bulleted.

3. Remove the extra stuff

Chances are if someone is printing an article of yours it is because they want to save the content as reference material, read it later, or share it with a friend. They really don’t need to see your page navigation, sidebar, or fancy footer. Again assuming that you have nice and semantically marked-up code, removing those sections should be as easy as setting the display value of the parent elements of those areas to none.

4. Display the URLs in the body content

[Thanks to David Walsh for this idea] Links in your content don’t do any good on the printed page. It would be pretty cool if you could just tap the linked word with your finger and it would open the webpage on your computer, but that’s something I haven’t even seen in the movies yet. For now, we can just use CSS pseudo-element ::after to drop in the URL right next to the link, using the content attribute. IE doesn’t support it, but c’est la vie.

5. Include a thank-you note

At the end of my content, I put a little “thank you” note. This area gets hidden on the web but is displayed when printing the article. I think it’s just a nice touch and also serves as a reminder they should come back to the website for fresh stuff.

6. Optional: Page breaks

I didn’t feel my articles really warranted specific page breaks, but if you write really long articles with subheaders, you should definitely consider placing page breaks before each of those subheaders. Another place that would be good to use a page break is right before a fairly large table. Nothing is worse than having to flip between pages looking at a table because it happened to fall overlapping two pages when it could have fit onto one. I plan to use these on a case-by-case basis. More on page breaks here.

So now you may go forth and print my articles at will! Let me know any other tips you guys have for print stylesheets or any comments you may have about mine.