CODEWITHSUNDEEP
cssprinting
Patrick McElhaney
Patrick McElhaney

Reputation: 59271

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

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;
      }

Upvotes: 3

Views: 921

Answers (3)

Jon Snyder
Jon Snyder

Reputation: 2009

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.

Upvotes: 0

JGood
JGood

Reputation: 522

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.

Upvotes: 1

ChrisLively
ChrisLively

Reputation: 88064

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.

Upvotes: 8

Related Questions