/* 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;
p orphans: 3; widows: 2;
| Value | Size | |-------------|-----------------------| | A4 | 210mm × 297mm | | letter | 8.5in × 11in | | A5 | 148mm × 210mm | | legal | 8.5in × 14in | Named pages .chapter page: chapter-page;
h1 counter-increment: chapter; counter-reset: section; css pdf notes
a[href]::after content: " (" attr(href) ")"; /* show URLs */
/* Force break before/after */ h1 page-break-before: always; break-before: page;
h2 page-break-after: avoid;
@page size: A4; /* A4, letter, legal, landscape */ margin: 2cm; @top-center content: "Document Title"; @bottom-right content: counter(page);
h2:before content: counter(chapter) "." counter(section) " "; counter-increment: section;
.no-break break-inside: avoid;
/* Page numbering */ @page @bottom-right content: counter(page) " / " counter(pages);
| 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;
@page @top-left content: element(page-header); /* Reference page number / See page <a
@page chapter-page size: A4; @bottom-center content: counter(page);