Mastering Paged.js: essential tips for creating precision PDFs

How to use Paged.js for creating beautiful PDFs from HTML.

What is Paged.js?

Paged.js is a free and open-source JavaScript library that paginates content in the browser to create PDF output from any HTML content. It's a polyfill for the W3C Paged Media specifications.

Essential Tips

1. Use break-after for page breaks

Control where pages break in your document:

.chapter { break-after: page; }
.no-break { break-inside: avoid; }

2. Set up your @page rules

Define page size and margins:

@page {
  size: A4;
  margin: 2cm 2.5cm;
}

3. Use named strings for headers/footers

Display running content in page margins:

@page {
  @top-center {
    content: string(chapter-title);
  }
}
h2 { string-set: chapter-title content(text); }

4. Handle images carefully

Prevent images from being split across pages:

img { break-inside: avoid; }

5. Use counters for page numbers

@page {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
  }
}

Using with Doppio

Simply include the Paged.js script in your HTML, and Doppio's rendering engine will process the pagination before generating the PDF. This gives you full control over the output.

Check out the full Paged.js documentation for more advanced features.