3 print CSS traps that broke my PDFs
Our PDF preview took 11 seconds and still did not match the screen. Printing the same HTML the editor renders, with headless Chromium, took it to 2.5 s cold and a 30 ms render. Three print-CSS traps cost a round each.
What changed this week
- Cold preview: 11 s to 2.5 s. The Chromium render itself is 30 ms; fonts and logo fetches were the rest.
- Proved with a tiny local service first, backend untouched. The designer’s reply to the new PDF: this is a dream.
How to do it
- Stop rebuilding the document in a report engine. Print the same HTML the editor already renders, with headless Chromium, so screen and PDF cannot drift.
- Trap 1: flex and grid containers never fragment across pages. Section bodies must be blocks.
- Trap 2: overflow: hidden turns a table into an unbreakable scroll container. overflow: clip breaks fine across pages.
- Trap 3: a gap that lands on a page break. A margin is dropped cleanly; padding leaves an empty bordered box on the next page. Use margins between sections.
- Measure cold and warm separately. Most of the cold time is fonts and images, not the render.
Audit this HTML template for printing with headless Chromium. Flag every flex or grid container whose content may span a page (make the body a block), every overflow: hidden on a table or long list (use overflow: clip), and every padding that sits between sections (use margin). Then list what the page fetches on a cold render (fonts, logos, images) and how to inline or preload each.