CSS for Printing

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.


Posted

in

by

Tags:

Comments

4 responses to “CSS for Printing”

  1. Bouke Avatar
    Bouke

    Safari 7 on OS X appears to respect page-break-inside: avoid, but doesn’t respect page-break-after: avoid.

  2. Anton Samsonov Avatar
    Anton Samsonov

    The year is 2016, the place is Firefox 47.0, — and it still does not work!
    Same with Konqueror 4.14.18.

  3. Peter Wone Avatar
    Peter Wone

    The setting page-break-after: avoid; should cause the heading to follow the paragraph onto the next page, but it doesn’t. I tested this using your own test page with Chrome 74, Edge 44 and Firefox. Only FF worked.

    1. Jens-Ingo Farley Avatar
      Jens-Ingo Farley

      Firefox 66 doesn’t work for me. Edge still does, as it always has.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.