Enforce Print Page Breaks with CSS

Can I force a page break in HTML printing?

Add a CSS class called "pagebreak" (or "pb"), like so:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Then add an empty DIV tag (or any block element that generates a box) where you want the page break.

<div class="pagebreak"> </div>

It won't show up on the page, but will break up the page when printing.

P.S. Perhaps this only applies when using -after (and also what else you might be doing with other <div>s on the page), but I found that I had to augment the CSS class as follows:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

How to deal with page breaks when printing a large HTML table

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

How can I count CSS page breaks for printed HTML?

Ive been able to implement page breaks whilst creating PDFs for print, using wkhtmltopdf.
though im not sure if my solution is compatible with non webkit browsers but im sure you can get a vendor prefix for all the broswers if needs be.

Heres what i did, using page-break-inside: avoid; & page-break-after: always;

Then using jquery I worked out the heights of my sections and calculated (if the page size is going to be a4) how many times a break occured, and numbered the pages dynamically using jquery and pdf footers (before creating the pdf) so when the user downloaded the pdf it was numbered correctly.

What I reccomend is setting the page up (as the print stylesheet) so that page numbers are visible at these heights in the page, using absolute positionsing perhaps.

but I dont think this is failsafe.

Give them a PDF to print, then you have more control and dont have to worry about the web-print stylesheet, provided the PDF download link is prominently dispalyed.

HTML+CSS A4 page with automatic page breaks

If I understand your question correctly, you might want to use page margins instead of the padding on body.
Make sure to set the page margins to the default value in the print dialog. If you don't, your custom page margins (as specified in CSS) will be overridden and don't have an effect.

Your stylesheet would look something like this:

@page {
  size:    A4 portrait;
  margin: 20mm;
}

body {
  width:   210mm;
  height:  297mm;
}

Using CSS and/or jQuery for Printed Pages with Page Breaks

Ok, I spent past day or so figuring this out, so I wanted to post my solution to this in case anyone else needed the answer.

Generally speaking here is what I did.

Generated output as normal (not printer-intended)
Created 2 style sheets (one for printer, and one for screen). Measurements were in inches (not pixels) for all page elements to be turned into printed output.
Using jQuery, I did the following:

-> called function that appends initial page to DOM - something like this

// assumes old_page_id is existing element in DOM, and var page_id = 1;
$j("<div class='page' id='" + page_id + "'><div class='print_area'></div></div>")
.insertAfter('#' + old_page_id);

-> measure height of div that is the page (in my case, $('.page').height(); )

-> ran a function to do the insertions of divs and new pages - something like this

$('div_class').each(
 function() {
  // measure height of $(this)
  // add it to running total of used space on existing page
  // if sum total exceeds remaining space, create new page, and add to that one
  // if still room left, add to this one
 }
);

Note that each page div (in my case, class='page') in the printer stylesheet has this:

page-break-after: always;

This is how I got it to create a new page on the printer where I wanted.

After running jQuery function above, I hid the original section that contained div elements I wanted to move into printed pages. Note I could not hide this section before hand because my jQuery measurements would not produce valid results (in my case, I placed all the divs inside a div wrapper with id of 'hide_me', and set the style to height:1px; overflow:auto; ).

I realize this is very 50,000 ft view, but hopefully it is helpful to you.

Controlling page-breaks with HTML/CSS

You need page-break css properties.

h1 {
    page-break-before: always;
}

Also I can recommend some general advice and useful tips for printing stylesheets in this Smashing Magazine article.

how to force page break between absolutely positioned elements in css

A little late to the game, but this might be useful for future reference:

.break {  page-break-after: always;  position: relative;}
.absolute {  position: absolute;}

<div class='break'>  <div class="absolute" style='top:11.58cm;'>page1</div></div><div class='break'>  <div class="absolute" style='top:13.35cm;'>page2</div></div>