Kissing Print Versions Of Pages Goodbye

Have you ever gone to a site at which you needed to click on a link inside an article to have a printable version without the site's chrome, and thought to yourself that surely there must be a better way? Welcome to the power of CSS.

One of the many great things about CSS is that it is absolutely trivial to make the same page display across a range of media according to the needs of that particular medium. Among the plethora of media which CSS already covers is print. So how can we use CSS to optimise a page for printing?

I'm going to assume that your site already uses CSS for layout — or at least uses structural layout. Provided that your site uses a well designed table layout, you should also be able to apply a print style sheet to it.

So, how do we do it?

The first thing you need to do is link in your new style sheet and specify it is for print media.

If you're using <link> to include your style sheets, you can add a new link in your documents, pointing to the style sheet for print formatting, and add the attribute media="print". For example:

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

To mark a section of embedded style in your document as print only, add the same attribute to your <style> tag, as in:

<style type="text/css" media="print">

To @import a print style sheet, add "print" after the declaration, for example:
@import url(print.css) print;

Lastly, to include print stylings inside already existing style sheets, surround the print rules with @media print { } for example:
@media print { body { background-color: white; } }

The next thing we need to address is deciding what parts of the page are irrelevant when printed. You'll end up deciding yourself what formatting your print style sheets need, of course, but for the purposes of this article let's assume you have a header bar, a background image, a navigational menu, a breadcrumb and the usual disclaimers (privacy policy, terms of use, etc) in addition to your content. The next thing you have to do is consider the printed page. If someone prints your site to show it to a friend what is going to be irrelevant to them?

Let's start by massacring your carefully designed layout. Firstly, the navigational items, such as the breadcrumb and nav menu have to go. They have no use on a printed page, where the links on them can't be interacted with, so they're cut out by a display: none; declaration in the print stylesheet for those elements. Next in line to go is the background image - there is nowhere logically to put a background image, except behind the text, which it would obscure. In fact, all the items I mentioned except the content have no real relevance to someone reading the paper, so we set them all to not display.

So we're done now, right? Wrong. Although you've adjusted your site structure to better fit the printed page, other things remain to be changed. Take, for instance hyperlinks. Since they can't be interacted with offline, it may make sense to you to remove their underline (via text-decoration: none;) so that they read as normal text. You do write link text so as to make sense when read without the link, don't you? Alternatively, you may wish to keep your underlines there, to indicate to the reader that they are hyperlinks, and in your print style sheet you can also use CSS generated content to print the url of hyperlinks out after them. The code for doing that would appear like this:
a:after{content:"[" attr(href) "]"; }

What else can we do? Well, we can format borders to better suit printed documents, get rid of the help borders that many people use for acronyms, and abbreviations, and a host of other changes in this vein.

Also, don't forget that just because points don't make sense as a font size unit for the screen, doesn't mean they don't work well in print. In fact, you should be using point instead of pixel if you're going to use absolute font sizes at all — pixels come out much smaller on printers than the web, so your nice 12 pixel Verdana that looks great on screen might be so small as to be unreadable in print.

In Summary

CSS offers structural sites an easy way to implement chrome-free printing, without requiring a special print version, as well as all the other benefits it provides. If you're not using this technology yet, you should be considering it.

Advantages of print style sheets

• Totally transparent to user — they only have to click print, instead of having to select a printable version of the page and then click print.
• Easy to modify the way your print pages are formatted.
• Once you get past the basics of formatting pages this way CSS can specify even more page formatting options, that you've never had access to before.

Disadvantages

• Won't work for users of older browsers.
• It can be hard making sure your print style sheets are working. Some browsers do not have print preview options, and IE sometimes has trouble displaying them in print preview when they're stored locally.

Final thoughts

Coming from a user standpoint, if nothing else, I believe that using print style sheets makes a lot of sense. No one wants to have to use more effort than necessary, so if you have a choice why make them have to click twice to print something, when all they should have to do is click the print button?