Menu

1 / 2

The preview that lies, and the one that doesn't

DEV Community: html·Philipp Staudt·17 days ago
#fOlLkYIi
#devto2#devto#dev#paged#preview
Reading 0:00
15s threshold

Every document editor has a preview, and the PDF is always made somewhere else. The question worth asking of any preview is not whether it looks right, but whether page 1 ends where the PDF's page 1 ends. A browser window has no pages at all. Switching it to print styles ( @media print ) changes the styles and still has no pages. The browser's print dialog does paginate, but with its own margins and, unless you untick them, its own header and footer — not the ones your API renders.

Our editor has a flow preview for writing and a paged preview for layout. The paged one uses Paged.js , which paginates HTML in the browser following the CSS paged-media rules; the PDF comes from headless Chromium on our render servers. So we measured whether the two agree.

The test

One short report: a heading, a banner, and 24 cards. Each card is height: 22mm with padding: 5mm and a border, the way a template sets a box to a height — and each is kept whole with break-inside: avoid .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.