Some Print Stylesheet Tips

There are a good number of articles I read that I’ve printed off of a website. I try not to read on screen as much as possible, and sometimes articles are long or a good subject in which I want to take the time to enjoy. I get really excited when I see a good print stylesheet for this reason. I do a lot of printing and not a lot of sites have print stylesheets still. Maybe it’s a new web standards thing and I’ve just become spoiled by it, so it bothers me when I find a site where I have to select the text and print selection because otherwise it cuts off half the article and prints blank pages at the top and bottom of the article. Here are some tips for making beautiful print stylesheets.

The basic link up

It really doesn’t take all that much effort to make a print stylesheet. Maybe more complex sites with 5+ stylesheets might have trouble, but particularly for bloggers, it’s not that hard. Just make your main stylesheet applicable to all media by setting it to media="all" and then create a blank stylesheet and set it to media="print". Then attach them like so…

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

Weeding out the junk

Now, go through your site and find those elements you don’t want to see when you print, you know, the sidebar, comment form, header and menus, etc. Place those elements in your print stylesheet and set to display:none; like this…

#header,
#footer,
#comment-form,
#contact-form,
#adsense,
#banners    {
    display: none;
}

Keep adding tags to your stylesheet until all the junk is gone. To test, just refresh your page and choose “Print Preview” from your menu. When you’re done, voilà! You have a very plain stylesheet, and a decent looking printed page.

Dolling it up

If, like me, that’s too dull for you, there are ways of making things neater! You can add your own header, footer, whatever you need with a few little tricks. Basically, you’ll create a new element in which you hide from everyone else but the printer. I just use a simple class called "hide-for-print" so it works like this…

<div>
    <img src="logo.gif" alt="Standards for Life" />
</div>

I do the same with meta data for posts and a copyright footer. Then, I go to the main stylesheet and hide it by saying .hide-for-print {display:none;} and then go into the print stylesheet and continue to style it how I want it to look when it prints, making sure to reverse the display property with {display:block;}.

Optional

People have different opinions about this one, but it’s not a bad idea to change your fonts to make them more readable because what works on screen is often not quite the best offline. Printed pages are typically more readable in a serif font (Times, Georgia, etc). And it helps to increase the size some too, but again, it’s optional. If it’s me reading your page, I’m just happy to see a clean sheet sans-junk, serif or not!

Update 06/16/06 11:50am: The simplicity of this article assumes your site is already generally printable, meaning dark text on a light background and not too many positioning style elements in place already like floating or fixed widths. For more information on tweaking your stylesheet to look just right, there’s a great article at A List Apart called Going to Print.

Tweet me (but don't mistweet me)

Copyright © 2006 – 2009 Natalie Jost