CSS for Printing

Last updated on May 9, 2019

Sometimes people are more baffling than browsers.

The goal

The goal is to create a simple web page (such as a résumé) that prints nicely, specifically at page boundaries. Being a Microsoft Word user, I think in terms of applying keep with next and keep lines together to key places. These concepts are covered nicely in the CSS specification:

https://www.w3.org/TR/CSS21/page.html

• Keep with next translates to page-break-after: avoid
• Keep lines together translates to page-break-inside: avoid

Most browsers do not work

The spec has been regurgitated over the years in various forms, across hundreds, perhaps tens of thousands, of web sites, some claiming support exists in every major browser. Has anyone actually tried it in any browser other than IE?

• Microsoft Edge 20 works.
• IE9 and IE10 work.
• IE8 works, as it says it does.
• IE7 works, which is surprising.
• IE6 does not work, as expected.
• Safari 5.1.7 for Windows does not work.
• Opera 11.5 works.
• Drum roll please
  • Chrome through 74 does not work.
  • Firefox through 66 does not work.
    • page-break-inside starting working after a few years but page-break-after still does not (after almost ten years, in 2019).

In order to help myself track this limitation, I created a test page here:

http://test.hemiola.com/css-for-printing.html

Thoughts

One theory as to why some people are mysteriously satisfied with something that doesn’t work is that they didn’t actually try it (i.e., print to paper) and are satisfied simply putting the CSS in place, believing that it works, and not noticing that it doesn’t. Or perhaps they tried it only in IE, which is probably more true the farther back in time you go (IE7 is just over three years old at the moment).

Maybe some people are content with trying it and seeing that it doesn’t work and moving on to bigger fish to fry. Actually, I think that for whatever reason, very few people care about and have tried this feature.