You render an invoice that looks right in the browser, open the PDF and find line item 14 cut in half by a page boundary. The description sits at the foot of page one and the amount sits at the top of page two. Or a certificate splits down the middle. Or a section heading is stranded alone at the bottom of a page while its content starts overleaf.
Chrome is doing exactly what it was asked to do: fill a page, start another, repeat. It has no opinion about which parts of your document belong together. You supply that opinion in CSS, and it takes about six lines. This post originally appeared on the HTML to Image blog as How to control page breaks in HTML to PDF output.
Everything here applies to any Chrome based pipeline: Puppeteer's page.pdf(), Playwright, or a rendering API. The properties are standard CSS, not vendor extensions.
The three properties that do the work
There is no avoid_splitting_rows flag on any HTML to PDF tool worth using, because the renderer is a browser and browsers already have a standard for this. CSS Fragmentation gives you three properties:
