Printer-friendly? Close, but No Cigar

It should be easy:

1. Remove extraneous content (side-bars, menus, decorations, etc.);
2. Adjust colour scheme for black on white text (it’s quicker to print black on white);
3. Add margins (left, right, header and footer);
4. Regulate page breaks (with the CSS properties page-break-before, page-break-after and page-break-inside).

Unfortunately, the final step in this process seems to me to be the most difficult to achieve. I haven’t found a single browser¹ that respects these tags consistently and/or intelligently.

The page-break-after CSS property is the one that causes me the most frustration. I have the following directives in my print style-sheet:

h3 {
  page-break-after: avoid;
}
h3 + p {
  page-break-inside: avoid;
}

With these directives we are telling the browser that, when printing, it should avoid adding a page-break after a <h3> tag (so we don’t end up with a solitary <h3> at the bottom of a page). We then instruct the browser that when a <p> tag immediately follows a <h3> it should avoid inserting a page break inside that first paragraph.

The result is almost entirely unpredictable. Sometimes it works as I expect. Sadly, more often than not, browsers seem to either ignore these directives or are unable to lay out the printed page in a useful way when we employ them. It infuriates me.

See Also

• Rachel Andrew’s “Designing for Print with CSS.”