Google Chrome Printing Page Breaks

I've used the following approach successfully in all major browsers including Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

This is a simplified example. In the real code, each page div contains many more elements.

page-break-after does not work in Chrome

It is a hack, but Chrome doesn't support page-breaks very well. So try to use this instead:

<body>
    <main role="main">
        <section class="tabs">
            <div class="tabbed-content">
                <div class="break-after">Page 1</div>
                <div class="break-before">Page 2</div>
            </div>
        </section>
    </main>
</body>

And add this to your css:

html, body, .main, .tabs, .tabbed-content { float: none; }

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

.break-before {
    display: block;
    page-break-before: always;
    position: relative;
}

page-break-before: always not working as intended after updating chrome from v97 to v98

(1) Meh Option - Changing Margins: from None to either Default or Minimum seems to resolve our issue... We prefer None for saving pages on our site to PDF without a white border around the page, however Default looks just fine otherwise and we can use this.

(2) Better Option - Adding width: 100.25% to the div with class controller-navbar-container fixes this issue on this page and on every other page on the site as well. I am not sure why this is the case.

CSS page-break-after to have even pages in Chrome

You definitely should keep in mind, that page-break properties are not supported correctly in most browsers. Check the caniuse report.

Also, here is the question that might help you, it already has some good answers.

Duplicating the main suggestions here with my own commentaries. It may be, that you can use the mix of every of them.

Number 1. (@Nils)

You could maybe try wrapping each of your reports in a div and then using something like jQuery to work out the height of the div to figure out whether it ends on an odd page.

If it ends on an odd page, then inject an empty div with your page-break-after class after that so that it feeds to the next page.

Obviously this will only really work if you know the dpi at which your page prints on your target printer. There's no magic answer that will just work for all scenarios.

72 dpi (web) = 595 X 842 pixels
300 dpi (print) = 2480 X 3508 pixels
("210mm X 297mm @ 300 dpi")
600 dpi (print) = 4960 X 7016 pixels

You'd need to experiment a bit here with your standard printer settings to see what works for you/your client(s). If there are multiple scenarios, you could let them select from a drop-down.

So you'd use jquery to check the pixel height of the div, check it against the pixel height of the page to see if the div ends on an odd or even page - then inject the page break if the report ends on an odd page.

You'd also need to know upfront if the user will be using duplex printing - because you'd only need to do this for duplex printing.

Number 2. (@spekary)

Use inline styles for manual page-breaking where it is needed.

<div style="page-break-after: right">
    <!-- your content -->
</div>

However, you should keep in mind that this doesn't exactly solve your problem, because, as you said, the document

will contain unspecified number of text elements of unspecified length.

But still, maybe you can play around with this solution.

page-break/webkit-region-break not working in chrome anymore?

Make sure the element with page-break-after: always; is a block element. Another selector might be changing it to inline-block or something else which would prevent the break from being applied.

Also make sure the element is not within a floated element. Thanks RoadBump.

How to achieve page break in HTML table for Google Chrome?

Finally I resolved this issue. I made tr{display:block;}
and then I fixed the cell spacing.

Page break only works on block level elements.

Google Chrome Printing Page Breaks