CSS 分页媒体模块第 3 级

4.3. @page 规则语法

@page 规则根据以下语法进行解析，外加下方注明的附加规则

@page = @page <page-selector-list>? { <declaration-rule-list> }
<page-selector-list> = <page-selector>#
<page-selector> = [ <ident-token>? <pseudo-page>* ]!
<pseudo-page> = ':' [ left | right | first | blank ]

/* Margin rules */
@top-left-corner = @top-left-corner { <declaration-list> };
@top-left = @top-left { <declaration-list> };
@top-center = @top-center { <declaration-list> };
@top-right = @top-right { <declaration-list> };
@top-right-corner = @top-right-corner { <declaration-list> };
@bottom-left-corner = @bottom-left-corner { <declaration-list> };
@bottom-left = @bottom-left { <declaration-list> };
@bottom-center = @bottom-center { <declaration-list> };
@bottom-right = @bottom-right { <declaration-list> };
@bottom-right-corner = @bottom-right-corner { <declaration-list> };
@left-top = @left-top { <declaration-list> };
@left-middle = @left-middle { <declaration-list> };
@left-bottom = @left-bottom { <declaration-list> };
@right-top = @right-top { <declaration-list> };
@right-middle = @right-middle { <declaration-list> };
@right-bottom = @right-bottom { <declaration-list> };

此外，适用以下规则

• <page-selector> 或 <pseudo-page> 中的生成项之间不允许有空格（类似于 <compound-selector> 的规则）。

• @page 规则只能包含页面属性和边距 @规则。

• 边距 @规则只能包含页面边距属性。

@page {
 @top-left { ... /* document name */ }
 @bottom-center { ... /* page number */}
}
@page :left { @left-middle { ... /* page number in left margin */ }}
@page :right{ @right-middle { ... /* page number in right margins of right pages */}}

@page :left { @bottom-left-corner { ... /* left page numbers */ }}
@page :right { @bottom-right-corner { ... /* right page numbers */ }}
@page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
@bottom-right-corner { ... /* empty footer */ } }

4.4. 页面上下文中的层叠

页面和边距上下文中的声明像元素的样式规则中的声明一样进行层叠。

页面选择器的特异性的计算方式类似于选择器模块中定义的计算方式

• 计算页面类型名称的数量 (= f)考虑到页面选择器的语法，f 只能为 0 或 1。
• 计算 ':first' 或 ':blank' 伪类的数量 (= g)
• 计算 ':left' 或 ':right' 伪类的数量 (= h)

注意：允许重复出现相同的伪类，并且会增加特异性。

由于存储限制，实现可能对 f、g 或 h 的大小有限制。如果是这样，高于限制的值必须截断为该限制，而不会溢出。

通过按顺序比较三个分量 (f, g, h) 来比较特异性：具有较大 f 值的特异性更具体；如果两个 f 值相等，则比较两个 g 值，依此类推。如果所有值都相等，则两个特异性相等。

@page { } /* specificity = (0,0,0) */
@page :left { } /* specificity = (0,0,1) */
@page :first { } /* specificity = (0,1,0) */
@page :blank:left { } /* specificity = (0,1,1) */
@page artsy { } /* specificity = (1,0,0) */
@page artsy:left { } /* specificity = (1,0,1) */
@page artsy:first { } /* specificity = (1,1,0) */

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

@page {
  margin-left: 3cm;
}

@page { margin: 25mm;}
@page { font-size: 14pt;}

5. 页面边距框

页面边距框是页面边距内的框，像伪元素一样，可以包含生成的内容。

页面边距框可用于创建页面页眉和页脚，这些是页面中预留给页码或文档标题等补充信息的区域。

页面边距框相对于页面区域进行定位，并且与页面方向无关，例如在纵向和横向中，顶部页面边距框都在页面区域上方。各种页面边距框在下图中定义和说明

表 1 页面边距框定义

盒 (Box)	描述	位置
top-left-corner	由页面框的顶部和左侧边距的交集定义的固定尺寸框
top-left	填充顶部页面边距，位于 top-left-corner 和 top-center 页面边距框之间的可变宽度框
top-center	水平居中于页面左右边框边缘之间，并填充顶部页面边距，位于 top-left 和 top-right 页面边距框之间的可变宽度框
top-right	填充顶部页面边距，位于 top-center 和 top-right-corner 页面边距框之间的可变宽度框
top-right-corner	由页面框的顶部和右侧边距的交集定义的固定尺寸框
left-top	填充左侧页面边距，位于 top-left-corner 和 left-middle 页面边距框之间的可变高度框
left-middle	垂直居中于页面顶部和底部边框边缘之间，并填充左侧页面边距，位于 left-top 和 left-bottom 页面边距框之间的可变高度框
left-bottom	填充左侧页面边距，位于 left-middle 和 bottom-left-corner 页面边距框之间的可变高度框
right-top	填充右侧页面边距，位于 top-right-corner 和 right-middle 页面边距框之间的可变高度框
right-middle	垂直居中于页面顶部和底部边框边缘之间，并填充右侧页面边距，位于 right-top 和 right-bottom 页面边距框之间的可变高度框
right-bottom	填充右侧页面边距，位于 right-middle 和 bottom-right-corner 页面边距框之间的可变高度框
bottom-left-corner	由页面框的底部和左侧边距的交集定义的固定尺寸框
bottom-left	填充底部页面边距，位于 bottom-left-corner 和 bottom-center 页面边距框之间的可变宽度框
bottom-center	水平居中于页面左右边框边缘之间，并填充底部页面边距，位于 bottom-left 和 bottom-right 页面边距框之间的可变宽度框
bottom-right	填充底部页面边距，位于 bottom-center 和 bottom-right-corner 页面边距框之间的可变宽度框
bottom-right-corner	由页面框的底部和右侧边距的交集定义的固定尺寸框

5.1. 页面边距框的 @规则

页面边距框由页面上下文内的边距 @规则创建。作者应将这些规则放在页面上下文中的任何声明之后，因为旧版客户端可能无法正确处理边距 @规则之后的声明。

一个边距 @规则是一个@规则，它标识了页面边距框（例如 @top-left）以及一个描述符块（称为边距上下文）。

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

5.2. 填充页面边距框

与 :before 和 :after 伪元素一样，在页面边距框上指定的 content: normal 计算为 none。当且仅当其 content 属性的计算值不是 none 时，页面边距框才会被生成。否则，不会生成任何框，就像具有 display: none 的元素一样。

display 属性不适用于页面边距框。

5.3. 计算页面边距框尺寸

每个页面边距框的宽度和高度由以下规则确定。这些规则定义了相当于 CSS2.1 第 10.3 和 10.6 节中针对页面边距框的内容。

应用 min-height、max-height、min-width 和 max-width [CSS2] 的规则确实适用于页面边距框，如果指定的 width 或 height 导致的尺寸违反其约束，则可能意味着需要重新计算宽度、高度和/或边距。如果用户代理不支持 min-height 或 min-width 属性，则必须表现得好像 min-height 和 min-width 始终为零。

5.3.1. 页面边距框布局术语

除了 CSS2.1 [CSS2] 中的框模型定义以及 CSS Sizing [CSS-SIZING-3] 中的尺寸术语外，还为后续页面边距框计算定义了以下术语

可用宽度

页面左边框宽度、左内边距、页面区域宽度、右内边距和右边框宽度之和。换句话说，它是页面框左右边框边缘之间的距离。该量用于计算顶部和底部页面边距框的尺寸。

可用高度

页面顶部边框宽度、顶部内边距、页面区域高度、底部内边距和底部边框宽度之和。换句话说，它是页面框上下边框边缘之间的距离。该量用于计算左侧和右侧页面边距框的尺寸。

外宽度

外边缘的宽度，如 [CSS-BOX-3] 中定义。

最小内容宽度

最小内容块大小或最小内容行内大小中较小的一项为物理宽度。

最大内容宽度

最大内容块大小或最大内容行内大小中较小的一项为物理宽度。

外最小宽度

与外宽度类似，不同之处在于当计算出的 width 为 auto 时，使用最小内容宽度。

外最大宽度

与外宽度类似，不同之处在于当计算出的 width 为 auto 时，使用最大内容宽度。

页面边距框的包含块取决于其位置

对于角落页面边距框，它是两个页面边距在该角落相交所定义的矩形。

对于所有其他页面边距框，包含块是由封装页面边距减去相邻角落页面边距框的包含块所形成的矩形。这意味着该包含块的尺寸在其中一个维度上由使用的页面边距给出，在另一个维度上由可用宽度（对于顶部和底部页面边距框）或可用高度（对于左侧和右侧页面边距框）给出。

5.3.2. 页面边距框可变尺寸计算规则

以下规则适用于 @top-left、@top-center 和 @top-right 页面边距框，在本节中分别称为 A、B 和 C。

5.3.2.1. 边距

如果这三个框中任何一个的 margin-left 或 margin-right 属性计算为 auto，则使用值为零。

5.3.2.2. 解析 auto 宽度

以下算法确定每个框的使用宽度。为此，未生成的框假定 width 和 外宽度 均为零。

注意：高层目标（按优先级顺序）是：如果中间框 (B) 被生成则使其居中；尽量减少溢出和重叠；并将空间按内容量比例分配。

如果中间框 (B) 未被生成，则按以下方式将可用宽度分配给 A 和 C

• 如果只有一个框具有 'width: auto'，则其使用宽度解析为使得 外宽度 之和等于 可用宽度。
• 如果 A 和 C 都具有 'width: auto'，则按以下方式将空间分配给每个框
• 如果外最大内容宽度之和小于可用宽度，则称该差值为 弹性空间 (flex space)。计算每个框的 弹性因子 (flex factor) 使其与其外最大内容宽度成正比，并将其使用外宽度设置为：最大内容宽度 + 弹性空间 × 弹性因子 ÷ ∑弹性因子
• 否则，如果外最小内容宽度之和小于可用宽度，则称该差值为 弹性空间，计算每个框的 弹性因子 使其与其最大内容宽度减去最小内容宽度成正比，并将其使用外宽度设置为：最小内容宽度 + 弹性空间 × 弹性因子 ÷ ∑弹性因子
• 否则，按上述情况计算其外尺寸，但设置每个框的 弹性因子 使其与其外最小内容宽度成正比。在每种情况下，如果两个 弹性因子 之和为零，则均假定为 1。

如果中间框 (B) 被生成，则按以下方式确定 A、B 和 C 的 auto 宽度

1. 首先，解析中间框 (B) 的任何 auto 宽度：假设有两个框，B 和 AC，其中 AC 的每个维度都是 A 和 C 中最大值的两倍。（这保留了 B 的居中。）按上述针对 A 和 C 的描述，将空间分配给这两个框（B 和虚构的 AC）。
2. 然后，通过将该框的外宽度设置为 (可用宽度 − B 的使用外宽度) ÷ 2，解析侧框 (A 和 C) 的任何 auto 宽度。

5.3.2.3. 处理 min-width 和 max-width

min-width 和 max-width 属性 [CSS2] 像在普通元素上一样应用于可变维度中的页面边距框，只是同一侧的三个框被视为一个整体。

更准确地说

1. 计算初步的使用宽度（不带 min-width 和 max-width），遵循 § 5.3.2.2 解析 auto 宽度 下的规则。
2. 如果这三个框中任何一个的初步使用宽度大于 max-width，则再次应用上述规则，但这次使用 max-width 的计算值作为 width 的计算值。
3. 如果这三个框中任何一个的结果宽度小于 min-width，则再次应用上述规则，但这次使用 min-width 的值作为 width 的计算值。

5.3.2.4. 定位

一旦确定了框的尺寸，它们的定位如下

• A 的左外边缘与包含块的左边缘齐平
• B 的外区域居中于包含块中。
• C 的右外边缘与包含块的右边缘齐平。

5.3.2.5. 其他侧面的框

@bottom-left、@bottom-center 和 @bottom-right 页面边距框的使用值由与 @top-left、@top-center 和 @top-right 相同的规则建立。

@left-top、@left-middle 和 @left-bottom 框的使用值由相同的规则建立，只是将“宽度”替换为“高度”，“左”替换为“上”，“右”替换为“下”，“中心”替换为“中间”。

@right-top、@right-middle 和 @right-bottom 页面边距框的使用值由与 @left-top、@left-middle 和 @left-bottom 相同的规则建立。

5.3.3. 页面边距框固定尺寸计算规则

以下规则用于计算每个 @top-left-corner、@top-left、@top-center、@top-right 和 @top-right-corner 页面边距框的 height、margin-top 和 margin-bottom 属性的使用值

1. 在边距框属性的使用值之间必须满足以下约束margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom = 顶部页面边距
2. 如果 border-top-width + padding-top + height（如果其值不为 auto）+ padding-bottom + border-bottom-width，再加上 margin-top 和/或 margin-bottom（如果不为 auto），其总和大于页面顶部页边距的高度，那么对于以下规则，任何 margin-top 或 margin-bottom 的 auto 值均被视为零。
3. 如果此时 height、margin-top 和 margin-bottom 的计算值均不是 auto，则称这些值“过度约束”。在这种情况下，margin-top 的指定值将被视为 auto。
4. 如果现在恰好有一个值被指定为 auto，其使用值将根据等式得出。
5. 如果 height 被设置为 auto，则所有其他 auto 值变为 0，且 height 的值将根据所得等式得出。
6. 如果 margin-top 和 margin-bottom 均为 auto，则它们的使用值相等。这会将页面页边距框的内容在顶部页面页边距内垂直居中。

同样的规则适用于底部页面页边距框（左下角、底部左侧、底部中心、底部右侧和右下角），只是在过度约束的情况下，会忽略 margin-bottom 而非 margin-top。

类似的规则也适用于左侧和右侧页面页边距框相对于 width 的属性（左上角、左侧顶部、左侧中间、左侧底部、左下角；右上角、右侧顶部、右侧中间、右侧底部、右下角），其中“顶部”替换为“左侧”，“底部”替换为“右侧”，“高度”替换为“宽度”。对于左侧（或右侧）页面页边距框的过度约束情况，margin-left（或 margin-right）的指定值将被忽略。

5.4. 页面页边距框示例

以下是页面页边距框用法的一些示例集合。

@page {
  @top-left { content: "Header in Left Cell (top-left)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-right { content: "Header in Right Cell (top-right)" }
}

@page {
  @top-left { content: "Left Cell (top-left)" }
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
  @top-right { content: "Right Cell (top-right)" }
}

@page {
  @top-left { content: "Header in top-left with approx. twice as many words as right cell." }
  @top-right { content: "Right cell (top-right)" }
}

6. 页面属性

附录 A 定义了 CSS 2.1 [CSS2] 中适用于页面框的属性的规范列表。如果符合规范的用户代理在块框上支持这些属性中的任何一个，则它也必须在页面上下文中支持该属性。本规范还定义了仅适用于页面上下文的 size 属性。

适用于页面页边距框的属性也可以在页面上下文中设置：如果它们是可继承的或被显式继承（在页边距上下文中使用 inherit 关键字），它们将继承到页面页边距框中。

同一附录定义了 CSS 2.1 [CSS2] 中适用于页面页边距框的属性的规范列表。如果符合规范的用户代理在块框上支持这些属性中的任何一个，则它也必须在页边距上下文中支持该属性。

由 [CSS2] 定义的其他属性不适用于这些上下文。CSS 2.1 中未包含的属性的行为是未定义的。

注意：不定义其他属性的意图是允许在适当的 CSS3 属性出现时逐步添加它们，而无需在每次添加时都更新本规范。

与文档中的元素一样，页面上下文和页边距上下文对每个属性都有一个计算值，即使该属性不适用于页面框或页面页边距框。

CSS 属性的正常规则适用，但有以下例外情况：

• 页面页边距框继承自页面上下文。页面上下文继承自根元素。然而，由于《CSS 分页媒体模块第三级》（CSS Paged Media Level 3）的前一个修订版未明确这一点，将页面上下文中的继承属性设置为其初始值（如根元素）的实现也符合《CSS 分页媒体模块第三级》。注意，此例外情况将在第四级中删除。
• em 和 ex 单位的值相对于其上下文关联的字体进行解释。当用于页边距上下文中的 font-size 属性时，它们相对于页面上下文的字体。当用于页面上下文中的 font-size 属性时，它们相对于根元素的 font-size。然而，由于《CSS 分页媒体模块第三级》的前一个修订版在此点上存在歧义，将 font-size 上的 em 和 ex 视为相对于初始值的实现也符合《CSS 分页媒体模块第三级》。注意，此例外情况将在第四级中删除。
• 页边距和填充属性上的百分比值相对于包含块的尺寸。对于右侧和左侧值，百分比相对于包含块的宽度；对于顶部和底部值，百分比相对于包含块的高度。
• width 和 height 的使用值对页面框和页面页边距框有特殊的计算规则；请参阅页面尺寸和计算页面页边距框尺寸。
• 页面背景的定位和绘制如上所述。
• 计数器作用域的规则被修改，如下所述。
• 与 '::before' 和 '::after' 伪元素一样，content 属性的 normal 值在页面页边距框上计算为 none。
• 在页面页边距框上，vertical-align 属性的行为与表格单元格的规定一致。无论书写模式如何，它总是执行垂直维度的对齐。

用户代理应通过用户代理样式表建立一个默认页面页边距，其中包括任何不可打印区域。作者应假设默认页面区域将不包括不可打印区域。

6.1. 基于页面的计数器

计数器可以在 @page 规则内定义和控制，并用作页面页边距框中的内容。这对于维护页面计数很有用。

页面或页边距上下文内的 counter-increment 会导致计数器随着每个页面框的生成而递增。

如果计数器在页面上下文中被重置或递增，则它在所有页面页边距框的作用域内，并会遮蔽文档中所有同名的计数器。

如果计数器在页边距上下文中被重置或递增，则它在该页面页边距框的作用域内，并会遮蔽页面上下文和文档中任何同名的计数器。

如果一个未在页边距上下文或页面上下文中重置或递增的计数器在页边距上下文中通过 counter() 或 counters() 被使用，则其结果值就如同该页面页边距框是页面开头处文档内的一个元素，位于跨越分页符的正常流中最深处的元素内一样。以这种方式使用计数器不会影响计数器值的计算。

一个名为 page 的计数器会自动创建，并在文档的每一页上递增 1，除非页面上下文中的 counter-increment 属性明确指定了 page 计数器的不同增量。隐含的 page 计数器是一个真实的计数器，可以在这些属性中明确命名时，使用 counter-increment 和 counter-reset 属性直接进行影响。它也可以在 'counter()' 和 'counters()' 函数形式中使用。

@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

@page {
  counter-increment: page 2;
}

此外，由用户代理自动创建一个名为 pages 的计数器。其值始终为文档中的总页数。（在连续媒体中，这始终为 1。）pages 的值无法被修改：虽然设置它的 counter-reset 和 counter-increment 语句是有效的，但它们不起作用。

在所有其他方面，与页面关联的计数器的行为如 [CSS2] 中嵌套计数器和作用域以及计数器中所述。

6.2. 页面页边距框和默认值

页面或页边距上下文中使用的属性从其各自的属性定义中获取初始值；然而，用户代理必须表现得就像下表中的值是由用户代理默认样式表中的规则所建立的一样。

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: "Chapter" counter(chapter) }
}

7. 页面尺寸

世界各地的人们使用许多不同的纸张尺寸。本规范的目标之一是让 Web 内容能够适应各种不同的尺寸，而无需为每种纸张尺寸编写特定的样式表。

然而，在某些情况下，特定的页面尺寸对于实现某种特定样式非常重要。实现此目标的一种方法是利用 size 属性，它表明文档应优先显示在特定尺寸的表面上；另一种方法是使用媒体查询 [MEDIAQ]，它允许将不同的样式表应用于不同的页面尺寸。

7.1. 页面尺寸：size 属性

此属性指定页面框的包含块的目标尺寸和方向。在常规情况下，即一个页面框渲染到一个页面纸张上时，size 属性也表示目标页面纸张的尺寸。

页面框的尺寸可以是“绝对的”（固定尺寸）或“可缩放的”（即适合可用纸张尺寸）。下表中的前三个值可用于创建可缩放的页面框。其他值定义了固定尺寸的页面框，从而指明了首选的输出媒体尺寸。尽可能在指定的媒体尺寸上进行渲染。如果指定的尺寸不可用，则适用将页面框转换到不同尺寸的规则。

如果 size 属性声明由 width、height、device-width、device-height、aspect-ratio、device-aspect-ratio 或 orientation 媒体查询 [MEDIAQ]（或其他关于纸张尺寸的条件）限定，则该声明必须被忽略。媒体查询不遵循 size：它们假设如果未指定 @page 规则，则会选择该纸张尺寸。

@page {
  size: 4in 6in;
}

@media (max-width: 6in) {
  @page {
    size: letter;
  }
}

auto

页面框将被设置为由用户代理选择的尺寸和方向。在通常情况下，选择页面框尺寸和方向以匹配目标媒体纸张。

landscape

指定页面内容以横向（landscape）打印。页面框较长的边处于水平位置。如果未指定 <page-size>，则页面纸张的尺寸由用户代理选择。

portrait

指定页面内容以纵向（portrait）打印。页面框较短的边处于水平位置。如果未指定 <page-size>，则页面纸张的尺寸由用户代理选择。

<length>

页面框将被设置为给定的绝对尺寸。如果仅指定一个长度值，它将同时设置页面框的宽度和高度（即，框为正方形）。如果指定了两个长度值，第一个确立页面框宽度，第二个确立页面框高度。em 和 ex 单位的值引用页面上下文的字体。负长度是非法的。

<page-size>

页面尺寸可以使用以下媒体名称之一指定。这等同于使用长度值指定 size。媒体名称的定义来自“媒体标准化名称” [PWGMSN]。

A5

等同于 ISO A5 媒体的尺寸：宽 148 毫米，高 210 毫米。

A4

等同于 ISO A4 媒体的尺寸：宽 210 毫米，高 297 毫米。

A3

等同于 ISO A3 媒体的尺寸：宽 297 毫米，高 420 毫米。

B5

等同于 ISO B5 媒体的尺寸：宽 176 毫米，高 250 毫米。

B4

等同于 ISO B4 媒体的尺寸：宽 250 毫米，高 353 毫米。

JIS-B5

等同于 JIS B5 媒体的尺寸：宽 182 毫米，高 257 毫米。

JIS-B4

等同于 JIS B4 媒体的尺寸：宽 257 毫米，高 364 毫米。

letter

等同于北美 Letter 媒体的尺寸：宽 8.5 英寸，高 11 英寸。

legal

等同于北美 Legal 媒体的尺寸：宽 8.5 英寸，高 14 英寸。

ledger

等同于北美 Ledger 媒体的尺寸：宽 11 英寸，高 17 英寸。

<page-size> 名称可以与 landscape 或 portrait 结合使用，以同时指明尺寸和方向。

@page {
size: A4 landscape;
}

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

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

7.1.1. 媒体查询

本节是资料性的。

通过使用媒体查询 [MEDIAQ]，一个样式表可以为不同的页面尺寸表达不同的样式偏好。考虑这个例子：

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
}

在上面的例子中，“A4”纸张被赋予“3 厘米”的页面页边距，“letter”纸张被赋予“1 英寸”的页面页边距。

7.1.2. 旋转打印页面：page-orientation 属性

高质量的打印实现能够处理不同尺寸和方向的页面，因此作者可以根据该页面内容的需求选择页面尺寸。例如，他们可能对文档中的大多数页面使用 size: letter portrait;，但切换到 size: letter landscape; 来排版一个宽大的信息表格。

然而，处理跨越不同宽度页面的内容流是一个相对复杂的任务，并且在许多流行的打印实现（特别是 Web 浏览器）中尚未解决。page-orientation 描述符旨在帮助此类实现，允许它们以单一统一的尺寸进行页面排版，但在输出介质（如 PDF）中对排版后的方向进行更改，以便希望以不同方向显示的页面能够实现这一点。

其值定义为：

upright

不应用特殊方向；页面按正常方式进行排版和格式化。

rotate-left

在页面完成排版后，如果输出介质支持旋转，此值表示页面必须相对于其排版方式向左（逆时针）旋转四分之一圈进行显示。

rotate-right

与 rotate-left 相同，只是页面必须相对于其排版方式向右（顺时针）旋转四分之一圈进行显示。

注意：页边距框和其他定位元素与此属性没有特殊交互；它们将在未旋转的页面上按正常方式排版，然后与其他内容一起旋转。

7.2. 裁剪和套准标记：marks 属性

此属性将裁剪标记和/或套准标记添加到文档中。这些标记打印在页面框之外，以方便纸张的修剪和对齐。各值的含义如下：

none（无）

指定既不打印裁剪标记也不打印套准标记：出血区域之外的区域将完全空白。

crop

指定打印裁剪标记。这些标记通常是页面框之外的短线，实际上是页面框四条边的延伸，从而在页面框附近或内部不放置任何油墨的情况下指示这些边的精确位置。

cross

指定打印套准标记。这些通常是页面框每条边外侧的十字形标记，用于在打印过程中对齐纸张。

注意，裁剪标记和套准标记仅在页面框小于可打印区域时可见。

@page { marks: crop cross }

7.3. 出血区域：bleed 属性

此属性指定页面框外部的 出血区域 的范围；换句话说，即页面渲染被裁剪的超过页面框的部分。各值的含义如下：

auto

如果 marks 包含 crop，则计算为 6pt，否则计算为零。

<length>

指定 出血区域 在每个方向上延伸出 页面框 的距离。值可以是负数，但可能存在特定于实现的限制。

7.4. 渲染不适合页面纸张的页面框

如果页面框与目标页面纸张尺寸不匹配，用户代理应执行以下操作之一（按偏好顺序）：

1. 在更大的页面纸张上按指示的尺寸渲染页面框。
2. 如果能使页面框适合页面纸张，则将页面框旋转 90°。
3. 缩放页面框以适合页面纸张。（页面框的长宽比应保持不变。）
4. 将页面框图形化地“切片”到多个页面纸张上。
5. 裁剪溢出的内容（最不推荐）。

用户代理可能希望在执行这些操作之前咨询用户。

7.5. 在纸张上定位页面框

当页面框小于页面纸张时，用户代理应：

• 将页面框居中于纸张上，因为这将使双面页面对齐并避免意外丢失打印在纸张边缘附近的信息；或者
• 将页面框定位在页面纸张的左上角（或根据页面框的 direction 和 writing-mode 属性定位在另一个角落），因为这可以最大限度地减少媒体消耗。

用户代理可能希望在这方面咨询用户。

8. 分页符

CSS 分片模块（CSS Fragmentation Module） [CSS-BREAK-3] 定义了 CSS 框如何在分片（包括跨分页符）的方式和位置。它定义了一些属性，用于指示用户代理可以在哪里或必须在哪里分页，以及后续内容将在哪一页（左页或右页）恢复。每个分页符结束当前页面框中的排版，并导致文档树的剩余部分在新的页面框中进行排版。

8.1. 使用命名页面：page

page 属性用于指定元素必须在其上显示的特定类型的页面（称为命名页面）。如有必要，会引入一个强制分页符并生成一个指定类型的新页面。

注意：此页面可以通过在页面选择器中使用相同的类型名称来进行样式设置。

页面类型名称是区分大小写的标识符。但是，auto 值作为 CSS 关键字，是不区分 ASCII 大小写的。

page 属性不继承。但是，如果元素上的 page 值为 auto，则其使用值为其具有非 auto 值的最近祖先元素上指定的值。当在根元素上指定时，auto 的使用值为空字符串。

由于本规范的早期版本指出 page 属性是可继承的，因此继承 page 属性并将 auto 始终视为命名为空字符串的实现仍然符合《CSS 分页媒体模块第三级》。注意，此例外情况将在第四级中删除。因此，作者不应在具有非 auto 值的元素的后代上显式指定 auto 值，因为所得行为将不可预测。

page 属性的工作方式如下：

1. 首先，任何 auto 值都会针对非 auto 的祖先元素进行解析（如上所述）。
2. 接下来，为每个框确定一个开始 page 值和结束 page 值，作为从其第一个或最后一个子框（分别）传播的值（如果有），否则为框本身上的使用值。子元素仅在 page 属性应用于它时，才会传播其自身的开始或结束页面值。

   注意：第一个或最后一个子框并不总是由第一个或最后一个子元素生成。例如，一个元素可能只有一个带有 'display: none' 的前一个兄弟元素，该元素不生成任何框。

3. 第一个打印页面的类型是根元素的开始页面值。
4. 如果对于在 A 类断点处相遇的任何两个框，断点前框的结束页面值与断点后框的开始页面值不匹配，则会在两个框之间强制进行分页，并且断点后的内容将在命名类型的页面框上恢复。

注意：本质上，比较的两个 page 值是来自在 A 类断点处相遇的最深层框的值，忽略 page 属性不适用的框作为根的所有子树。

有关分页符的更多详细信息，请参阅 [CSS-BREAK-3]。

@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }

<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>

<!DOCTYPE html>
<html lang="ja">
  <style>
    html   {
      writing-mode: vertical-rl;
      line-height: 1.6;
    }
    .main  {
      page: main;
      columns: 2;
      column-gap: 1rem;
    }
    .index {
      page: index;
      columns: 3;
      column-gap: 1rem;
    }
    @page {
      margin: auto;  /* center kihon hanmen on page */
      width:  40rem; /* 1.6 × 25 lines        */
    }
    @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */
    @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
  </style>
  <section class="main"> ... </section>
  <section class="index"> ... </section>
</html>

9. 图像属性

注意：此部分已移至 [CSS-IMAGES-3]。

附录 A：适用的 CSS2.1 属性

在页面上下文中适用的 CSS 2.1 属性

此列表定义了页面属性。它们在 § 6 页面属性 中有进一步描述。

在页边距上下文中适用的 CSS 2.1 属性

此列表定义了页面页边距属性。它们在 § 6 页面属性 中有进一步描述。

附录 B：转移可能性

页面框通常（但不总是）与最终渲染文档的物理表面有一一对应关系。CSS3 页面模型指定了页面框内的排版，但将页面框转移到纸张上是用户代理的责任。CSS3 未解决的一些用户代理转移可能性包括：

• 将一个页面框转移到一张纸上（例如单面打印）；
• 将两个页面框转移到同一张纸的正面和背面（例如双面打印）；
• 将 N 个（小）页面框转移到一张纸上（称为“N-up”）；
• 将一个（大）页面框转移到 N x M 张纸上（称为“平铺/tiling”）；
• 创建折手（signature）。折手是一组打印在一张纸上的页面，当像书一样折叠和裁剪时，它们会按正确的顺序出现；
• 将一个文档打印到多个输出托盘；
• 生成包含打印指令的文件。

隐私与安全考虑

本规范不引入任何新的隐私或安全考虑。

变更 (Changes)

自 2018 年 10 月 18 日的工作草案以来的更改为：

• 添加了 page-orientation 描述符。

自 2013 年 3 月 14 日的工作草案以来的更改为：

• 从 [CSS3GCPM] 导入了 marks 和 bleed 属性。
• 添加了 auto 作为 bleed 的初始值，并允许它即使在 marks 为 none 时也适用。
• 添加了 JIS-B4 和 JIS-B5。

致谢

CSS 工作组要特别感谢本模块的前任编辑：Robert Stevahn (Hewlett-Packard)、Håkon Wium Lie (Opera Software)、Jim Bigelow (Hewlett-Packard)、Jacob Refstrup (Hewlett-Packard) 和 Melinda Grant (Hewlett-Packard)。

我们还要感谢我们的专家贡献者 Michael Day (YesLogic)、Shinyu Murakami (Antenna House)、Peter Linss (Hewlett-Packard) 以及 CSS 工作组和 www-style 社区的其他成员，他们为《CSS 分页媒体模块第三级》提供了审查和评论。