Css Pdf | Notes
@page @top-left content: element(page-header);
Control where content splits across pages.
Using running() and element() .
h2:before content: counter(chapter) "." counter(section) " "; counter-increment: section; css pdf notes
| Do | Don’t | |-------------------------------------|----------------------------------| | Use pt , cm , mm , in | Use px (unreliable) | | Set box-sizing: border-box | Use fixed heights on containers | | Use float carefully | Rely on position: fixed much | | Test with your PDF engine | Assume browser = PDF renderer | | Embed fonts via @font-face | Use web fonts (may fail) | 9. Complete Minimal Example <!DOCTYPE html> <html> <head> <style media="print"> @page size: A4; margin: 2cm; @bottom-right content: counter(page); body font-family: "Times New Roman", serif; font-size: 12pt; line-height: 1.4;
h1 page-break-before: always; color: #1a3e6f;
@page size: A4; /* A4, letter, legal, landscape */ margin: 2cm; @top-center content: "Document Title"; @bottom-right content: counter(page); Complete Minimal Example <
/* Avoid breaks inside elements */ table, figure, pre page-break-inside: avoid; break-inside: avoid; /* modern */
.page-header position: running(page-header); font-size: 10pt; color: gray;
@media print body font-size: 11pt; /* pt recommended for print */ line-height: 1.4; .no-print display: none; Complete Minimal Example <
/* Page numbering */ @page @bottom-right content: counter(page) " / " counter(pages);
</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.
/* Force break before/after */ h1 page-break-before: always; break-before: page;
h1 counter-increment: chapter; counter-reset: section;
Use @media print to isolate PDF styles.
@page @top-left content: element(page-header);
Control where content splits across pages.
Using running() and element() .
h2:before content: counter(chapter) "." counter(section) " "; counter-increment: section;
| Do | Don’t | |-------------------------------------|----------------------------------| | Use pt , cm , mm , in | Use px (unreliable) | | Set box-sizing: border-box | Use fixed heights on containers | | Use float carefully | Rely on position: fixed much | | Test with your PDF engine | Assume browser = PDF renderer | | Embed fonts via @font-face | Use web fonts (may fail) | 9. Complete Minimal Example <!DOCTYPE html> <html> <head> <style media="print"> @page size: A4; margin: 2cm; @bottom-right content: counter(page); body font-family: "Times New Roman", serif; font-size: 12pt; line-height: 1.4;
h1 page-break-before: always; color: #1a3e6f;
@page size: A4; /* A4, letter, legal, landscape */ margin: 2cm; @top-center content: "Document Title"; @bottom-right content: counter(page);
/* Avoid breaks inside elements */ table, figure, pre page-break-inside: avoid; break-inside: avoid; /* modern */
.page-header position: running(page-header); font-size: 10pt; color: gray;
@media print body font-size: 11pt; /* pt recommended for print */ line-height: 1.4; .no-print display: none;
/* Page numbering */ @page @bottom-right content: counter(page) " / " counter(pages);
</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.
/* Force break before/after */ h1 page-break-before: always; break-before: page;
h1 counter-increment: chapter; counter-reset: section;
Use @media print to isolate PDF styles.