Paged Media CSS specifications are advancing and polyfills like Paged.js bridge the gaps between what browsers support natively and what's needed for professional PDF generation.
What is Paged Media?
The W3C's CSS Paged Media specifications define how web content is formatted for print and paginated output. This includes page sizing, margins, headers, footers, page breaks, and more.
Key Specifications
- CSS Paged Media Module Level 3: Defines the page model, page selectors, and margin boxes
- CSS Generated Content for Paged Media: Running headers/footers, page counters, footnotes
- CSS Page Floats: Floating content to specific page positions
- CSS Fragmentation: How content breaks across pages
Browser Support
Native browser support for these specs has historically been limited. While basic @page rules and break-before/after have been available, advanced features like margin boxes and named strings required polyfills.
Paged.js to the Rescue
Paged.js is an open-source library that polyfills these specifications, enabling complex paged layouts in the browser. It works as a chunker/polisher that transforms your HTML into paginated output.
Using with Doppio
Doppio fully supports Paged.js, allowing you to create beautifully formatted PDFs with advanced pagination features. Simply include Paged.js in your HTML, and Doppio's rendering engine will handle the rest.
Learn more at the W3C specification page and the Paged.js website.
