Print styles

I really wanted to make sure that the print styles for Resilient Web Design were pretty good���or at least as good as they could be given the everlasting lack of support for many print properties in browsers.

Here���s the first thing I added:

@media print {
@page {
margin: 1in 0.5in 0.5in;
orphans: 4;
widows: 3;
}
}

That sets the margins of printed pages in inches (I could���ve used centimetres but the numbers were nice and round in inches). The orphans: 4 declaration says that if there���s less than 4 lines on a page, shunt the text onto the next page. And widows: 3 declares that there shouldn���t be less than 3 lines left alone on a page (instead more lines will be carried over from the previous page).

I always get widows and orphans confused so I remind myself that orphans are left alone at the start; widows are left alone at the end.

I try to make sure that some elements don���t get their content split up over page breaks:

@media print {
p, li, pre, figure, blockquote {
page-break-inside: avoid;
}
}

I don���t want headings appearing at the end of a page with no content after them:

@media print {
h1,h2,h3,h4,h5 {
page-break-after: avoid;
}
}

But sections should always start with a fresh page:

@media print {
section {
page-break-before: always;
}
}

There are a few other little tweaks to hide some content from printing, but that���s pretty much it. Using print preview in browsers showed some pretty decent formatting. In fact, I used the ���Save as PDF��� option to create the PDF versions of the book. The portrait version comes from Chrome���s preview. The landscape version comes from Firefox, which offers more options under ���Layout”.

For some more print style suggestions, have a look at the article I totally forgot about print style sheets. There���s also tips and tricks for print style sheers on Smashing Magazine. That includes a clever little trick for generating QR codes that only appear when a document is printed. I���ve used that technique for some page types over on The Session.