A Printer Friendly Version
CSS, Web Design
“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.
That means somebody (or a script) had to take the original document and convert it to a stripped-down version that’s more suitable for print output. Maybe that somebody was even you.”1
The endnote, if you take the time to read it, will tell you the article this references was written in 2002. Fourteen years later and we are still faced with far too many pages with a printer icon or the ubiquitous “click here for a printer friendly version”. Makes you wonder what we have learned during those years.
The ability to include a stylesheet specifically for print media has existed since CSS 1 released in 1996 and was refined with CSS 2 as a published recommendation in 1998. The <link rel=”stylesheet” href=”print.css” media=”print”> highlighted attribute can be added to a linked external stylesheet. That statement informs the browser the stylesheet is to be used when printing or when viewing the pages content in print preview.
If you would rather not create a separate stylesheet for print media there is the option of adding a @media print section to your existing stylesheet. Any specific rules for printing a page can be added to this media query block.
@media print {
header {
background: none;
color: #000;
}
}
Using a separate print stylesheet also affords us the opportunity to use those interesting units of measure CSS offers like pt for fonts or in/cm for margins. We don’t use them because they don’t make any sense in a world of varying screen sizes. It makes consistent design improbable. The printed page on the other hand is consistent in size and is perfect for points, picas, inches, centimeters, or millimeters.
Most of the time designers for the web feel the content is only going to be viewed in a browser. The printed page isn’t a consideration. But it stands to reason if we design pages to adapt to varying screen sizes we should also take print into consideration. The printed web page needs to be addressed in this time of responsive design, usability, and accessibility.
Here are a few additional resources on the subject.
6 Things I Learned About Print Stylesheets From HTML5 Boilerplate
10 Tips for Better Print Style Sheets
Tips And Tricks For Print Style Sheets
1Meyer, Eric (5/10/2002). CSS Design: Going to Print [Article]. Retrieved from http://alistapart.com/article/goingtoprint