13 分页媒体

内容

13.1 分页媒体简介

分页媒体(例如,纸张、透明片、在计算机屏幕上显示的页面等)与连续媒体不同,因为文档的内容被分成一个或多个离散的页面。为了处理页面,CSS 2.2 描述了如何在页面框上设置页面边距,以及如何声明分页符

用户代理负责将文档的页面框转移到文档最终呈现的实际纸张上(纸张、透明片、屏幕等)。页面框与纸张之间通常是1对1的关系,但并非总是如此。转移的可能性包括:

13.2 页面框:@page 规则

页面框是一个包含两个区域的矩形区域:

在CSS 2.2中无法指定页面框的大小。

作者可以在@page规则中指定页面框的边距。@page规则由关键字“@page”组成,后跟一个可选的页面选择器,再后跟一个包含声明和规则的块。在@page标记与页面选择器之间以及页面选择器与块之间允许但不强制出现注释和空白。@page规则中的声明被称为处于页面上下文中。

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

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

13.2.1 页面边距

在CSS 2.2中,只有边距属性 ('margin-top''margin-right''margin-bottom''margin-left''margin') 适用于页面上下文中。下图显示了纸张、页面框和页面边距之间的关系:

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

示例:

这是一个在所有页面上设置所有页面边距的简单示例:

    @page {
      margin: 3cm;
    }
    

页面上下文没有字体的概念,因此不允许使用'em'和'ex'单位。边距属性上的百分比值是相对于页面框的尺寸而言的;对于左右边距,它们是相对于页面框的宽度,而对于上下边距,它们是相对于页面框的高度。所有与相应CSS 2.2属性相关的其他单位都是允许的。

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

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 } /* 所有边距设置为2cm */

@page :first {
  margin-top: 10cm    /* 第一页的上边距10cm */
}

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

如果在第一个生成的框之前发生了强制分页,CSS 2.2 并未定义 ':first' 是适用于分页符之前的空白页还是分页符之后的页面。

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

13.2.3 页面框外的内容

在页面模型中格式化内容时,某些内容可能会出现在当前页面框之外。例如,'white-space'属性值为 'pre' 的元素可能会生成一个比页面框更宽的框。另一个例子是,当框是绝对定位或相对定位时,它们可能会出现在“非便捷”位置。例如,图像可能会放置在页面框的边缘或页面框下方 100,000 米处。

此类元素的确切格式化不在本规范的范围内。然而,我们建议作者和用户代理在处理页面框外的内容时遵循以下一般原则:

13.3 分页

本节描述了 CSS 2.2 中的分页。五个属性指示用户代理可以或应该在何处分页,以及后续内容应在哪一页(左页或右页)继续。每次分页都会在当前的页面框中结束布局,并使文档树中的剩余部分在新的页面框中布局。

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

名称: page-break-before
值: auto | always | avoid | left | right | inherit
初始值: auto
适用对象: 块级元素(但请参见正文)
继承:
百分比: N/A
媒体: 视觉分页
计算值: 如指定
名称: page-break-after
值: auto | always | avoid | left | right | inherit
初始值: auto
适用对象: 块级元素(但请参见正文)
继承:
百分比: N/A
媒体: 视觉分页
计算值: 如指定
名称: page-break-inside
值: avoid | auto | inherit
初始值: auto
适用对象: 块级元素(但请参见正文)
继承:
百分比: N/A
媒体: 视觉分页
计算值: 如指定

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

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 元素内部的分页'孤行''寡行'

名称: 孤行
值: <整数> | 继承
初始值: 2
适用对象: 块级容器元素
继承:
百分比: N/A
媒体: 视觉分页
计算值: 如指定
名称: 寡行
值: <整数> | 继承
初始值: 2
适用对象: 块级容器元素
继承:
百分比: N/A
媒体: 视觉分页
计算值: 如指定

'孤行'属性指定在页面底部必须保留在块容器中的最少行数。'寡行'属性指定在页面顶部必须保留在块容器中的最少行数。以下是如何使用它们来控制分页的示例。

只允许正值。

有关段落格式的信息,请参阅行框部分。

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 强制分页

如果在生成在此边距相遇的框的所有元素的'page-break-after''page-break-before'属性中,有至少一个值为'always'、'left'或'right',则在(1)处必须发生分页。

13.3.5 “最佳”分页

CSS 2.2定义在一组允许的分页中必须使用哪个;CSS 2.2不禁止用户代理在每个可能的分页点分页,或根本不分页。但CSS 2.2建议用户代理遵循以下启发式规则(尽管承认这些规则有时是矛盾的):

示例:

假设样式表包含'orphans: 4','widows: 2',并且当前页面底部有20行(行框)可用:

现在假设'orphans'的值为'10','widows'的值为'20',并且当前页面底部有8行可用:

13.4 页面上下文中的层叠

页面上下文中的声明与普通的CSS声明一样遵循层叠规则。

示例:

考虑以下示例:

@page {
  margin-left: 3cm;
}

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

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