The Importance of print.css

Bloggers... I'm begging you... create a print.css file.

Sure, it's important that your site look good on a computer screen but occasionally your visitors may need to print something. If your website doesn't print cleanly on an 8.5"x 11" sheet of paper then you're doing a disservice to your readers. Take a second and look at your site. Select a post and in your browser click File -> Print Preview and see what happens.

You're looking for three things. First, is there anything from your site that is getting cutoff? Second, how long is your sidebar in relation to your post's copy? And finally, are you forcing your users to print a lot of background images?

A Quick Tip for Getting Started

One quick and very dirty way to get your print.css file off the ground is to create a blank css file and cut and paste the entirety of your regular css file into it. From here you can tweak a few settings without giving up the majority of your theme's style and tone. In this post I'll share a few quick tips for tweaking this new css file to make your theme more printer friendly.

Protect the Content, Remove the Sidebar

One change I had to make to my own site involved the sidebar. On the Print Preview screen I noticed that the content was being cutoff. This was the result of the sidebar pushing all the content right and, ultimately, off the printed page.

Because my sidebar only really has links that are relevant to site navigation I determined that it, as a whole, didn't need to be printed. Take a look at your sidebar and ask yourself how much is immediately relevant to your post's content. If you have to click through something for it to show it's relevance then it probably can be trimmed when printing.

Extra Long Sidebars

One other thing to check is the length of your sidebar. If you're sidebar is significantly longer than most of your posts then you may want to trim it from the printed page. There are a number of sites out there, some very large and famous ones, that have a sidebar which runs close to eight pages. While a long helpful sidebar is certainly welcome - if your average post length is 400- 500 words there's no reason to print an extra seven pages of links, ads and categories.

The Quick Fix

In your new print.css file look for the block which contains rules for your sidebar (usually #sidebar) and add "display: none !important;" as the first line. If the sidebar is already set as "display: block" be sure to change it. While this may fix things right away you'll probably need to tweak the rules for your main content as well.

Look for rules governing the main content block and be sure that there is no major margin anywhere. As you make your changes you can check the Print Preview screen to see whether you've got things working.

Removing the Header / Extra Images

Chances are your user has a color printer. The question you need to ask is whether you think they want to print the images that make up your theme. Borders? Banners? Backgrounds? Do any of these really need to be printed? Look at lifehacker through the Print Preview screen.

Do I really need to print all the ads and that large logo? Of course not.

Just because something looks nice on the computer screen doesn't mean it needs to be printed. For the most part I think images and ads inside of a post are fine. Ideally you'd want to create an alternate header for your theme that only appears when printing. This header should simply be a large text block which gives your site's brand. I won't get into how to put that together though.

Another Quick Fix

For the sake of the easy print.css I recommend just adding "display: none !important;" to the first line of the class which sets the rules for your header (usually #header.)

Other Things to Consider

Besides these quick tips I also recommend considering the creation of a noPrint class. Whenever you add large images, advertising code, videos or audio just enclose it in a <div class="noPrint"> block and save your readers some ink. In your print.css file all you'll need to add is " noPrint { display: none !important; } " and your set. Besides using "display: none;" you can also apply a width or height value of 0 (height: 0;) which may work just as well.

I usually print one or two posts a day for offline reading. I don't work at a computer all day so having a paper copy of interesting articles gives me a chance to read up and markup posts that I find valuable. Headers and Sidebars are by far my biggest pet peeves. While they're invaluable for site navigation I have no use for them on a piece of paper. I also hate having to print some sites in landscape view just to see an entire article.

Consider the fact that some of your readers may not have laptops and may print your content. Check out your site and see if there's anything you can do to improve on it's printability.