Transferring content legibly from the screen to paper has never been a particularly easy task, especially considering the trouble encountered by most web designers dealing with different screen sizes and platforms. Despite this, it makes sense to cater for users who wish to print web content, as it is well known that many people have problems reading large pieces of text from a computer screen. Those web designers who have bothered to cater for users both on the screen and on paper have historically used one of two techniques:
- A separate “print friendly” page that the user downloads and prints, or
- A special print stylesheet that is applied by the browser only to the print preview and the printed page.
Anything that can be done to eliminate unnecessary page elements and format the remaining, important content in the most sensible way has to be a step in the right direction. But in these days of web standards, the former, two-page system is really no longer good enough. The task of maintaining a separate “print friendly” page is time-consuming and messy, and flies in the face of the clean content/style separation that we’ve all been working towards with CSS.
The issue becomes more complex when we consider a dynamic site, where web pages are generated from content in a database. Clicking on a “print friendly” link might cause the page to be generated again, with a print stylesheet. Although apparently simple, this technique could introduce problems in certain situations where reloading the page might be undesirable, for example on a booking confirmation page. Also, even though the content itself is not duplicated in the database, the number of times it is requested is increased, with a corresponding effect on bandwidth and processor usage.
Fortunately the second solution is much more elegant, and by making use of the “media” attribute whilst linking stylesheets to our markup, we can set the user’s browser to use a special print stylesheet when printing our web pages. Eric Meyer’s original article on the subject appeared on A List Apart in mid-2002.
General guidelines for using a print stylesheet:
- You can use the <link />element in your markup to define the stylesheets for screen and print, like this. (You’ll need to create a new CSS document called “print.css”).
<link rel="stylesheet" type="text/css" media="screen" xhref="screen.css" /> <link rel="stylesheet" type="text/css" media="print" xhref="print.css" />
- Remove everything unnecessary. Use
display: nonefor navigation, advertising and everything else that does not need to appear on the printed page. - The standard format is to use a single column of text, often with wide borders. Avoid using floated elements.
- Make sure the body background colour is set to white. All other backgrounds can be set to their defaults as they will inherit their colour from the body.
- Set text to a serif font to improve readability, and define its size in points (12pt Times New Roman is commonly used).
- To improve usability, Eric Meyer suggested including the following snippet of CSS2:
a:link:after, a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }This will display a hyperlink’s location, in smaller text, inside a pair of brackets, after the link text itself. This could be convenient for important links (because you can’t click on a sheet of paper!) but should be used with caution, because it can have a terrible effect on readability if there are too many links.
User Experience
Many recent discussions of print media CSS have pointed to Cameron Adams’ piece on CSS, printing and user expectation, and the two main usability issues he raises. Firstly, print stylesheets make a presumption (that the user wants to print the main, textual content of the page). This makes it difficult for the user to print a copy of the web page the way it appears on screen. Secondly, it defies user expectation when a document that looks different to its screen version comes out of the printer. These usability concerns may be the reason why there are still respectable websites using the old dual-page system.
But is there a way to have the best of both worlds?
Pete McVicar, in a much more recent article on A List Apart, acknowledges the importance of both user expectation and non-duplication of content. The solution he proposes involves providing the user with a “print this page” link - but using javascript to switch stylesheets rather than loading a separate page. This solves all the problems inherent in serving a duplicate print page, but also conforms to user expectations. His technique, in brief, is as follows:
Create a print preview stylesheet, similar to your existing stylesheet but with support for displaying a “preview message”. This is a message which tells users that they are in print preview mode and offers them a “cancel print preview” or “return to normal view” link.
- Add the capability to switch between stylesheets to your javascript.
- Use javascript to generate a “print this page link” and set it to switch styles to a print preview stylesheet.
- Use javascript to generate the “preview message” and the “cancel print preview” link.
This technique raises its own usability issues. Users who have disabled javascript will not benefit at all from this feature. Also, when viewing the print preview, the back button will not function as expected, as switching to the print preview does not advance the browser to a new page. However, the back button problem can be overcome (we discussed a similar problem in AJAX [Part 1] ) and we can simply include an ordinary print media stylesheet for the benefit of the non-javascript users: they won’t be able to see an on-site preview but their printouts will look the same.
Interestingly, there has been very little discussion on the aesthetics of the print stylesheet. In Mark Boulton’s Five Simple Steps to Typesetting on the web: Printing the web he creates a print stylesheet for a newspaper article, paying considerable attention to the formatting of the headlines and images and the preservation of the paper’s branding, but ultimately choosing a single-column format:
“Although this may hinder legibility due to the long line length, I feel this is acceptable considering the potential savings on paper and toner.”
It would seem that browser bugs, differing paper formats and inconsistent support for CSS2 have conspired to make sure that the single-column format remains the only universally accepted print style.
Clearly, the best print formatting solution for any given site depends on a range of factors including its content, users, and usability requirements.
Tags: CSS, print v web, standards, usability