13 页面介质

13.1 页面媒介简介

    页面媒介（如，纸张，透明胶片，显示在计算机屏幕上的页面等）与连续媒介不同，主要是文档的内容被分割为一个或多个独立的页。为了处理分页，CSS2扩展了可视化格式模型：

1. 页框扩展了包含框模型，允许作者指定页面的大小，它的边距等等。
2. 页面模型扩展了可视化格式模型，以加入对分页的考虑。

    CSS2的页面模型规定一个文档如何在一个长方形区域——页框——内格式化，该区域宽度和高度是固定的。页框并不一定相应于文档最终要渲染在其上的实际的页面（纸张，透明胶片，屏幕等）。CSS页面模型指定在页框内的格式化，但是需要用户端将页框转换为页面。可能的转换包括：

• 将一个页框转换为一个页面（如，单面打印）。
• 将两个页框转换为同一页面的两面（如，双面打印）。
• 将N个（小）页框转换到一个页面（称为"n-up"）。
• 将一个（大）页框转换到N x M个页面（称为“分块”）。
• 创建签名。一个签名是一组页打印到一个页面上，当给页面如同一本书那样折叠或裁剪时，该组页以正确的顺序出现。
• 将一个文档打印到若干个输出托盘。
• 将一个文档输出为一个文件。

    尽管CSS2没有指定用户端应该如何将页框转换为页面，但是它确实包含特定的机制告诉用户端目的页面的尺寸和方向。

13.2 页框：@page规则

    页框是一个长方形的范围，并包含两个区域：

• 页面区域。页面区域包括布置在该页面上的框。页面区域的边作为分页之间发生的布局的初始包含块。
• 边距区域，包围了页面区域。

    作者在一个@page规则中指定页框的尺寸，方向，边距等信息。一个@page规则包含关键字"@page"，一个页面选择子（其后可选地跟随一个页面伪类，中间没有空格），和一个声明块（可以说是在页面内容中）。

    页面选择子指定了声明所适用的页面。CSS2中，页面选择子可以指定第一页，所有左页，所有右页或有一个特定名字的页。

    页框的尺寸由'size'属性来设置。页面区域的尺寸是页框的尺寸减去边距区域的尺寸。

@page { size 8.5in 11in; margin: 2cm }

13.2.1 页边距

    边距属性（'margin-top'，'margin-right'，'margin-bottom'，'margin-left'和'margin'）适用于页面内容。下图显示了页面，页框和页边距之间的关系：

    页面区域框的顶、底边距的计算值为'0'。

    页面内容中没有字体的概念，因此不允许使用'em'和'ex'作为单位。边距属性的百分比值相对于页框的尺寸；对于左右边距，它们基于页框的宽度，对于顶底边距，它们基于页框的高度。其它和相应的CSS2属性相关联的单位是允许使用的。

    由于负的边距值（或者是页框的或者是元素的），或绝对定位的缘故，内容可能最后出现在页框之外，但是这样的内容会被“剪切”掉——或者由用户端，打印机，或者，最后由裁纸机来完成。

13.2.2 页面尺寸：'size'属性

    该属性指定了一个页框的尺寸和方向。

    页框的尺寸可以是“绝对尺寸”（固定尺寸）或“相对尺寸”（可放缩的，即，适应可用的页面尺寸）。相对页框允许用户端放缩一个文档以最佳利用目标尺寸。

    'size'属性取三个值之一将创建一个相对尺寸的页框：

auto

页框将根据目标页面的尺寸和方向设置。

landscape

超越目标的方向。页框和目标的尺寸一样，较长的边为水平边。

portrait

超越目标的方向。页框和目标的尺寸一样，较短的边为水平边。

@page {
  size: auto;   /* auto is the initial value */
  margin: 10%;
}

    'size'属性的长度值创建一个绝对页框。如果只有一个长度值被指定，它同时设置了该页框宽度和高度（即，这个框是一个正方形）。由于页框是初始包含块，不允许为'size'属性指定百分比值。

@page {
  size: 8.5in 11in;  /* width height */
}

    用户端可以允许用户控制页框到页面的转换（例如，旋转一个被打印的绝对页框）。

页框和目标页面不匹配时的渲染

    如果一个页框不匹配目标页面的尺寸，用户端可以选择：

• 将页框旋转90度，如果这样可以使页框和页面匹配。
• 放缩页面使之与目标匹配。

    在这样做之前，用户端应该询问用户。

页面上页框的定位

    如果页框小于目标尺寸，用户端可以自由地在页面上放置页框。不过，推荐的方法是将页框放置在页面的中央，因为这样做会对齐双面的页面，也避免了错误丢失那些打印在靠近页面边的信息。

13.2.3 裁剪标记：'marks'属性

    在高质量打印中，经常在页框之外加入标记。该属性指定了十字线或裁剪标记或两者是否应该在页框边的外面得到渲染。

    裁剪标记标明页面应该在哪里被裁剪。十字线标记（也称为注册标记）用来对齐各个页面。

    标记只在绝对页框中可见（参见'size'属性）。相对页框中，页框对齐目标页面而标记将在可打印的区域之外。

    十字线标记的尺寸，样式和位置取决于用户端。

13.2.4 左页，右页及第一页

    打印双面文档时，左页和右页的页框应该不同。通过可能在页面内容中定义的两个CSS伪类可以达到这一要求。

    所有的页都自动地被用户端归为:left或:right伪类。

@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取决于该文档的主要的书写方向，超出了本文档的讨论范围。不过，要强迫第一页为:left或:right，作者可以在第一个生成的框（如，在HTML中，对于BODY元素指定该设置）之前插入一个分页。

    在:left（或:right）@page规则中指定的属性将超越没有指定伪类的@page规则中指定的属性。在:first @page规则中指定的属性超越那些在:left（或:right）@page规则中指定的属性。

13.2.5 页框外的内容

    在页面模型中格式化内容时，某些内容可能最终出现在页框之外。例如，一个元素的'white-space'属性设置为'pre'，它可能产生一个比页框宽的框。同样的，如果框是绝对定位的，它们最后也可能出现在“不合适”的位置。例如，图形可能放置在页框边上，或者是在页框之下100,000英寸的地方。

    这些元素如何确切地格式化的规范超出了本文档的范围。不过，我们推荐作者和用户端在处理页框外的内容时，遵循如下的一般规则：

• 应该允许内容在页框稍微外边一点的地方出现，而允许页面“撑出”。
• 用户端应该避免为了遵守元素的定位而产生大量的空白页框（例如，你肯定不想打印100张空白页）。不过要注意，为了遵守'page-break-before'和'page-break-after'的'left'和'right'值，少量的空白页框还是必须产生的。
• 作者不应该将元素放在一个不合适的位置而避免渲染它们。相反的：
  • 要整个抑制框的产生，将'display'属性设置为'none'。
  • 要使一个框不可见，使用'visibility'属性。
• 拥护端可以用几种方法处理定位在页框之外的框，包括忽视它们或在文档结尾处为它们创建页框。

13.3 分页

    以下各节讨论了CSS2中的页面格式化。有五个属性规定了用户端在哪里可以或应该分页，在哪一页（左页或右页）上接续后继的内容。每一个分页终止了当前页框的布局，并把文档树中剩余的部分在一个新的页框中进行布局。

13.3.1 在元素前/后分页：'page-break-before'，'page-break-after'，'page-break-inside'

    这些属性取值的含义如下：

auto

不强迫也不禁止在生成框之前（之后，之间）分页。

always

总是强迫在生成框之前（之后）分页。

avoid

避免在生成框之前（之后，之间）分页。

left

强迫在生成框之前（之后）分一个或两个页，使下一页成为一个左页。

right

强迫在生成框之前（之后）分一个或两个页，使下一页成为一个右页。

    一个可能的分页位置通常受到它父元素的'page-break-inside'属性，它前继元素的'page-break-after'属性，它后续元素的'page-break-before'属性的影响。如果这些属性值不为'auto'，则'always'，'left'和'right'将优先于'avoid'。参见允许的分页一节，以了解这些属性如何强迫和抑制分页的确切的规则。

13.3.2 使用命名的页：'page'

    'page'属性可以用来指定一个元素应该显示在其上的特定的页面类型。

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

    'page'属性工作情况如下：如果一个块框包含行内内容的'page'属性不同于包含行内内容的前继块框，则在它们之间插入一到两个分页，分页后的框渲染在某命名类型的页框中。参见“强制的分页”。

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}

<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 元素内的分割：'orphans'，'widows'

    'orphans'属性规定了一个段落中必须遗留在一个页面底部的行数的最小数目。'widows'属性规定了一个段落中必须遗留在一个页面顶部的行数的最小数目。如何使用它们的例子见后。

    段落格式化的信息，请参见线框一节。

13.3.4 允许的分页

    常规流向中，分页可以出现在如下这些地方：

1. 块框的垂直边距之间。如果在这里发生分页，那么相关的'margin-top'和'margin-bottom'的计算值都设置为'0'。
2. 在一个块框中的线框之间。

    这些分页要基于如下规则：

• 规则A：允许分页在(1)处的条件是：所有在该边距会合的元素生成框的'page-break-after'和'page-break-before'属性允许如此，即它们中至少有一个设置了'always'，'left'或'right'，或者它们都是'auto'。
• 规则B：然而，如果它们都是'auto'且所有这些元素的最近的共同前辈设置了'page-break-inside'为'avoid'，则该处的分页将被禁止。
• 规则C：允许分页在(2)处的条件是：分页和包含块框开始之间的线框数量等于或大于'orphans'值，且分页和框结尾之间的线框的数量等于或大于'widows'值。
• 规则D：另外，在(2)处的分页只有在'page-break-inside'属性设置为'auto'时才被允许。

    如果上述规则无法提供足够的分页点来防止内容溢出页面框，规则B和规则D将被忽略以寻找额外的分页点。

    如果还不能找到足够的分页点，规则A和规则C将被忽略，以进一步找出更多的分页点。

    分页不可以发生在绝对定位的框中。

13.3.5 强制的分页

    分页必须出现在(1)处，如果在该边距会合的所有的元素生成的框的'page-break-after'和'page-break-before'属性中，至少有一个设置为'always'，'left'或'right'。

    分页必须出现在(1)处，如果该边距之上的最后一个线框和其下的第一个线框具有不同的'page'值。

13.3.6 “最佳”分页

    CSS2并不定义必须使用哪些允许的分页；CSS2并不禁止用户端在任何一个可能的点分页，也不禁止它根本不分页。但是CSS2确实推荐用户端遵循如下考虑（由于它们有时互相矛盾，所有称为考虑而不是规则）：

• 尽可能少地分页。
• 所有不以强制分页结束的页面看上去的高度要差不多。
• 避免在有边框的块内分页。
• 避免在表格内分页。
• 避免在浮动元素内分页。

13.4 页面内容的层叠

    页面内容中的声明遵循层叠，就如同一般的CSS2声明那样。

@page {
  margin-left: 3cm;
}

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