In my recent article for Smashing Magazine and elsewhere in this blog I have introduced principles and best practices for making print stylesheets, but I’ve found a general lack of information on the CSS print development process. In response, a few production suggestions:

Treat print as a component of adaptive design

Like accessibility and mobile, print has long been regarded as a second-class citizen in web development. The truth is that print is relatively easy to test and develop if it considered at the same time as the site is constructed. Trying to “retrofit” mobile, print and accessibility into a completed website is often challenging, and is the primary reason why many developers regard them as “too hard”.

Create a tight feedback loop between screen and print CSS development

To avoid placing print stylesheets in the “not enough time” basket they must be revisited frequently during development, rather than leaving them until the end. On a large project I would recommend print-testing the site at the end of every week. If this schedule is maintained, alterations to the print stylesheet are usually small, and handled with far greater ease.

Remember that general CSS rules will be inherited by a print stylesheet

Making a basic print stylesheet is often a matter of simply turning elements off. Alternatively, you can ensure that a print stylesheet starts off as a blank slate by ensuring that the main styles remain exclusively for screen:

@charset utf-8;
@media screen {
	/* main styles, exclusively for screen */
}
@media print {
	/* print styles which will not inherit any screen CSS */
}

Pair responsive design with print development

Measuring your CSS in percentages rather than pixels makes print much easier to develop. Many of the problems encountered when printing web pages are often due to an errant element measured in absolute units: a 1200px wide banner, for example. Starting with, and sticking to, percentage widths for elements tends to work best for both mobile and print.

Use @page to control the placement of the result

The @page control is outside the body tag, and is only applied when a web page is printed. Because it is beyond the area of HTML, units such as em and ex do not apply to it: the space between the printed body and the edges of the paper should be measured in centimetres or inches. So the best approach for most printed pages (assuming you have an outer wrapper div) is to write CSS like the following:

@media print {
	@page { margin: 3cm; }
	body, #wrapper { 
		width: 100%;
		margin: 0;
	}
}

Use developer tools to work with print effectively

Much of the frustration in working with print stylesheets has been the lag between altering the CSS and seeing the results on a printed page. Modern web development tools have reduced that delay to near zero:

In Chrome: from Tools / Developer Tools, choose Settings (the gear icon at the extreme bottom right of the window). In the window that appears, choose Overrides, turn on Emulate CSS media and select print. Your page will now appear in the browser with print styles applied.

You will still need to use your browser’s Print Preview function, and actual printouts of the pages, for final quality assurance, but these steps can now be held off as a final step.

Map by Eric Fischer, used under a Creative Commons Generic 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.