How are the page-break properties in CSS supposed to work?

StackOverflow https://stackoverflow.com/questions/808991

  •  03-07-2019
  •  | 
  •  

Question

Modern browsers are supposed to support the CSS page-break properties to some degree. However I haven't been able to get any browser to print any differently when I use avoid, widows, or orphans. Am I doing it wrong, or is the browser support just not as solid as advertised? 

      h2 {
        page-break-after: avoid;
      }                         

      p {
        page-break-inside: avoid;   
        orphans: 2;
        widows: 2;
      }
Was it helpful?

Solution

Browser support for printing sucks. Not just a little bit, but completely totally and without compare. About once every other year (for the past 10), I've played around with this and I always come back to the same conclusion: don't depend on the browser to be able to handle good printing.

If it absolutely must be positioned correctly, create a pdf file on the fly and let the user print that.

OTHER TIPS

If you are wanting to do a page break I know that this is the way it works at least in Firefox and IE. Last time I checked this worked in IE7. 

Page 1

<br style="page-break-after:always" />

Page 2

It should print the pages on separate pieces of paper, totally depending on the browser.

I know this will go against everything everyone says about html development, but use tables. Put content that needs to stay together into a table, and then the page will not be split in the middle of the table. If the table is longer than one page, then it will be split somewhere in the middle of the table, but using tables is a good way to keep content together when printing.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top