We spend a lot of time reading text on the internet. This is mainly read on our computer screens. But reading information on a computer screen is far less comfortable than reading it on the paper. Because of that I often print out some longer articles to read them. And I’m amazed by how little people take care of such readers. Most of the time I get a paper full of useless info and links, which I can’t click anyway (or at least clicking them won’t do anything).

Example - CNN.com is a decent news website. A random article on the site might look something like this. Quite ordinary, really. But try printing this article. Or better yet, click “print preview” to save precious paper. See how bad it is? It is full of information you don’t want. I’d rather copy the news text into a text editor and print it there.

Now try doing the same with this article on A List Apart. The printed page does indeed look like an extract from a newspaper or a magazine.

“How do I accomplish a proper printout then”, I hear you ask. There isn’t much to it really. When presenting content, a browser knows which media it is rendering for. For instance, when reading a page on our computer display, the media is “screen”. For printed pages, media would be “print”.

One can specify the correct media type for each stylesheet on the page. Therefore this would include all the rules to show on screen:

<link rel="stylesheet" href="style.css" type="text/css"
        media="screen" />

And this would do it for a printed page:

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

Now, does that mean you must create two css files, one for screen and one for print? No. You can cover both by saying media="all". So what I usually do, I create a default stylesheet with media="all" and include another one for print just bellow it. In there I rewrite some rules, which should be special for a printed page.

Things to look for are:

Removing unneeded elements

Interactive elements such as menus, banners, form elements, etc. might be useful on your page, but are totally unneeded on a printed page. You can specify a display:none; for them in print css.

Units

Primary screen units are pixels. But what is a pixel on the paper? This depends on the DPI, but you probably don’t want people with better printers to read smaller font. So try using units such as points (pt), millimetres (mm) or inches (in). A good font size would probably be somewhere between 10pt and 12pt

Colors and contrasts

Keep in mind that not all people will print your site in colors. Do check how your text and graphics look in grayscale. Fonts are usually best if black.

Backgrounds

By default, most browsers won’t print background images. So make sure your content looks ok without them.

Page width

The paper’s width isn’t 1024px or 800px. It’s usually 210mm (8.27 inch) for A4 or 8.5 inch (215.9mm) for letter. But there are paper margins to consider. I think you’re best of by not specifying any width at all, or doing it in percents

CSS does include some special rules for paged media, but as you might have guessed, most of them don’t work well in today’s browsers. The two that do seem to work, are page-break-before:always and page-break-after:always rules. These two, applied to an html element force a page break before or after it. Might be useful in cases such as when you always want a title to always start on a new page.

Preparing your website to print well usually doesn’t take much time. Just make sure to cover the basic stuff and do some test prints (different browsers and different printers, if you can). Visitors won’t get too bothered if there’s an input or a button visible, but they might get annoyed if a navigation menu doubles the amount of pages printed.