用于纸张打印的 CSS

原文 ↗ Hacker News 讨论 ↗

基于 CSS 的打印布局正越来越多地用于直接从 HTML 生成 PDF、书籍、标签和报告，但开发者会遇到浏览器支持不一致，以及可靠分页、页眉/页脚和高级排版等功能缺失的问题。许多人分享了各种变通方法和工具——例如 Paged.js、WeasyPrint、PrinceXML 和无头 Chrome——以便在不依赖传统桌面排版软件的情况下，对页尺寸、表格断页、页码和脚注进行精确控制。总体看法是，CSS 打印对于许多真实工作流来说已经足够强大且灵活，但仍然不够稳健，也不够标准化，尚不足以完全取代专门的排版系统或 PDF 生态。

CSS 在打印中的采用

  • 很多评论者把 HTML/CSS 作为生成可打印文档的主要方式：发票、电子书、RPG 书籍、标签、网络小说、报告、简历、证书、课程书和教材。
  • 提到的优势包括：快速迭代、易于模板化、可与 CMS/API/Markdown/Asciidoc 集成、源文件体积小，以及“直接用浏览器”的工作流。
  • 有人表示，在长篇排版中，与 InDesign 之类的工具相比能节省大量时间，只要能接受“够用就好”的排版质量。

浏览器与引擎问题

  • 跨浏览器的打印支持被描述为糟糕且不一致；有几个人只面向 Chrome。
  • Chrome：对许多人来说，是打印 CSS 整体上最好的，但多页表格和打印边距仍然有 bug。
  • Firefox：有报告称打印时图片或整页会消失，还有人提到一个长期存在的 bug。也有人说自己没有遇到这些问题。
  • Safari：据称会忽略页面边距。
  • 标签/热敏打印机：在浏览器里尤其麻烦；人们会转而使用原生应用、Electron 或打印守护进程。

工具与工作流

  • 常用工具：Paged.js、WeasyPrint、PrinceXML、Flyingsaucer、wkhtmltopdf、Puppeteer/Playwright + 无头 Chrome、website2pdf、paper-css、Gutenberg、Hartija，以及 Asciidoctor web-pdf。
  • Paged.js 常因实现了分页媒体特性而受到称赞（脚注、页码、运行中的页眉/页脚）。
  • 一些组织禁止某些运行时（例如 Python），从而限制了生成器的选择。

排版与质量担忧

  • 与专业 DTP 工具相比，CSS 打印在高级排版方面被认为要弱得多：CMYK 颜色、精细字偶距、避免“河流”、悬挂标点、语言特定规则，尤其是复杂文字脚本（例如日语）。
  • 变通办法（不换行空格、letter-spacing 的 span、手工调整）被认为很取巧，而且在大规模场景下不现实。

PDF 与 Web 格式

  • 有人认为“直接生成 PDF 就好”，因为浏览器内打印太不可靠。
  • 也有人喜欢先 HTML 优先、再通过专门引擎渲染为 PDF 的工作流。
  • 对 PDF 本身的看法两极分化：有人把它视为出色的“数字纸张”；也有人不喜欢 Adobe 的控制、表单/JS 复杂性，以及在屏幕上的分页式 UX。文中还提到 PDF/A 是一个稳定、更加合理的子集。

实用技巧与坑

  • 常见模式：@media print、用于尺寸/边距的 @page、物理单位（in/mm）、用 break-* 规则避免标题孤行和图表被拆分、用 thead/tfoot 重复表头，以及通过 a::after { content: " (" attr(href) ")"; } 显示链接 URL。
  • 要在没有分页媒体引擎或 JS 驱动布局的情况下，可靠地移除浏览器页眉/页脚，并稳定添加页码或在标题之后开始编号，仍然很棘手。