Printable Web Pages with CSS

Many blogs and websites I view do not print well directly from the browser. Having printable pages is a good thing© for many reasons that all revolve around making your pages accessible to a wider audience in more situations. Besides, we like the radical notion that a browser's print button might actually be used now and then.

Designing your pages so that they print acceptably direct from the browser is not impossible, but you will find the ease will vary from site to site and the types of data that need to be printed. Flowing, textual data is easily printed; wide tables, inline scroll bars and pre-formatted text are not.

If you have developed your site with semantic mark up there may be an easy solution you have not considered. When importing stylesheets into your pages you have the option of specifying the media (output contexts) the stylesheet should be applied for. If you don't specify this, the browser assumes your stylesheet is valid in all situations, which can lead to undesirable outcomes (that is, completely unreadable printed web pages).

By specifying the media attributes of the stylesheet imports, you can control how the browser attempts to style printed output. Vast improvements in the output quality can often be achieved simply by not providing a stylesheet for print media and letting the browser defaults style your page.

Choose Where your Stylesheets Apply

How does this work? Lets assume you currently import a single stylesheet in your HTML. You might have done so using the following markup:

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

When a user attempts to print your page directly from the browser, the browser attempts to use your styles in the rendered output. If this stylesheet was designed for online use, this can include CSS rules that are difficult to render in the fixed-width, fixed background colour environment of the printed page. The result can be terrible. A Possible Quick Fix - Disable Stylesheets for Printing

A possible quick and easy improvement is to turn off defined styling - relying on the browser's defaults - for non-screen media. We do this by being more specific in our link tag:

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

For a list of recognised media types, refer to the media types W3C web page.

The media attribute specifies that this stylesheet is only suitable for use on a computer screen, so the stylesheet is ignored when the document is to be printed. Often this is provides a dramatic improvement.

How Does it Look?

For an example of page that uses this technique, open your print preview on this blog page.

UPDATE 30-May-2009: Since this blog is now on Blogger this is no longer true. Blogger needs smarter printing!

TODO: Ask Blogger to improve printing

Your mileage may vary, depending on the quality of the mark up you have used in your page. The order of your HTML markup, its semantic value and your use of CSS for screen layouts will all have a large effect on the readability of your page sans-stylesheet. (This is where you find out why best-practice rocks).

These factors and why impact stylesheet-less printing are described below:

Considered Source Order

Source order - the order in which items appear in your markup - becomes important, because the browser lays elements out in the order they appear in your HTML. Ideally, your markup is already ordered to optimise viewing in mobile devices or text browsers anyway. If it is not, you should consider changing it. CSS layout techniques can achieve a range of effects with any source order, so ordering your markup effectively should not be restrictive. You will want to consider placing elements like sidebars and vertical advertising at the bottom of your document, after the content.

CSS Layouts

If you are still using table based layouts you will find this tip is not very helpful. Without overriding the default styles with a stylesheet, tables used for layout appear as they would had they semantic meaning. CSS Layouts simply disappear on the other hand, generally serialising the page output. In the fixed width setting of the paper page, this is often the best way to prevent content being cut off at the edge of the page.

Semantic Markup

Semantic use of HTML has its advantages, and this is one of them. The default styles applied by browsers are generally highly readable, so if you have used lists, headers, blockquotes and other tags semantically in your document, it will still be readable without the stylesheet rules.

Stylesheets Specifically for Printing

So if option 1 is simply to suppress use of the a stylesheet for printing, the next option is to provide a stylesheet dedicated to printed output only alongside the screen-only sheet.

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

A more practical approach might be to selectively override rules from a master spreadsheet for print situations only. This drastically reduces the amount of duplicate code you need to maintain.

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

Many sites already separate layout stylesheets from typography. This can be especially useful to further minimise repetition:

<link href="typography.css" rel="stylesheet" type="text/css" media="screen,print">
<link href="layout.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">

Regardless of the approach, the differences you might want to implement in printed outputs might include:

• Hiding unwanted elements, like sidebars, forms and advertising
• Removing background and foreground images that would not print well
• Ensuring readable fonts with high-contrast font colours and point (pt) specified font sizes
• Removing or resetting fixed widths on elements
• Using advanced (and increasingly supported) CSS rules to insert URLs inline after hyperlinks, or special print-only messages about the context of the printout.

Having a print-only stylesheet is an effective way to retain some custom styles for printing, but this method does increase the amount CSS code that needs to be maintained, so it may not be appropriate for all situations.

Not the Answer for Everything

Some printing requirements will not be helped by these stylesheet methods. When printed outputs must have explicit pagination or wide areas of tabulated data, other approaches (such as providing a PDF) may be more appropriate.

Having said that, this approach to managing your print outputs is relatively easy to understand and can be provided very quickly to every page on a website. Printing web pages directly from the web browser is an easy operation for users of your sites and applications to understand, and generally does not break the flow of their browsing experience. For textual pages such as articles and blog entries, this approach is ideal.

Let the Users Know

If you do go to the effort of ensuring your page can be printed, make sure you let the users know. Years of unsuccessfully printing web documents has permanently dissuaded many users from ever even attempting to print a web page directly.

Letting the users know that the document can be printed directly can be as simple as providing a link which opens the print dialog, such as:

Print this document

I would suggest placing this link at the top and bottom of the page, especially if the page content stretches "below the fold".

In Summary

We can gain a lot of control over how our pages appear when printed directly from the browser, as we have seen. Using semantic, intelligently ordered markup, simply excluding our stylesheet from print operations can produce an effective result in many cases. For more control, a print-only stylesheet can be used. There may still be some pages that are difficult to master the printing of from CSS alone, but most textual content will print with excellent results. Remember to let the users know that they can print your page.