Product Update
Native PDF styling gets real: Chrome’s @page support changes the game
Native PDF styling gets real: Chrome’s @page support changes the game
Native PDF styling gets real: Chrome’s @page support changes the game
Styling native PDF gets real: Chrome’s @page support is finally usable... and now available in Doppio!


Native PDF styling gets real: Chrome’s @page support is finally usable — and now available in Doppio
For years, generating high-quality PDFs from HTML meant relying on tools like Paged.js,or custom headless pipelines. But since Chrome 131 (released in November 2024), modern browsers finally support key parts of the CSS Paged Media spec. This means you can now create styled, paginated, printable documents directly from the browser — no external libraries needed.
This breakthrough is now fully supported in Doppio, allowing teams to design structured PDFs with native CSS features.
✅ What now works natively in Chrome (and Doppio)
Here’s what’s supported out of the box with Chromium-based browsers (Chrome, Edge 131+), with example snippets.
1. @page with size, margins, and orientation
Define page layout globally:
🔹 Use cases: invoices, reports, standard print layouts.
🔹 Works in print preview and headless Chrome.
2. Custom margin boxes (@top-left, @bottom-center, etc.)
You can now place content in header and footer areas:
🔹 Perfect for adding logos, document titles, or page numbers.
3. Page counters (counter(page), counter(pages))
Use these in combination with margin boxes or body content:
🔹 Helps build professional documents with accurate numbering.
4. Targeted pages (@page :first, :left, :right)
Style only the first page or alternate pages:
🔹 Useful for books, contracts, or any multi-page layout with structure.
What still requires Paged.js (or similar tools)
While Chrome 131+ supports most core layout and pagination needs, advanced print features still require external libraries like Paged.js. These include:
string-set() and string() – to display the current section title in headers
target-counter() – for dynamic references like “see page X”
@footnote and footnote-display – for managing endnotes or references
@page chapter {} – named pages with specific styles
Professional print features like marks, bleed, or crop boxes
So… is Paged.js obsolete?
Not quite. But it’s less necessary than before.
For most business use cases — invoices, contracts, internal reports, structured exports — the new native support in Chrome and Doppio is more than enough. No JS polyfill, no heavy processing, no server-side layout engine. Just clean, fast CSS.
Paged.js (and others) are still valuable when:
You need complex content flows (books, academic documents)
Cross-references or footnotes are required
You’re building a full publishing toolchain
But for 80–90% of real-world cases, you can now do without.
Now available in Doppio
Doppio’s PDF export module now fully supports these native features — without plugins, JS hacks, or dependencies. You write structured HTML + modern CSS, we handle the rendering pipeline in Chrome 131+.
Native PDF styling gets real: Chrome’s @page support is finally usable — and now available in Doppio
For years, generating high-quality PDFs from HTML meant relying on tools like Paged.js,or custom headless pipelines. But since Chrome 131 (released in November 2024), modern browsers finally support key parts of the CSS Paged Media spec. This means you can now create styled, paginated, printable documents directly from the browser — no external libraries needed.
This breakthrough is now fully supported in Doppio, allowing teams to design structured PDFs with native CSS features.
✅ What now works natively in Chrome (and Doppio)
Here’s what’s supported out of the box with Chromium-based browsers (Chrome, Edge 131+), with example snippets.
1. @page with size, margins, and orientation
Define page layout globally:
🔹 Use cases: invoices, reports, standard print layouts.
🔹 Works in print preview and headless Chrome.
2. Custom margin boxes (@top-left, @bottom-center, etc.)
You can now place content in header and footer areas:
🔹 Perfect for adding logos, document titles, or page numbers.
3. Page counters (counter(page), counter(pages))
Use these in combination with margin boxes or body content:
🔹 Helps build professional documents with accurate numbering.
4. Targeted pages (@page :first, :left, :right)
Style only the first page or alternate pages:
🔹 Useful for books, contracts, or any multi-page layout with structure.
What still requires Paged.js (or similar tools)
While Chrome 131+ supports most core layout and pagination needs, advanced print features still require external libraries like Paged.js. These include:
string-set() and string() – to display the current section title in headers
target-counter() – for dynamic references like “see page X”
@footnote and footnote-display – for managing endnotes or references
@page chapter {} – named pages with specific styles
Professional print features like marks, bleed, or crop boxes
So… is Paged.js obsolete?
Not quite. But it’s less necessary than before.
For most business use cases — invoices, contracts, internal reports, structured exports — the new native support in Chrome and Doppio is more than enough. No JS polyfill, no heavy processing, no server-side layout engine. Just clean, fast CSS.
Paged.js (and others) are still valuable when:
You need complex content flows (books, academic documents)
Cross-references or footnotes are required
You’re building a full publishing toolchain
But for 80–90% of real-world cases, you can now do without.
Now available in Doppio
Doppio’s PDF export module now fully supports these native features — without plugins, JS hacks, or dependencies. You write structured HTML + modern CSS, we handle the rendering pipeline in Chrome 131+.
By Doppio
June 10, 2025