/* Avoid breaks inside elements */ table, figure, pre page-break-inside: avoid; break-inside: avoid; /* modern */
</style> </head> <body> <h1>Chapter 1</h1> <p>PDF-ready content…</p> </body> </html> | Tool | Best for | |--------------|------------------------------| | PrinceXML | Professional, complex books | | WeasyPrint | Open source, good CSS support| | Paged.js | Browser polyfill for @page | | wkhtmltopdf | Legacy HTML → PDF (WebKit) | | Chrome headless | Simple print-emulation | These notes give you a solid foundation to style HTML for reliable, print-ready PDF output. Keep a copy handy when working on reports, e‑books, or invoices.
/* Orphan/widow control / p orphans: 3; / min lines at bottom of page / widows: 2; / min lines at top of page */ css pdf notes
<div class="page-header">My PDF Report | Chapter 1</div> body counter-reset: chapter section;
Using running() and element() .
Use @media print to isolate PDF styles.
a[href^="#"] content: " (page " target-counter(attr(href), page) ")"; /* Avoid breaks inside elements */ table, figure,
@page @top-left content: element(page-header);
@page chapter-page size: A4; @bottom-center content: counter(page); Use @media print to isolate PDF styles