Print styles
I’d like to share some thoughts on styling for print. In the past we, the webmasters, used to make separate subpages for printers, but with growing media queries usage, it’s not necessary anymore. Now, instead of creating extra page with some elements (header, footer, sidebar, etc.) stripped down, we can do that simply with CSS. In 2012, I made a research and came up with following guideline, which I revised during translation.
Print only styles
First, we have to attach print only styles. There are two sensible ways of doing that. One is attaching it with specific media attribute in HTML:
<link rel="stylesheet" media="print" href="our-style.css">
The other would be using media query inside CSS file:
@media print {
/* All those lovely styles */
}
I prefer the first method file will be loaded only when needed.
Rules
See the effects on intended device
Styling for print should actually be considered a part of responsive web design. A piece of paper is not much different that LCD displayer or smartphone. There is a print preview which is very helpful for the most of the time, but eventually you will have to print it and see it with your own eyes.
Get rid of unwanted elements
There is no need to be gentle. Normally I advise against using the !important rule, but here is an exception, as we don’t need to care for cascading after applying print styles. One thing, though, the print file should be attached as a last one.
.non-printable {
display: none !important;
}
Elements I usually get rid of:
- navigation menu
- search
- sidebar
- footer: browser will print page URL anyway
- videos: embed itself will not show, but sometimes it has some wrapping with fixed height, and that would show as an empty space
- header: decide for yourself if there’s a company logo, unless it’s background-image (we’ll get to that), in which case, drop it as well
- advertisments: they would only waste the ink and Flash [sic!] would leave empty space
The only thing that should stay is content. Preferably in one column because we don’t know what size of paper will be used (A4 most likely but we don’t know that for sure).
Use black font
Pages are printed mostly on white paper. In that case, black letters should improve legibility. Many people have only black and white printers because they are cheaper. With printer like that, all those fancy colourful letters would become fifty shades of gray. Meaning, the effect is out of your control. Black is the colour, then. Sometimes people use different colour of paper, like green or pink, and especially then black should be more distinct.
The same goes to links. If you want to distinguish them, use underline. There’s no <u> anymore, so there shouldn’t be any underlined parts of text.
(I once owned an ink printer, back in the 90s, and if there were colours on the printed page, also black colour was a combination of cyan, magenta, and yellow. So in that case we also save some precious ink. Mo’ money in user’s pocket.)
Font size
Font size should be decided after seeing effect on paper and paper only. I used to think that the pt unit is the best for printing, but the result may vary depending on a printer’s resolution. So it’s safer to use px, after all. And em, i.e. if we want something like headers to be twice size of normal text.
No backgrounds
Although browser allow to print backgrounds, by default it’s turned off. And it’s neither easy nor obvious how to turn it on. It’s safer, then, to assume that users haven’t changed that than give some elaborate instructions how to turn do it. (Which would have to be followed because browser’s options change as well. In 2012, Chrome used to not allow to print background at all.) In most cases, users print pages because of text on them, so let’s give them what they want. White background. It works very well with black letters from a point above.
Borders are allowed
Borders are okay and browsers leave them in print. Just keep them black or gray.
Add link’s hrefs to text
Links are lost in print as you cannot click the paper. (Duh!) But with this neat trick you can leave information about linked resource:
a:after {
color: inherit;
content: " (" attr(href) ") ";
}
Widths
Set all possible widths to auto.
Tools
Apart from mentioned before print preview and actual preview, there is Web Developer (for Chrome and Firefox) which allows to see page with media="print" and inspect elements, and that is very useful.