tags:

views:

208

answers:

3

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 something wrong, or is the browser support just not as solid as advertised?

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html>
    <head>
    <style type="text/css" media="screen">
      h2 {
        page-break-after: avoid;
      }                         

      p {
        page-break-inside: avoid;   
        orphans: 2;
        widows: 2;
      }
    </style> 
    <title>Page Break Test</title>
    </head>
<body>


<h2>Header</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 
elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum.</p>    

<!-- 
 Cut and past the above header and paragraph 20+ times 
 so it will span several pages when printed. 
-->           

</body>
</html>
+5  A: 

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.

Chris Lively
A: 

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.

goodwince
A: 

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.

Jon Snyder
Considering that you could use the table layout model in CSS, it wouldn't even have to affect semantics of the markup.
Anonymous