Line25

Handy Tips for Creating a Print CSS Stylesheet

Read the full post

Print stylesheets often come as a secondary thought on many websites, after all, who prints a webpage anyway?! Despite their slightly infrequent use, a print stylesheet can really help polish the printed document for when it is used. It doesn’t take too long to create, so let’s take a look at some handy tips that you can put into practice on your own site.

For this example, we’ll be going through the process of building the print stylesheet for Line25. Being a design blog there’s plenty of articles that users might want to print to refer to; for instance a user might want to print a tutorial to save switching applications; print an article for a meeting; or simply rest their eyeballs from the computer screen and read in bed.

Adding some Fancy Styling

With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use, which all helps save the world. Captain Planet would be proud! Now we can take a look at styling up the text to make things look pretty. It’s a common fact that sans-serif typefaces are the most legible in print, so setting the global font to Georgia is a good start. Those blue links aren’t really too useful, so we can also target those and set them to black.
Finally, the H1 and H2 introducing the page could be simply styled using the font-size, font-style and text-align properties. There’s no need to go to town on colours, keep everything basic and economical for the printer by using structured heading sizes and subtle touches.

#header h1 {
	text-align: center; 
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

Print preview with added styling

Display Link Destinations

You obviously can’t click links on a printed page, so it would be quite handy to display the URL in the printed document so the user could follow up the link when back at the computer. This nifty trick uses some CSS magic, but unsurprisingly it doesn’t work for IE. By using the :after pseudo selector, we can add the attribute from the anchor as small text in brackets after each link.

#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

Print preview with links displayed

Split Comments Onto a Separate Page

On one hand, it would be more economical to simply add the comments to the hidden elements to save a number of extra pages being printed. But on the other, there’s often a good collection of tips, resources and advice from people adding their input to an article. With this in mind the simple page-break-before property comes in handy to push the start of the comments onto a new page. This means the user can then decide whether to print the full document, or exclude the last few pages of comments.

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

Print preview with separated comments

The Final Stylesheet

So, that’s it! A few handy tips for creating your own print stylesheet. The complete stylesheet for Line25 is made up of just a few lines of CSS, but it completely transforms the printed document into a more useable and readable piece of information.

body {
	font-family: "Georgia", Times New Roman, Serif;
	color: #000;
	background: #fff;
}

#nav, #side, #footer, .post-meta, #respond, .reply, .post-info {
	display: none;
}

#header h1 {
	text-align: center; 
	font-size: 42pt; font-style: italic;
	margin: 0;
}
#header h2 {
	text-align: center;
	font-size: 10pt;
}

#content h2 {
	font-size: 32pt
	font-style: italic;
}

#content h3 {
	font-size: 18pt;
	margin: 0;
}

a {
	color: #000;
	text-decoration: none;
}

#main p a:after {
	content: " ("attr(href)") ";
	font-size: 10pt;
}

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

ol.commentlist li {
	list-style: none;
	border-bottom: 2px solid #eee;
	margin: 0 0 10pt 0;
}
	ol.commentlist li div.comment-meta {
		font-size: 6pt;
	}
Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

72 Comments

  1. Olivier says:

    Thanks Chris for this article…

    I just need to re-design the print css of my site. But I am wondering if there is a way to view the result of the print.css in “real-time” on my screen. I would like to be able to debug the change done to the print.css with firebug.

    Any tips to achieve this ?

    Thanks….

    • Can’t be done. The closest to “real-time” you can get is print-preview, which (I don’t think) you can use Firebug in.

      If you search around you might be able to find a open source program to do the job though,

      • Nathan says:

        If you use the Web Developer’s Toolbar, you can display the CSS by media type (i.e. Print). Firebug will work fine with it. You can still select elements in that view.

  2. twisty says:

    Hi there, another great article. Simple but often overlooked.
    I think you meant to say serif typefaces are the most legible not sans-serif, but i knew what you meant :)

    Olivier, just change the print css to display screen, comment out your screen css and use firebug. When you’re all done change them back to their respective screen and print.

  3. Michael says:

    @Olivier.
    Can you not just change the media to ‘screen,projection’ and use that as the sole stylesheet rendering the page?

    Then view it in your browser?

    You’re right, a plugin would be nifty. I’m sure I’ve seen one in the ‘Web Developer’ toolbar.

  4. Romi says:

    thanks for sharing now a days im learning css its helpful for me.
    follow me@rockstaronline

  5. Alex says:

    Another great article, Chris. CSS:Print is something I think many people skip past and I know I’ve been guilty of it occasionally myself!

    A very clear and invaluable guide though. Thanks for sharing!

    Alex | @ZenElements

  6. Anonymous Coward says:

    @Michael
    Yup, it’s at Web Dev > CSS > Display CSS By Media Type > Print

  7. paul says:

    It seems like there is a part of the article missing between the intro and “adding some fancy styling”

  8. Olivier says:

    @Twisty The CMS (Drupal) do not let me change easily the media type of the CSS to use.

    @Michael : Web Developer toolbar… You’re rigth !! Thanks for the reminder…

  9. Chethan T says:

    Hey Your Tutorials are so lively!
    Thank You.
    Keep up the good work )

  10. kuswanto says:

    Wow.. nice post. I haven’t consider learning the CSS print sheet properly. Yours are good way to start.

  11. web2000 says:

    hey nice tutorial here “handy tips for creating a pring css stylesheet” – *just a note* – you need to declare the stylesheet in the head of the html document (media=”print”) so the browser knows to request it when the user hits the print button!

  12. wow, really nice tips.

    thanks for the same.

  13. Has anyone checked out PrintFriendly.com/button? Was thinking to add it to my site instead of building print css but wondering what others thought.

  14. Michael says:

    @Olivier
    You can change the media of the css in Drupal in template.php

    Eg.
    drupal_add_css(path_to_theme() . ‘/print.css’, ‘theme’, ‘print’, TRUE);

    Just change ‘print’ to ‘all’. And you might have to clear out your cache in /admin/settings/performance

  15. twisty says:

    The other guys are right, just use the web developer toolbar to display the print css instead of screen, then use firebug to code your css in real time. I didnt know about that feature in the WDT, it’ll save even more time!

  16. Matthew says:

    I think its also nice to set your print stylesheet as an alternate stylesheet, that way you can easily switch between them in nice browsers like firefox without any add-ons. I don’t know if this is possible for Drupal though.

  17. Presima says:

    Awesome tutorial. Thanks

  18. Thanks for this Chris. One of the best article so far on Line25 :)

  19. Luis Ahmed says:

    Thanks a lot Chris, that is why a love css, simple and so powerful.

  20. Wallace says:

    Thanks for the great article, it might work for my new site. :)

  21. Krystian says:

    display: none and :before pseudo-element are two main css tricks in printer stylesheet. Check also Eric Meyer’s article in ALA http://www.alistapart.com/articles/goingtoprint/

  22. sonichtml says:

    nice,thank you for shared..

  23. ntiremedia says:

    nice work budyy and keep it up ill visit ur blog again soon i like it and it interesting …..

  24. Very useful! I’ll use something like this in my next projects.

  25. Yorik says:

    Excellent tips! Much stuff I didn’t know yet… Thanks a lot!

  26. Hero says:

    thank you so much!

  27. Stomme poes says:

    Ah, I liked seeing the use of page-break-before. FF seems to have this as some sort of stylesheet default for fieldsets who are longer than a page or something.
    Also, Twisty already pointed this out, but again, georgia is SERIF and you did seem to mean “serif” instead of “sans-serif”.
    I also liked the tip in the comments of using the Toolbar to view CSS by type. Yet another feature I’ve ignored. Thanks!

  28. derp says:

    “With a bunch of objects removed the print styling is taking shape, and has dramatically reduced the number of pages in use”

    uh, did you skip a few steps or something?

    it seems like there was supposed to be something before this, but there’s just the introduction.

  29. Excellent post on a very important topic. Nice job!. Good blog, thanks!

  30. Sander says:

    To test if everything is working use the Webdeveloper toolbar addon for firefox. It has an option to show the print version of the page.

  31. nomi says:

    These tips are very helpful to us.

  32. Joan says:

    I always get excited when I encounter CSS code that I didn’t know of.
    content: ” (“attr(href)”) “; = CSS magic indeed!
    Keep up the good work!

  33. Vicky says:

    “It’s a common fact that sans-serif typefaces are the most legible in print, so setting the global font to Georgia is a good start.”

    Hmm… sans-serif most legible in print? Georgia, sans-serif?

  34. Sam says:

    Thanks! Just needed this for school!

    :D

  35. Nice tutorial Chris. I think I shall have to finally get round to doing mine this weekend.

  36. Great tips. I haven’t ever used print style sheets before, I think it’s about time for me to learn. Thanks!

  37. Hey thanks …

    Few more tips to add up ;)

  38. Jason says:

    I think its exciting to use different css stylesheets for one website, like playing around with different displays like PSPs, phones etc

  39. Alex Flueras says:

    I have to admin I haven’t used print css at all actually. I will definitely start using it. Thanks for this article.

  40. Politics says:

    These are good tips and easy to learn.
    Thank you

  41. THANK YOU Chris for this interesting article!

    Even geeks often ignore readers who might want to print a few pages and without a stylesheet, it always end in a total mess with the printer wasting a lot of paper…Not very eco-friendly :-(

    So yes a Print CSS stylesheet is always welcome and your tutorial here helps :-)

    BTW I added a comment line on top of my printed pages using the following code :
    #content:before {content: "This is a printer-friendly version. The navigation and other unnecessary elements have been removed. For all details visit us at http://www.xxxx.com";

    I like this comment but can only get it in Firefox, not in IE.
    Have you Chris (or you Readers) any idea on how to make this work in IE?

    THANK YOU and keep up the good work!

    Jamy

Comments are now closed