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!

Doppio's machine with new @page support
Doppio's machine with new @page support

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