CSS 分页媒体模块 第3级

1. 介绍

1.1. 值定义

本规范遵循来自 CSS 属性定义约定（见 [CSS2]），并使用来自 CSS 值定义语法（见 [CSS-VALUES-3]）。本规范中未定义的值类型在 CSS 值与单位模块中定义 [CSS-VALUES-3]。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了在各属性定义中列出的属性特定值之外，本规范中定义的所有属性也接受 CSS 宽关键字 作为它们的属性值。为便于阅读，这些关键字未在此处重复列出。

2. 页面术语

下面的术语和附图有助于描述页面模型：

Page sheet

page sheet 是物理介质的一个表面。右侧插图显示了页面表面左上角的示意图。

Printable and non-printable areas

非可打印区域是指打印设备（例如打印机）通常无法可靠地标记的页面表面区域，通常由于打印机的送纸机构所限。此值取决于打印机，通常位于页面表面每个边缘的一小块区域。可打印区域是打印机能够可靠标记的页面表面区域。可打印区域的大小等于页面表面尺寸减去非可打印区域的尺寸。用户代理可能不知道特定打印设备该区域的尺寸；但当其尺寸已知时，用户代理可以调整文档的格式，使内容位于可打印区域内。如何完成此调整取决于设备，同时受 § 7.4 渲染不能适合纸张的页面框 和 § 3.2 页面框外的内容 中所述约束的限制。

Page Orientation

页面方向由比较 page box 的边的长度来定义。page box 是一个矩形，具有两个互相垂直的边，称为长边和短边。长边的长度始终大于或等于短边的长度。当 page box 为正方形时，两条边长度相同，可以任意指定哪一条为长边或短边。规范定义了 portrait 和 landscape 两种页面方向。

Portrait Orientation

纵向页面的高度大于或等于其宽度。水平元素与短边平行，垂直元素与长边平行。

Landscape Orientation

横向页面的宽度大于或等于其高度。水平元素与长边平行，垂直元素与短边平行。

注： 注意 CSS3 不区分 landscape 与 reverse-landscape。不过，未来版本的 CSS 可能会区分。用户代理在为双面打印格式化时，应在选择 landscape 与 reverse-landscape 呈现时考虑装订边、页面前进方向和易读性。

Duplex Printing

双面打印在纸张表面的每一侧各打印一个 page box 并使用纸张的两面。本模块不提供指定文档是否双面打印的能力，但左右页的概念是基于文档为双面打印的假设，无论实际是否为双面打印。

Binding Edge

装订边是 page box 朝向装订处的那一侧边。装订边通常比对侧边有更大的边距，以提供装订所占的空间。装订边可以是四条边中的任意一条。然而，页面表面通常装订方式使得纵向页面的装订边为垂直。本模块不提供指定装订边的方法。在双面打印时，左右页的装订边位于 page box 的相对两侧。

Facing Pages

对开页是两个连续的页面，当文档双面打印时它们位于不同的纸张上。通常较早的页面会是一张纸的背面，而较晚的页面会是另一张纸的正面。它们通常布局为在正常阅读方向下，对开页的装订边垂直且相邻。

Left Page

在一对对开页中位于左侧的页面。对于使用从左到右页面前进方向的文档，较早的对开页位于左侧。可以使用 :left page selector 指定针对左页的规则。

Right Page

在一对对开页中位于右侧的页面。对于使用从右到左页面前进方向的文档，较早的对开页位于右侧。可以使用 :right page selector 指定针对右页的规则。

3. 页面模型

在 paged media 格式化模型中，文档被传输到一个或多个 page box。page box 是一种专用的 CSS 盒，映射到矩形的打印介质表面，例如纸张的一页。它大致类似于 viewport。

与其他 CSS 盒模型一样，page box 由 margin、border、padding 和 content 区域组成。page box 的 content 区域和 margin 区域具有特殊功能：

在 CSS 2.1 中，page box 和 page area 都是简单的矩形。两者都不是具有 margin、border 和 padding 的 CSS 盒。此 CSS 盒应当与 page box 和 page area 区别开来，分别对应其 margin 区域和 content 区域。有没有命名建议？

• page box 的 content 区域称为 page area。文档的内容被流入一个或多个 page box。page area 作为由根元素及其后代在给定 page box 内生成并布局的所有盒的容器。第一页的 page area 的边界确定了作为文档初始 containing block 的矩形。
• page box 的 margin 区域被划分为 16 个 page-margin boxes。每个 page-margin box 都具有自己的 margin、border、padding 和 content 区域。page-margin boxes 通常用于显示连续的页眉和页脚。

page box 的属性由在 page context 中声明的属性决定，page context 是 声明块，即 @page 规则的声明块。类似地，page-margin box 的属性由其 margin context 中声明的属性决定。page context 中的声明可以影响 page box 并/或继承到 page-margin boxes，但它们不应用于也不继承到文档的根元素或其他内容。

page box 的 containing block 通过在 page context 中使用 size 属性来指定。然后 page box 的宽度和水平边距按与 正常流中非替换块元素 相同的方式精确计算。[CSS2] page box 的高度和垂直边距以类似方式计算（不使用块高度公式）。在这两种情况下，如果值被过度约束，则不是忽略任何边距，而是调整 containing block 的大小以与 page box 的 margin 边缘一致。

3.1. 页面背景与绘制顺序

绘制页面内容时，页面图层按下列绘制顺序（从最底层开始）绘制：

1. 页面背景
2. 文档画布
3. 页面边框
4. 文档内容
5. 页面边距盒

在页面模型中，页面背景的行为类似于根背景：其 背景绘制区域 是 bleed area，覆盖整个 page box，包括其边距（无论 background-clip 如何设置）。页面背景默认在 page box 的 padding 区域内进行锚定（并在 UA 支持 [CSS-BACKGROUNDS-3] 时尊重 background-origin）。但是，如果 background-attachment 的值为 fixed，则图像相对于包括边距在内的 page box 定位（即 背景定位区域 是页面的 margin box）。

文档画布背景作为 page box 的背景绘制：默认其 背景绘制区域 覆盖 page box 的 border box，对于支持 [CSS-BACKGROUNDS-3] 的 UA，遵循根元素上指定的 background-clip 值。尽管如此，它仍以通常方式相对于根元素或 page area 定位。

关于 page-margin boxes，文档画布、页面边框以及所有文档内容被视为具有 z-index 值为 0 的单一元素，从而建立一个 堆叠上下文 [CSS2]：page-margin boxes 永远不会与文档内容的部分或内容与画布之间交错。它们只能绘制在文档内容之前或文档画布之后。页面背景始终绘制在所有内容之下。

z-index 属性适用于 page-margin boxes。由于 position 属性不适用于 page-margin boxes，z-index 总是如同 page-margin boxes 为定位元素一样影响它们，而不考虑 position 属性的值。每个 page-margin box 总是建立一个堆叠上下文。

page-margin boxes 相互之间的默认绘制顺序，或 CSS2.1 附录 E 所述的“树序”，如下：

1. @top-left-corner
2. @top-left
3. @top-center
4. @top-right
5. @top-right-corner
6. @right-top
7. @right-middle
8. @right-bottom
9. @bottom-right-corner
10. @bottom-right
11. @bottom-center
12. @bottom-left
13. @bottom-left-corner
14. @left-bottom
15. @left-middle
16. @left-top

从 @top-left-corner 开始，按顺时针方向。此顺序是任意的，但可以用 z-index 覆盖。只有当 page-margin boxes 重叠时才会有可见影响，通常不应发生重叠。

3.2. 页面框外的内容

在页面模型中格式化内容时，部分内容可能会出现在 page box 之外。例如，当元素的 white-space 属性值为 pre 时，可能会生成比 page box 更宽的盒子。再比如，当盒子为绝对定位或相对定位时，它们可能出现在“不合适”的位置，例如图像可能放置在 page box 的边缘，或远在 page box 之下 100,000 米。

关于此类元素的精确格式化规范超出本文件范围。但是，建议作者和用户代理遵循以下关于 page box 之外内容的一般原则：

• 允许内容略微超出 page box 以支持页面“出血”。
• 用户代理 SHOULD 避免为尊重元素定位而生成大量空内容页面（例如打印 100 页空白页通常既不是作者也不是用户的意图）。Content-empty page 是指其 page area 中不包含可打印内容（背景和/或边框除外）的 page box。如果 page area 包含生成内容，或 visibility 为 hidden 的内容，或诸如零宽空格之类的不可见内容，则该页不视为 content-empty page。另一方面，仅包含背景和/或边框和/或 page-margin box 内容的页面 是 content-empty page。

  注意，有时需要生成少量空的 page box 来尊重对 page-break-before/break-before 和 page-break-after/break-after 的强制分页值。[CSS2] [CSS-BREAK-3]

• 作者 SHOULD NOT 将元素定位到“不合适”的位置以仅仅为了避免渲染它们。相反：
  • 要完全抑制盒子的生成，将 display 属性设为 none。
  • 要使盒子不可见，请设置 visibility 属性。
• 本规范不定义如何处理定位到 page box 之外的盒。可能的处理方式包括丢弃它们或在文档末尾为它们创建 page box。

3.3. 页面前进方向

CSS 在所有文档中区分左页和右页，无论是否双面打印。每个左页之后是一个右页，反之亦然。可以使用 :left 和 :right 伪类 对左右页应用不同样式。

文档的首页是左页还是右页取决于文档的页面前进方向。page progression 是指当页面并排布局时文档打印页面的序列方向。例如，英语和横排的日语通常从左向右前进，而阿拉伯语和竖排的日语通常从右向左前进。

页面前进方向按如下确定：

• 如果文本以水平行布局，则 page progression 与 inline base direction 相同。
• 如果文本以竖直行布局，则 page progression 与 block flow direction 相同。

如果用户代理支持来自 CSS 3 Writing Modes Module 的 direction 和 writing-mode 属性，则必须通过 确定 页面前进方向由 principal writing mode 决定。

对于具有从左到右页面前进方向的文档，文档的第一页是右页，反之亦然。要显式强制文档从左页或右页开始打印，作者可以指定一个将分页传播到根的 break-before 值。[CSS-BREAK-3] 在这种情况下，用户代理必须抑制第一个（空的）页面（且 :first 伪类匹配第一个打印页面）。

html { break-before: always }

html { break-before: left }

4. 页面选择器与页面上下文

4.1. @page 规则

作者可以在 @page 规则中指定 page box 的各个方面，例如其尺寸、方向和边距。@page 规则可在允许使用规则集的任何位置使用。 一个 @page 规则由关键字 @page、可选的以逗号分隔的 页面选择器 列表以及一个声明块（称为 页面上下文）组成。 一个 @page 规则也可以包含其他 at-规则，穿插在声明之间。本规范的当前级别仅允许在 @page 内使用 margin at-rules。

@page 规则 如果没有选择器列表则适用于每一页。 其它带选择器的 @page 规则适用于匹配其至少一个选择器的页面。 在页面上下文中声明的属性应用于 page box。

如果在处理 page 或 margin 上下文中的声明块时遇到错误，则适用 解析错误处理规则；也就是说，块中合法的声明仍会被应用。

4.2. 页面选择器

页面选择器 由一个 页面类型选择器 或一个 页面伪类 组成，后面可跟零个或多个额外的 页面伪类。选择器的组件之间不允许有空白。 <page-selector> 的文法和示例见下文。

当且仅当一个 页面选择器 的所有组件都匹配该页面时，该选择器被称为 匹配 该页面。

页面类型选择器 是一个区分大小写的 CSS 标识符。 它匹配由 page 属性生成的命名页面类型。 页面类型名为 auto（ASCII 不区分大小写）不会使规则无效，但必须永远不匹配。

页面伪类 为 ASCII 不区分大小写，其语法与常规选择器中的 伪类 相同。各种 页面伪类 在下面定义。

4.2.1. 跨页伪类： :left, :right

在双面打印的文档中，左右页通常有不同的排版样式。可以使用 :left 和 :right 页面伪类来表达这种差异。

所有页面均由用户代理根据 页面前进方向 自动分类为左页或右页。 :left 和 :right 伪类分别只匹配 左页 或 右页。

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

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

如果为左右页给出了不同的声明，用户代理必须尊重这些声明，即使用户代理并未将 page box 分别传输到左右两侧的纸张上（例如仅在介质一面打印的打印机也必须产生正确格式的输出）。

4.2.2. 首页伪类： :first

:first 伪类匹配文档的第一个打印页面。

@page { margin: 2cm } /* 所有边距设为 2cm */

@page :first {
margin-top: 10cm /* 首页顶部边距 10cm */
}

4.2.3. 空白页伪类： :blank

:blank 伪类匹配因强制分页而出现的 内容为空的页面。

h1 { break-before: left }

@page :blank {
  @top-center { content: "This page is intentionally left blank" }
}

被 :blank 匹配的页面也可以同时被其它页面伪类匹配。

h1 { break-before: left }

@page :blank {
  @top-center { content: none }
}

@page :right {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}

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 规则只能包含 页面属性 和 margin at-rules。

• margin at-rules 只能包含 page-margin 属性。

@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }

@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 :first {
  color: green;

  @top-left {
    content: "foo";
    color: blue;
  }
  @top-right {
    content: "bar";
  }
}

@page { color: red;
  @top-center {
    content: "Page " counter(page);
  }
}

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

5. 页面边距盒

页面边距盒是位于页面边距内的盒子，类似伪元素，可以包含生成的内容。

页面边距盒可用于创建页面的页眉和页脚，页眉/页脚是页面中为补充信息（例如页码或文档标题）保留的区域。

页面边距盒相对于 page area 定位，并且与页面方向无关；例如，无论纵向还是横向，顶部的页面边距盒都位于 page area 的上方。下面的图示定义并说明了各种页面边距盒：

表 1 页面边距盒定义

盒子	描述	放置
top-left-corner	由 page box 的上边距和左边距的交叉处定义的固定尺寸盒
top-left	在 top-left-corner 和 top-center 页面边距盒之间填充顶部页面边距的可变宽度盒
top-center	在页面的左、右边框边缘之间水平居中，并在 top-left 和 top-right 页面边距盒之间填充顶部页面边距的可变宽度盒
top-right	在 top-center 和 top-right-corner 页面边距盒之间填充顶部页面边距的可变宽度盒
top-right-corner	由 page box 的上边距和右边距的交叉处定义的固定尺寸盒
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	由 page box 的下边距和左边距的交叉处定义的固定尺寸盒
bottom-left	在 bottom-left-corner 和 bottom-center 页面边距盒之间填充底部页面边距的可变宽度盒
bottom-center	在页面的左、右边框边缘之间水平居中，并在 bottom-left 和 bottom-right 页面边距盒之间填充底部页面边距的可变宽度盒
bottom-right	在 bottom-center 和 bottom-right-corner 页面边距盒之间填充底部页面边距的可变宽度盒
bottom-right-corner	由 page box 的下边距和右边距的交叉处定义的固定尺寸盒

5.1. 页面边距盒的 at-规则

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

margin at-rule 是一种at-rule，用于标识页面边距盒（例如 @top-left）并包含一个描述符块（称为 margin context）。

@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。

page-margin boxes 不适用 display 属性。

@page {
  @top-left-corner { content: " "; border: solid green; }
  @top-right-corner { content: url(foo.png); border: solid green; }
  @bottom-right-corner { content: counter(page); border: solid green; }
  @bottom-left-corner { content: normal; border: solid green; }
}

5.3. 计算页面边距盒尺寸

每个页面边距盒的宽度和高度由以下规则确定。这些规则定义了相当于 CSS2.1 第10.3 和 10.6 节的页面边距盒计算规则。

对 min-height、max-height、min-width 和 max-width 的适用规则与页面边距盒相关，并可能在指定的 width 或 height 导致违反其约束时，触发宽度、高度和/或边距的重新计算。如果用户代理不支持 min-height 或 min-width 属性，则必须表现得好像 min-height 和 min-width 恒为零。

5.3.1. 页面边距盒布局术语

除了 CSS2.1 的盒模型定义和 CSS Sizing 的尺寸术语外，以下术语在后续页面边距盒计算中使用：

available width

页面的左边框宽度、左内边距、page area 宽度、 右内边距和右边框宽度之和。换句话说，它是 page box 左右边框边缘之间的距离。该量用于计算上下页面边距盒的尺寸。

available height

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

outer width

如 outer edge 定义的外缘宽度（参见 [CSS-BOX-3]）。

min-content width

物理宽度为 min-content block size 或 min-content inline size 中的较小者。

max-content width

物理宽度为 max-content block size 或 max-content inline size 中的较大者。

outer min width

类似于 outer width，只是当计算的 width 为 auto 时使用 min-content width。

outer max width

类似于 outer width，只是当计算的 width 为 auto 时使用 max-content width。

页面边距盒的 containing block 取决于其位置：

对于角落页面边距盒，其 containing block 是由该角落相交的两个页面边距定义的矩形。

对于其它页面边距盒，containing block 是由封装的页面边距减去相邻角落页面边距盒的 containing block 所形成的矩形。这意味着该 containing block 的一维由使用的页面边距给出，另一维由 available width（对于上、下页面边距盒）或 available height（对于左、右页面边距盒）给出。

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 宽度

下列算法确定每个盒子的使用宽度。为此，未被 生成 的盒子假定具有宽度和 outer width 为零。

注：总体目标（按优先顺序）是：若中间盒 B 被生成则将其居中，最小化溢出与重叠，并按内容量成比例分配空间。

如果中间盒 B 未被 生成，则按以下方式将 available width 分配给 A 和 C：

• 如果只有一个盒子的 'width: auto'，则通过调整该盒子的使用宽度，使所有盒子的 outer width 之和等于 available width。
• 如果 A 和 C 都有 'width: auto'，则按如下方式分配空间：
  1. 如果 outer max-content widths 的和小于 available width，将二者的差称为 flex space。计算每个盒子的 flex factor，使其与其 outer max-content width 成比例，并将其使用的 outer 宽度设为： max-content width + flex space × flex factor ÷ ∑flex factors
  2. 否则，如果 outer min-content widths 的和小于 available width，将二者的差称为 flex space，计算每个盒子的 flex factor，使其与其 max-content width 减去 min-content width 成比例，并将其使用的 outer 宽度设为： min-content width + flex space × flex factor ÷ ∑flex factors
  3. 否则，按前一种情况计算其 outer 大小，但将每个盒子的 flex factor 设为与其 outer min-content width 成比例。
  在每种情况中，如果两个 flex factors 的和为零，则假定它们都为 1。

如果中间盒 B 被 生成，按如下方式确定 A、B 和 C 的 auto 宽度：

1. 首先，解析中间盒（B）的任何 auto 宽度：假定存在两个盒子，B 和 AC，其中 AC 的每个维度为 A 和 C 最大值的两倍（以保持 B 的居中）。按上述为 A 和 C 分配空间的方式将空间分配给这两个盒子（B 和虚拟的 AC）。
2. 然后，通过将侧边盒（A 和 C）的 outer 宽度设置为 (available width − B 的使用 outer 宽度) ÷ 2 来解析任何侧边盒的 auto 宽度。

5.3.2.3. 处理 min-width 和 max-width

min-width 和 max-width 属性在可变尺寸维度上像对普通元素一样应用于页面边距盒，但同一侧的三个盒子被一起考虑。

更精确地：

1. 临时的使用宽度按 § 5.3.2.2 解析 auto 宽度 的规则计算（不考虑 min-width 和 max-width）。
2. 如果三者中任何一个的临时使用宽度大于其 max-width，则再次应用上述规则，但这次将 max-width 的计算值用作 width 的计算值。
3. 如果三者中任何一个的结果宽度小于其 min-width，则再次应用上述规则，但这次将 min-width 的值用作 width 的计算值。

5.3.2.4. 定位

一旦确定了盒子的尺寸，按如下方式定位：

• A 的左外缘与 containing block 的左边缘对齐
• B 的外部区域在 containing block 中居中
• C 的右外缘与 containing block 的右边缘对齐

5.3.2.5. 其它侧的盒子

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

@left-top、@left-middle 和 @left-bottom 盒子的使用值由相同规则确定，但将 "width" 替换为 "height"、将 "left" 替换为 "top"、将 "right" 替换为 "bottom"、将 "center" 替换为 "middle"。

@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 盒属性的使用值之间必须满足以下约束：

   margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom = top page margin

2. 如果 border-top-width + padding-top + height（如果其不是 auto）+ padding-bottom + border-bottom-width， 再加上如果不是 auto 的 margin-top 和/或 margin-bottom，大于顶部页面边距的高度，则在接下来的规则中，任何作为 auto 的 margin-top 或 margin-bottom 值被视为零。
3. 如果此时 height、 margin-top 和 margin-bottom 的计算值都不是 auto，则这些值被称为“过度约束”。在这种情况下，margin-top 的指定值被视为 auto。
4. 如果现在恰好只有一个值被指定为 auto，则其使用值由等式决定。
5. 如果 height 被设置为 auto，则任何其它为 auto 的值变为 0，并且 height 根据得到的等式确定。
6. 如果 margin-top 和 margin-bottom 都为 auto，则它们的使用值相等。这会在顶部页面边距内垂直居中页面边距盒的内容。

相同的规则适用于底部页面边距盒（bottom-left-corner、bottom-left、bottom-center、bottom-right 和 bottom-right-corner），但在过度约束的情况下，忽略的是 margin-bottom，而不是 margin-top。

与此类似，对于左右页面边距盒的属性（top-left-corner, left-top, left-middle, left-bottom, bottom-left-corner; top-right-corner, right-top, right-middle, right-bottom, bottom-right-corner），有关宽度的规则适用，但将“top”替换为“left”，“bottom”替换为“right”，“height”替换为“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 定义了适用于 page box 的规范性 CSS 2.1 [CSS2] 属性列表。如果符合规范的用户代理在块级盒上支持其中任何属性，则它也必须在 page context 中支持该属性。 本规范还定义了仅在 page context 中适用的 size 属性。

可在 page context 中设置也适用于 page-margin boxes 的属性：如果这些属性是可继承的或在 margin context 中显式使用 inherit 关键字继承的，它们将继承到页面边距盒。

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

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

注： 未定义其它属性的目的是允许随时间逐步添加合适的 CSS3 属性，而无需每次添加时都更新本规范。

与文档中的元素一样，page context 和 margin context 对每个属性都有一个计算值，即使该属性不适用于 page 或 page-margin box。

CSS 属性的常规规则适用，但有下列例外：

• 页面边距盒从 page context 继承。page context 从根元素继承。然而，由于以前的 CSS Paged Media Level 3 版本未指定此点，将继承属性在 page context 中设置为初始值（如同根元素） 的实现也符合 CSS Paged Media Level 3。注意此例外将在第4级被移除。
• 以 em 和 ex 为单位的值相对于其上下文关联的字体进行解释。当在 margin context 的 font-size 属性中使用时，相对于 page context 的字体；当在 page context 的 font-size 属性中使用时，相对于根元素的 font-size。但是，由于之前的修订对此点有歧义，将 em 和 ex 在 font-size 上视为相对于初始值的实现也符合 CSS Paged Media Level 3。注意此例外将在第4级被移除。
• margin 和 padding 属性上的百分比值相对于 containing block 的尺寸。对于左右值，百分比相对于 containing block 的宽度；对于上下值，百分比相对于 containing block 的高度。
• width 和 height 的使用值对 page box 和 page-margin boxes 有特殊计算规则；参见 页面大小 和 计算页面边距盒尺寸。
• 页面背景的定位和绘制如 上文所述。
• 计数器作用域的规则已被修改，如 下文所述。
• 与 '::before' 和 '::after' 伪元素一样，page-margin boxes 上 content 属性的 normal 值计算为 none。
• 在页面边距盒上，vertical-align 属性的行为如同表格单元格中指定的那样执行高度布局。它始终在垂直维度执行对齐，不论写作模式如何。

用户代理应通过其用户代理样式表建立一个包含任何不可打印区域的默认页面边距。作者应假定默认页面区域不会包含不可打印区域。

6.1. 基于页面的计数器

计数器可以在 @page 规则内定义和控制，并可在页面边距盒中用作 content。这在维护页面计数时很有用。

在 page 或 margin context 中的 counter-increment 会在每生成一个 page box 时使计数器递增。

如果在 page context 中重置或递增一个计数器，则该计数器在所有页面边距盒中都有作用域，并遮蔽文档中同名的所有计数器。

如果在 margin context 中重置或递增一个计数器，则该计数器在该页面边距盒中有作用域，并遮蔽 page context 和文档中同名的任何计数器。

如果 margin context 或 page context 中未重置或递增的计数器在 margin context 中被 counter() 或 counters() 使用，则结果值正如页面边距盒作为在页面开始处文档内的一个元素、位于跨页断点的正常流中最深的元素内部那样计算。以这种方式使用计数器不会影响计数器值的计算。

名为 page 的计数器会自动创建，并在文档的每一页上递增 1，除非 counter-increment 在 page context 中显式指定了对 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. 页面边距盒与默认值

在 page 或 margin 上下文中使用的属性从各自的属性定义取得其初始值；然而，用户代理必须表现得好像下面表格中的值由用户代理默认样式表中的规则建立。

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 属性

该属性指定 page box 的 containing block 的目标尺寸和方向。在通常情况下，如果一个 page box 呈现在一个 page sheet 上，size 属性也指示目标 page sheet 的尺寸。

page box 的尺寸可以是“绝对的”（固定尺寸）或“可缩放的”（即适配可用的纸张尺寸）。下表的前三个值可用于创建可缩放 page box。其它值定义固定尺寸的 page box，从而指示首选的输出介质尺寸。应尽可能在所指示的介质尺寸上呈现输出。如果指定的尺寸不可用，则适用将 page box 转置到不同尺寸的规则。

如果 size 属性声明被某个 width、height、device-width、device-height、aspect-ratio、device-aspect-ratio 或 orientation 媒体查询（或其它基于纸张大小的条件）限定，则该声明必须被忽略。媒体查询不会尊重 size：它们假定在未指定任何 @page 规则时会选择的纸张尺寸。

@page {
  size: 4in 6in;
}

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

auto

page box 将被设置为由用户代理选择的尺寸和方向。在通常情况下，page box 的尺寸和方向选择与目标介质表面匹配。

landscape

指定页面内容以横向方向打印。page box 的较长边为水平。如果未指定 <page-size>，page sheet 的尺寸由用户代理选择。

portrait

指定页面内容以纵向方向打印。page box 的较短边为水平。如果未指定 <page-size>，page sheet 的尺寸由用户代理选择。

<length>

page box 将设置为给定的绝对尺寸。如果仅指定一个长度值，则同时设置宽度和高度（即为正方形）。如果指定两个长度值，第一个为 page box 宽度，第二个为 page box 高度。以 em 和 ex 为单位的值参照 page context 的字体。负长度非法。

<page-size>

页面尺寸可以使用下列媒体名称之一指定。这等价于使用长度值指定 size。媒体名称的定义来自 Media Standardized Names [PWGMSN]。

A5

等同于 ISO A5：宽 148mm，高 210mm。

A4

等同于 ISO A4：宽 210mm，高 297mm。

A3

等同于 ISO A3：宽 297mm，高 420mm。

B5

等同于 ISO B5：宽 176mm，高 250mm。

B4

等同于 ISO B4：宽 250mm，高 353mm。

JIS-B5

等同于 JIS B5：宽 182mm，高 257mm。

JIS-B4

等同于 JIS B4：宽 257mm，高 364mm。

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" 纸张被设置为 3cm 的页面边距，而 "letter" 纸张被设置为 1in 的页面边距。

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

高质量的打印实现能够处理不同尺寸和方向的页面，因此作者可以根据页面内容的最佳呈现选择页面尺寸。例如，他们可能对文档的大部分页面使用 size: letter portrait;，但为了排版一张宽表格而改用 size: letter landscape;。

然而，将内容在不同宽度的页面之间流动是相对复杂的任务，目前许多流行的打印实现（尤其是网页浏览器）尚未完善解决该问题。page-orientation 描述符旨在帮助这些实现，使它们能够在单一一致的尺寸下进行布局，但在输出媒体（例如 PDF）中在布局后改变方向，以便希望以不同方向显示的页面能够实现该效果。

其值定义如下：

upright

不应用特殊方向；页面按常规布局和格式化。

rotate-left

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

rotate-right

与 rotate-left 相同，区别在于页面必须相对于其布局方向向右（顺时针）旋转四分之一圈进行显示。

注： 页边盒和其它定位内容与此属性没有特殊交互；它们将在未旋转的页面中按常规布局，然后与其它内容一同旋转。

7.2. 裁切和对位标记：marks 属性

此属性向文档添加裁切（crop）和/或对位（registration）标记。这些标记打印在 page box 之外，用于便于修边和对齐纸张。各值含义如下：

none

指定不打印裁切标记或对位标记：bleed area 之外的区域将完全为空白。

crop

指定应打印裁切标记。通常这些是位于 page box 之外的短线，实质上是 page box 四条边的延伸，从而指示这些边的精确位置，而不会在 page box 内或其附近放置墨水。

cross

指定应打印对位标记。通常这些是在 page box 每条边外的十字形标记，用于打印过程中的纸张对齐。

注意，只有当 page box 小于可打印区域时，裁切标记和对位标记才可见。

@page { marks: crop cross }

7.3. 出血区域：bleed 属性

此属性指定 page box 之外的 bleed area 的范围；换言之，指定了 page box 之外页面渲染被裁剪的范围。各值含义如下：

auto

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

<length>

指定 bleed area 在每个方向上相对于 page box 向外延伸的距离。值可以为负，但可能存在实现特定的限制。

7.4. 将不适合纸张的 page box 渲染到纸张上

如果 page box 与目标 page sheet 尺寸不匹配，用户代理应采取下列之一措施（按首选顺序）：

1. 在更大的 page sheet 上以指定尺寸渲染该 page box。
2. 如果旋转 90° 能使 page box 适配 page sheet，则对 page box 进行 90° 旋转。
3. 缩放 page box 以适配 page sheet。（应保持 page box 的纵横比。）
4. 以图形方式将 page box“切片”到多个 page sheet 上。
5. 裁剪溢出的内容（最不推荐）。

用户代理在执行这些操作前可能希望征询用户意见。

7.5. 在纸张上定位 page box

当 page box 小于 page sheet 时，用户代理应当：

• 将 page box 居中在纸张上，因为这将使双面页面对齐，并避免打印在纸张边缘附近的信息意外丢失；或
• 将 page box 放置在 page sheet 的左上角（或基于 page box 的 direction 和 writing-mode 属性而定的其它角落），因为这可能最小化介质消耗。

用户代理在这方面也可能希望征询用户意见。

8. 页面分页

CSS 分段模块 [CSS-BREAK-3] 定义了 CSS 盒子如何以及在何处可以被分段（fragmented），包括跨页面分页。它定义了一些属性，用于指示用户代理可在何处或必须在何处分页，以及随后的内容在哪一类页面（左页或右页）上继续。每个页面分页结束当前 page box 的布局，并导致文档树剩余部分在新的 page box 中继续布局。

8.1. 使用命名页面：page

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

注： 可以在 页面选择器 中使用相同的类型名称为该页面进行样式设置。

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

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

由于本规范的先前版本曾表明 page 属性被继承，仍然符合 CSS Paged Media Level 3 的实现可选择继承该属性并将 auto 始终视为命名空字符串。注意此例外将在第4级被移除。因此作者不应在具有非 auto 值的元素的后代上显式指定 auto，因为结果行为将不可预测。

page 属性的工作方式如下：

1. 首先，将任何 auto 值解析为相对于非 auto 的祖先（如上所述）。
2. 接下来，为每个盒子确定一个 start page 值 和 end page 值，它们分别是来自其第一个或最后一个子盒子（如果有）传播的值，否则为该盒子自身的使用值。当且仅当 page 属性适用于子盒子时，子盒子才会传播其自己的 start 或 end page value。

   注： 第一个或最后一个子 盒子 并不总是由第一个或最后一个子 元素 生成。例如，一个元素可能只有一个前置兄弟元素，其设置为 display: none，并未生成任何盒子。

3. 根的第一个打印页面的类型即为根的 start page value。
4. 如果在任何两个在 类 A 断点相接的盒子中，先行盒子的 end page value 与后续盒子的 start page value 不匹配，则在两盒子之间强制分页，并使分页后续内容在具有该命名类型的 page box 上继续。

注： 本质上，被比较的两个 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. 图像属性

Note: 本节已移至 [CSS-IMAGES-3]。

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

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

此列表定义了 page properties（页面属性）。 它们在 § 6 页面属性 中有进一步说明。

适用于边距上下文的 CSS 2.1 属性

此列表定义了 page-margin properties（页面边距属性）。 它们在 § 6 页面属性 中有进一步说明。

附录 B：传输可能性

在许多情况下（但并非总是），page box 与最终将文档呈现到其上的物理表面是一一对应的。CSS3 页面模型仅规定 page box 内的格式化，但将 page box 转移到纸张表面是用户代理的责任。一些不在 CSS3 中处理的用户代理传输方式包括：

• 将一个 page box 传输到一张纸（例如单面打印）；
• 将两个 page box 传输到同一张纸的正反两面（例如双面打印）；
• 将 N 个（较小的）page box 传输到一张纸（称为 “N-up”）；
• 将一个（较大）page box 传输到 N x M 张纸（称为“平铺”）；
• 创建签封（signatures）。signature 是一组打印在一张纸上的页面，折叠并修边后按书的顺序出现；
• 将一个文档打印到多个输出纸盘；
• 生成包含打印指令的文件。

隐私和安全注意事项

本规范未引入新的隐私或安全注意事项。

更改

自 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 Paged Media Level 3 提供了评审和评论。