发布时间:2024 年 10 月 30 日
从 Chrome 131 开始,您可以使用 CSS 在网页打印时向页边空白添加内容。本文介绍了分页媒体的页面模型,以及如何使用此功能改进网页的打印输出。
CSS 包含与分页媒体相关的规范,即 CSS 分页媒体模块和 CSS 为分页媒体生成的内容。它们定义了仅在打印页面(包括打印为 PDF)时使用的功能。有一些用户代理支持此 CSS,可让您通过 HTML 和 CSS 生成图书和其他印刷材料。然而,尽管我们经常需要通过应用打印或创建 PDF 文件,但网络浏览器从来没有为此功能提供很好的支持。
Chrome 和 Firefox 支持 @page
at-rule。通过此规则,您可以定义要打印的页面的大小以及内容周围的外边距。从 Chrome 131 开始,您还可以通过定位相关边距 at-rule,使用生成的内容向边距添加内容。
页面模型
分页媒体中使用的页面模型定义了页面盒,即一张纸。页面框内包含页边距、页边框、页边距,最后是用于显示内容的页面区域。内容在打印时会分割成所需的页数,以便容纳内容。
然后,页边距会拆分为 16 个框,每个框都有对应的 at-rule。
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@left-top
@left-middle
@left-bottom
@right-top
@right-middle
@right-bottom
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
外边距框大小
顶部和底部框的高度以及左侧和右侧框的宽度由使用 @page
设置的外边距大小定义。因此,这些边距的交叉点会形成固定大小的角落边框。不过,每个角落之间的三个框是灵活的。它们的行为方式与使用 flex: auto
的 Flex 布局中的盒子类似,因此它们会伸展以填充空间,但如果您在其中一个中放置一个长文本字符串,而在其他中放置任何内容,则包含文本的那个会增大,而不是换行显示文本。
向页边距框添加内容
如需向边距框添加内容,请使用 CSS 生成的内容,就像使用 ::before
和 ::after
伪元素一样。在这种情况下,请使用与要定位的框相关的 at 规则。以下 CSS 会将“我的图书”文本添加到左下角边线框或右侧页面。它还会设置该文本的样式。
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
除了文本字符串之外,您还可以向边线添加页码计数器。预定义的 page
计数器包含当前页面。以下 CSS 代码会将其添加到右侧页面的右下角和左侧页面的左下角。
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
此外,还有一个始终包含总页数的 pages
计数器。
使用页面边距时的注意事项
如果从浏览器打印,浏览器会在有空间显示时自动添加一些页边内容。即使您添加了内容,系统也会执行此操作。您可以在“打印”对话框中关闭这些自动生成的页眉和页脚。
如果您将网页上的边距设置为 0 或值过小,以至于没有空间放置浏览器标题和页脚,则浏览器标题和页脚将不会显示。
由于 Chromium 中的默认页面布局概念,如果打印文档的第一页没有足够的空间来显示自动内容,则会导致浏览器内容无法在后续页面上显示,即使后续页面有足够的空间也是如此。
分页媒体的未来发展
分页媒体规范包含其他一些功能,详见使用 CSS 设计适合打印的页面一文。如果您有以下任何功能的用例,请将其添加到关联的 bug 中。
设置字符串
图书通常会在页边距中打印当前章节标题。此标题会随着您浏览图书而发生变化,因此无法硬编码到 CSS 中。借助 string-set
属性,您可以从 HTML 中设置一个值,以便在生成的内容中使用。以下 CSS 假定章节标题已标记为 <h1>
。它会获取每个 <h1>
的内容,并将其用于右侧页面的右上角边距。当它到达下一个 <h1>
时,系统会更新该点之后的边距值。
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
string-set
和 string()
的 Chromium 错误。
交叉引用
文档打印后,对其他页面的引用通常使用页码来表示。这些交叉引用可以使用 target-counter
创建。应用于链接后,该链接会跳转到网络上的参考文档,并且在打印时会显示页码。
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
脚注
脚注也是分页媒体规范的功能之一。在 HTML 中,使用类来标识应作为脚注的文本,例如:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
然后,使用 float
的 footnote
值将此文本转换为脚注。当文档打印时,脚注会从段落中移除,并显示为脚注。
.fn {
float: footnote;
}