Grow your CSS skills. Land your dream job.

CSS-Tricks Finally Gets A Print Stylesheet

Published by Chris Coyier

This is way past due...but it's finally here: a print stylesheet!

printed-page.jpg

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 it's 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 thats something I haven't even seen in the movies yet. For now, we can just use CSS pseudo class ":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 sub headers, you should definitely consider placing page breaks before each of those sub headers. 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.

Comments

  1. Thanks for the hollas Chris!

    As far as where to use page breaks, it’s really up to the programmer. For a blog, like your site and mine, I recommend putting a page break between the end of the article and the beginning of comments. That makes it easier for the user to do a “print preview” and easily exclude comments if they don’t care about them.

  2. Nice article – have used all but #4 in previous work. Will definitely be using it in future stuff though!

  3. Ian
    Permalink to comment#

    Great article, very helpful. One other thing I might add to the print stylesheet (on a similar wavelength to David Walsh), is to hide the responses at the bottom of the article, as I wouldn’t really want to waste any paper. Hope this helps.

  4. Good point David, I think I’m gonna add the page break before the comment area.

    @Ian: I see what you mean not wanting to print out the comments but I think I will leave them in by default. Sometimes there is some great stuff in the comments submitted by you guys and I think that should be printable if people want to. With the page break, you can easily choose not to print that but if I hide it, it will be impossible to print.

  5. tom rahman
    Permalink to comment#

    very nice, i seen people using it but thanks for the tute

  6. long time lurker ^^ really loved this print sytlesheet ^^
    especially the content: ” [" attr(href) "] ” :D

    not much print stylesheet out there realize how much this is for me :D i usually have to take note after i print :P

    other is as David said, and i see it’s already there too ^^

    great job ! keep up the great blog ^^

  7. fdog
    Permalink to comment#

    You should use pt instead of px.

  8. fdog
    Permalink to comment#

    PD: Only for the text :P

  9. Edwin
    Permalink to comment#

    Nice article :) Interesting.

  10. Just having a print stylesheet defined is enough to apply only the print stylesheet?
    No need to have a “printable page” link removing markup!

  11. Wes Lyda
    Permalink to comment#

    I can’t get the numbers of my ordered list to show up in print preview. The show up correctly on the web page but I can’t figure for the life of my what style code to use in my css page for printing. The indent is there but no numbers. What am I doing wrong?

    • Wes Lyda: have you tried changing the list-style-position property on the ol so the the value is inside? It may be that the bullets/numbers are appearing outside of the visible, printable part of the page. Try either of the following rules and see if they work:


      ol {list-style-position: inside;}

      ol li {list-style-position: inside;}

  12. David
    Permalink to comment#

    I remember I saw a print style sheet posted here by you Chris, but I don’t remember where, can you please guide me?

    Thanks

  13. That was helpful. Though, I can’t see very much of a difference when printing.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".