Enforce Print Page Breaks with CSS

Question

I have a page that basically displays all work orders for a given day. I have tried to create the HTML so that I can use page-break-after: always to create a logical print page break and continue on. However when the user prints the page, there are often overlaps, multiple work orders on the same page, etc. I simply want to enforce a hard page break that Firefox, Safari, and Chrome will listen to.

My HTML looks like this

<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>

and my CSS is basically like so:

.WOPrint
{
    max-width: 100%;
    padding-bottom: 3em;
}

.WOHeader
{
    display: block;
    page-break-inside: avoid;
}

.WOPageBreak
{
    height: 1px;
    width: 100%;
    float: left;
    page-break-after: always;
    display: block;
}

EDIT In a hackish attempt I have played around with setting the WOPrint class min-height. Changing it to 9 inches seems to give me enough margin room for printing from all Safari, Firefox, and Chrome when I have it set to a standard US paper size. This is certainly not the way I would like to fix it, but I also don't want to have to render to PDF.

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-heihgt: 9in
    }

Showman

Answer 1

short answer. You can't it's not consistetly supported across all browsers. there is slightly better support for page-break-before than page-break-after though...

see page-break-before compatibility and page-break-after compatibility

you could also try embedding a Ctrl-L in the page at those points thought I'm pretty sure a lot of printer drivers are gonna ignore that.

Gertudegerty

So do I seriously have to look at rendering this as a multi-page PDF just because I can't get a page break between divs? – Showman

If you want to guarantee cross-browser then unfortunately, yes. thought I'm about to test the Ctrl-L bit across a few browsers out of curiosity – Gertudegerty

annnnd, no.. if only you were printing to a printer local to the server... docs.php.net/manual/en/function.printer-open.php – Gertudegerty

If you look at the edit I made to my code example I came up with a hackish work around. By setting the minimum page height to 9 inches I can at least get it to force a page break correctly. The disadvantage to this though would be if someone wanted to print landscape or some other paper size. For my particular case this just may end up being the KISS answer. – Showman

Answer 2

By setting the min-height in the WOPrint CSS class I'm able to fake an approximate page break for a standard height page:

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-height: 9in;
    }

Showman

Answer 3

All you need is

.WOPageBreak
{
    page-break-before: always;
}

However, you'll also want to add "overflow:visible" to the body tag because without it Firefox will only print the first page.

You may also get more consistent results if you set margin:0 on the body when printing, like so:

@media print{body{margin:0}}

Stenography