@media print body font-size: 11pt; /* pt recommended for print */ line-height: 1.4; .no-print display: none;
</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.
Use @media print to isolate PDF styles.
<div class="page-header">My PDF Report | Chapter 1</div> body counter-reset: chapter section; css pdf notes
p orphans: 3; widows: 2;
/* Reference page number / See page <a href="#section2">Section 2</a> / Renders: See page (page 12) */ ul.toc a::after content: leader('.') target-counter(attr(href), page); float: right;
/* Avoid breaks inside elements */ table, figure, pre page-break-inside: avoid; break-inside: avoid; /* modern */ @media print body font-size: 11pt; /* pt recommended
a[href]::after content: " (" attr(href) ")"; /* show URLs */
.no-break break-inside: avoid;
/* Page numbering */ @page @bottom-right content: counter(page) " / " counter(pages); My PDF Report | Chapter 1<
h2:before content: counter(chapter) "." counter(section) " "; counter-increment: section;
Control where content splits across pages.
a[href^="#"] content: " (page " target-counter(attr(href), page) ")";