Skip to content

W3C 打印规范

W3C 正考虑一切。

W3C CSS 模块

对于打印页面,你需要的规则与在浏览器中显示内容的规则非常不同。例如,你可能希望声明固定大小的页面,而不是布局连续的文本流。书籍在打印布局中还需要许多特定的元素:页边距、页眉、页码、目录,等等。

幸运的是,W3C 在 CSS 方面的工作产生了 CSS 标准的特殊模块,用于在打印过程中管理 HTML 文档的布局。这些模块可以通过媒体查询 @media print{} 在打印样式表中使用,并且只在以下情况下使用当 web 页面从浏览器打印对话框中打印,以创建一个 PDF。

  • CSS Paged Media Module Level 3 ”描述了将流程划分为页面的页面模型。它增加了分页、页边距、页面大小和方向、页眉和页脚、widows 和 orphans 以及图像方向的功能。”
  • CSS Generated Content for Paged Media Module定义了打印文档内容显示的许多特殊要求:运行页眉和页脚、脚注、交叉引用或目录生成的文本、PDF 书签等。
  • CSS Fragmentation Module Level 3定义了如何以及在哪里对 CSS 盒子进行碎片化,包括跨分页符。(这个模块不是专门用于 print 的。)
  • CSS Page Floats定义了如何从正常流中删除元素,并将其放置到不同的位置,具体取决于页面。

我们尽量尊重规范,但有时,它们可能不明确或留下一定程度的不确定性。因此,paged.js 的实现是由我们自己的解释组成的,当浏览器实现这些规则时,它们可能与我们构建的不同。

在某些时候,我们需要 W3C 还没有考虑到的东西。因此,我们可能会根据用户社区的需求开发我们自己的规则。我们将尝试采用最合适的技术来满足排版师和设计师的期望。在这种情况下,我们将写下规范,并与其他 W3C 成员分享。

浏览器对 W3C 规范的支持

之前的 CSS 标准模块由 W3C (World Wide Web Consortium,万维网联盟)编写。W3C 发布了定义 Web 技术(包括 CSS)的文档,这些技术被认为是 Web 标准。W3C 模块在整个开发过程中都会公开发布,直到它们最终作为 W3C 推荐标准发布。分页媒体所需的模块处于这个过程的不同阶段,但大多数仍然处于工作草案阶段。

浏览器开发人员可以在任何时候开始实现这些建议,因为他们知道这些建议可能会在以后发生变化,但在 CSS 规范成为 W3C 推荐标准之前,开发人员没有义务实现所有的 CSS 规范。

值得庆幸的是,浏览器开发人员已经对实现分页媒体工作草案的部分内容产生了兴趣,Chrome、Firefox 和 IE 也部分支持@page 规则。但是,要有效地使用这些浏览器来输出分页内容仍然很困难。

因此,当涉及到从浏览器生成分页内容时,这就是我们今天所处的位置:从浏览器打印网页的规则已经编写好了,甚至标准化了,但我们还不能有效地使用它们

使用哪种浏览器

我们真的希望 paged.js 能在所有浏览器中完美运行,但在编写这些文字时,有些浏览器比其他浏览器更合适。这取决于你想为你的文档添加什么功能(CSS flexbox、连字符……)。但你可能还需要一个考虑 size 属性的浏览器来生成 pdf。这里有一些解释可以帮助你选择。

支持@page

paged.js 的作用类似于腻子脚本(polyfill),但有一件事我们无法处理,需要正确打印:浏览器对 @page { size } 属性的支持。这个属性允许你在生成 PDF 文件时以正确的大小创建它。这些属性仅在某些浏览器中支持:

  • Chromium
  • Google Chrome
  • Brave
  • Opera

我们知道你们中的很多人都使用 Mozilla Firefox,仍然可以使用 Paged.js,但是在生成 PDF 时,你必须手动更改 PDF 的大小(在自定义大小中)。如果需要添加这些,请仔细计算出血和裁剪标志。

支持 CSS 网格

你还必须使用这些浏览器的最新版本,因为我们使用了一些 CSS 网格模块属性来构建页面。自 2017 年年中以来,大多数浏览器都支持 CSS 网格。你可以在这里查看你的浏览器是否支持 CSS 网格: https://caniuse.com/#feat=css-grid

不同浏览器的渲染方式不同

由于浏览器使用的引擎不同,所以结果也不同,例如,Firefox 和 Chrome 对 line-height 的处理方式不同。结果也取决于你使用的操作系统,例如,Chrome 中连字符的处理方式只适用于 Apple OSX。

我们建议在设计和生成 PDF 时使用相同的浏览器和操作系统,以避免不愉快的意外。

转载请注明来源