13 分页媒体

内容

注意:本规范的若干章节已被其他规范更新。请参阅最新 CSS Snapshot 中的 “层叠样式表 (CSS) — 官方定义”,其中列出了规范以及它们取代的章节。

CSS 工作组也在开发 CSS 2 级修订版 2(CSS 2.2)

13.1 分页媒体简介

分页媒体(例如纸张、胶片、在计算机屏幕上显示的页面等)与连续媒体的区别在于文档的内容被分割成一个或多个离散页面。为了处理页面,CSS 2.1 描述了如何在页面盒子上设置页面边距,以及如何声明页面分割

用户代理负责将文档的页面盒子转移到实际的纸张上,文档最终将在其上渲染(纸张、胶片、屏幕等)。页面盒子与纸张之间通常是一对一的关系,但并非总是如此。转移的可能性包括

13.2 页面盒子:@page 规则

The 页面盒子 is a rectangular region that contains two areas

在 CSS 2.1 中无法指定页面盒子的大小。

作者可以在 @page 规则中指定页面盒子的边距。@page 规则由关键字 "@page"、可选的页面选择器以及包含声明和 @规则 的块组成。允许在 @page 标记与页面选择器之间以及页面选择器与块之间出现注释和空白,但它们是可选的。@page 规则中的声明被称为位于 页面上下文 中。

注:CSS 2 级没有可以出现在 @page 内的 @规则,但这些 @规则预计将在第 3 级中定义。

页面选择器 指定声明适用于哪些页面。在 CSS 2.1 中,页面选择器可以指定首页、所有左页或所有右页。

在 @page 内处理格式错误的声明、格式错误的语句以及无效的 @规则 的规则如 第 4.2 节 所定义,但增加了以下内容:当 UA 期待声明或 @规则 的开始(即 IDENT 标记或 ATKEYWORD 标记)却遭遇意外标记时,该标记被视为格式错误声明的第一个标记。也就是说,在这种情况下使用格式错误声明的规则,而不是格式错误语句的规则,来决定忽略哪些标记。

13.2.1 页面边距

在 CSS 2.1 中,只有 外边距属性'margin-top''margin-right''margin-bottom''margin-left'以及'margin')适用于页面上下文。下图展示了纸张、页面盒子和页面边距之间的关系

纸张、页面盒子、边距和页面区域的示意图   [D]

示例

下面是一个简单示例,为所有页面设置所有页面边距

@page {
  margin: 3cm;
}

页面上下文没有字体的概念,因此不允许使用 'em' 和 'ex' 单位。外边距属性的百分比值相对于页面盒子的尺寸;左、右外边距相对于页面盒子的宽度,而上、下外边距相对于页面盒子的高度。其他与相应 CSS 2.1 属性关联的单位均可使用。

由于负的外边距值(无论是在页面盒子还是在元素上)或 绝对定位,内容可能会出现在页面盒子之外,但这些内容可能会被“裁剪”——由用户代理、打印机或最终的裁纸机裁剪。

13.2.2 页面选择器:选择左页、右页和首页

在双面打印文档时,左页和右页的页面盒子可能不同。这可以通过两种可用于页面选择器的 CSS 伪类来表达。

所有页面都会被用户代理自动归类为 :left:right 伪类之一。文档的第一页是 :left 还是 :right 取决于根元素的主要书写方向。例如,具有从左到右主要书写方向的文档的第一页为 :right 页面,而具有从右到左主要书写方向的文档的第一页为 :left 页面。若要明确强制文档在左页或右页开始打印,作者可以在第一个生成的盒子之前 插入页面分割

示例

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

如果为左页和右页提供了不同的声明,用户代理必须遵守这些声明,即使用户代理并未将页面盒子转移到左、右纸张上(例如仅支持单面打印的打印机)。

作者也可以使用 :first 伪类为文档的首页指定样式

示例

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

在 :left 或 :right @page 规则中指定的属性会覆盖未指定伪类的 @page 规则中的属性。而在 :first @page 规则中指定的属性则会覆盖 :left 或 :right @page 规则中的属性。

如果在第一个生成的盒子之前出现强制分割,在 CSS 2.1 中未定义 ':first' 是适用于分割前的空白页还是分割后的页面。

左页、右页和首页的外边距声明可能导致不同的页面区域宽度。为简化实现,用户代理可以在左、右和首页使用统一的页面区域宽度。在这种情况下,应使用首页的页面区域宽度。

13.2.3 页面盒子外的内容

在页面模型中排版内容时,某些内容可能会落在当前页面盒子之外。例如,'white-space' 属性值为 'pre' 的元素可能会生成宽于页面盒子的盒子。另一个例子是,当盒子被绝对或相对定位时,它们可能出现在“不便”的位置。例如,图像可能被放置在页面盒子的边缘或距离页面盒子 100,000 米的地方。

此类元素的精确排版超出本规范的范围。但我们建议作者和用户代理遵循以下关于页面盒子外内容的一般原则

13.3 页面分割

本节描述 CSS 2.1 中的页面分割。五个属性指示用户代理可以或应该在何处分页,以及后续内容应在左页还是右页继续。每一次页面分割结束当前页面盒子的布局,并导致文档树的其余部分在新的页面盒子中布局。

13.3.1 分页属性'page-break-before''page-break-after''page-break-inside'

'page-break-before'
  auto | always | avoid | left | right | inherit
初始值  auto
应用于  块级元素(但参见正文)
可继承  
百分比  不适用
媒体  可视, 分页
计算值  按指定值
'page-break-after'
  auto | always | avoid | left | right | inherit
初始值  auto
应用于  块级元素(但参见正文)
可继承  
百分比  不适用
媒体  可视, 分页
计算值  按指定值
'page-break-inside'
  avoid | auto | inherit
初始值  auto
应用于  块级元素(但参见正文)
可继承  
百分比  不适用
媒体  可视, 分页
计算值  按指定值

这些属性的值具有以下含义:

auto
既不强制也不禁止在生成的框之前(之后、内部)进行分页。
always
始终强制在生成的框之前(之后)进行分页。
avoid
避免在生成的框之前(之后、内部)进行分页。
left
在生成的盒子之前(之后)强制一次或两次页面分割,使下一页按照左页布局。
right
在生成的盒子之前(之后)强制一次或两次页面分割,使下一页按照右页布局。

符合规范的用户代理可以将值 'left' 和 'right' 解释为 'always'。

潜在的页面分割位置通常受父元素的'page-break-inside'属性、前面元素的'page-break-after'属性以及后面元素的'page-break-before'属性的影响。当这些属性的值不是 'auto' 时,'always'、'left'、'right' 的值优先于 'avoid'。

用户代理必须在根元素的正常流中对块级元素应用这些属性。用户代理也可以对其他元素(例如 'table-row' 元素)应用这些属性。

当页面分割切断一个盒子时,盒子的外边距、边框和内边距在切断处没有可视效果。

13.3.2 元素内部的分割'orphans''widows'

'orphans'
  <integer> | inherit
初始值  2
应用于  块容器元素
可继承  
百分比  不适用
媒体  可视, 分页
计算值  按指定值
'widows'
  <integer> | inherit
初始值  2
应用于  块容器元素
可继承  
百分比  不适用
媒体  可视, 分页
计算值  按指定值

'orphans' 属性指定块容器在页面底部必须保留的最少行数。'widows' 属性指定块容器在页面顶部必须保留的最少行数。以下给出它们用于控制页面分割的示例。

仅允许正值。

有关段落格式的信息,请参阅行盒子章节。

13.3.3 允许的页面分割

在正常流中,页面分割可以出现在以下位置

  1. 在块级盒子之间的垂直外边距中。当此处出现非强制的页面分割时,相关'margin-top''margin-bottom'属性的已使用值被设为 '0'。当此处出现强制的页面分割时,相关'margin-bottom'属性的已使用值被设为 '0';相关'margin-top'的已使用值可以设为 '0' 或保留原值。
  2. 块容器盒子内部的行盒子之间。
  3. 在块容器盒子的内容边缘与其子内容的外边缘之间(块级子元素的外边距边缘或行盒子边缘(对于内联级子元素)),如果它们之间存在(非零)间隙。

注:预计 CSS3 将规定在强制页面分割后,相关的 'margin-top' 仍然适用(即不设为 '0')。

这些分割受以下规则约束

如果上述方法仍不足以提供足够的断点以防止内容溢出页面盒子,则会依次放弃规则 A、B 和 D,以寻找额外的断点。

如果仍然没有足够的断点,则也放弃规则 C,以寻找更多断点。

13.3.4 强制页面分割

如果在 (1) 处的所有生成盒子相交元素的'page-break-after''page-break-before'属性中至少有一个值为 'always'、'left' 或 'right',则必须在 (1) 处进行页面分割。

13.3.5 “最佳”页面分割

CSS 2.1 规定在一组允许的页面分割中必须使用哪一个;CSS 2.1 亦不禁止用户代理在每个可能的断点进行分割,或完全不进行分割。但 CSS 2.1 建议用户代理遵循以下启发式(尽管它们有时会相互矛盾):

示例

例如,假设样式表包含 'orphans: 4'、'widows: 2',且当前页面底部还有 20 行(行盒子)可用。

现在假设 'orphans' 为 '10','widows' 为 '20',且当前页面底部仅有 8 行可用。

13.4 页面上下文中的层叠

页面上下文中的声明遵循层叠,就像普通的 CSS 声明一样。

示例

考虑以下示例:

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

由于伪类选择器的更高特异性,左页的左外边距将为 '4cm',而所有其他页面(即右页)的左外边距为 '3cm'。