CSS for printing to paper

Original Article ↗ Hacker News Discussion ↗

CSS-based print layouts are increasingly being used to generate PDFs, books, labels, and reports directly from HTML, but developers run into inconsistent browser support and missing features like reliable pagination, headers/footers, and advanced typography. Many share workarounds and tools—such as Paged.js, WeasyPrint, PrinceXML, and headless Chrome—to get precise control over page size, table breaking, page numbers, and footnotes without resorting to traditional desktop publishing software. The overall view is that CSS for print is powerful and flexible enough for many real-world workflows, yet still not robust or standardized enough to fully replace dedicated typesetting or the PDF ecosystem.

Adoption of CSS for Print

  • Many commenters use HTML/CSS as their primary way to generate printable documents: invoices, ebooks, RPG books, labels, web novels, reports, CVs, certificates, course books, and textbooks.
  • Advantages cited: fast iteration, easy templating, integration with CMS/APIs/Markdown/Asciidoc, small “source” files, and “just use a browser” workflows.
  • Some report big time savings compared to tools like InDesign for long-form layout, when “good enough” typography is acceptable.

Browser & Engine Issues

  • Cross‑browser print support is described as poor and inconsistent; several people target Chrome only.
  • Chrome: best overall for print CSS for many, but still buggy with multi-page tables and print margins.
  • Firefox: reports of images or entire pages disappearing when printing, and one long-standing bug claim. Others say they had no such issues.
  • Safari: reported to ignore page margins.
  • Label/thermal printers: especially painful in-browser; people resort to native apps, Electron, or print daemons.

Tools & Workflows

  • Popular tools: Paged.js, WeasyPrint, PrinceXML, Flyingsaucer, wkhtmltopdf, Puppeteer/Playwright + headless Chrome, website2pdf, paper-css, Gutenberg, Hartija, and Asciidoctor web-pdf.
  • Paged.js is frequently praised for implementing paged media features (footnotes, page numbers, running headers/footers).
  • Some organizations ban certain runtimes (e.g., Python), constraining choice of generators.

Typography & Quality Concerns

  • CSS print is seen as much weaker than pro DTP tools for advanced typography: CMYK color, fine kerning, river avoidance, hanging punctuation, language-specific rules, and especially complex scripts (e.g., Japanese).
  • Workarounds (non‑breaking spaces, letter-spacing spans, manual tweaking) are viewed as hacky and impractical at scale.

PDF vs Web Formats

  • Some argue “just generate PDFs” because in-browser printing is too unreliable.
  • Others like HTML-first workflows that then render to PDF via dedicated engines.
  • Opinions on PDF itself are split: some see it as excellent “digital paper”; others dislike Adobe’s control, form/JS complexity, and page-based UX on screens. PDF/A is mentioned as a stable, saner subset.

Practical Techniques & Gotchas

  • Common patterns: @media print, @page for size/margins, physical units (in/mm), break-* rules to avoid orphaned headings and split figures, using thead/tfoot for repeated table headers, and link URLs via a::after { content: " (" attr(href) ")"; }.
  • Removing browser headers/footers and reliably adding page numbers or starting numbering after a title remain tricky without paged-media engines or JS-driven layouts.