CSS 分页媒体 - @page 规则

分页媒体与连续媒体的不同之处在于，文档的内容被分割成一页或多页离散的页面。分页介质包括纸张、透明胶片、计算机屏幕上显示的页面等。

CSS2 标准引入了一些基本的分页控制功能，使作者可以帮助浏览器确定如何最好地打印其文档。

CSS2 页面模型指定如何在具有有限宽度和高度的矩形区域（页面框）内格式化文档。这些功能分为两组 -

CSS2 功能定义特定的页面布局。
控制文档分页的 CSS2 功能。

定义页面：@page 规则

CSS2 定义了“页面框”，即呈现内容的有限尺寸的框。页面框是一个矩形区域，包含两个区域 -

页面区域- 页面区域包括该页面上布置的框。页面区域的边缘充当分页符之间发生的布局的初始包含块。
页边距区域- 它围绕页面区域。

您可以在 @page 规则中指定页面框的尺寸、方向、边距等。页面框的尺寸由“size”属性设置。页面区域的尺寸是页面框的尺寸减去页边距区域。

例如，以下 @page 规则将页面框大小设置为 8.5 × 11 英寸，并在页面框边缘和页面区域之间的所有边上创建“2cm”边距 -

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

您可以使用@page 规则中的margin、margin-top、margin-bottom、margin-left 和 margin-right属性来设置页面的边距。

最后，在@page规则中使用marks属性在目标纸张上的页面框之外创建裁剪和注册标记。默认情况下，不打印任何标记。您可以使用crop和cross关键字之一或两者来分别在目标打印页面上创建裁剪标记和套准标记。

设置页面大小

size属性指定页面框的大小和方向。有四个值可用于页面大小 -

auto - 页面框将设置为目标工作表的大小和方向。
景观- 覆盖目标的方向。页面框与目标大小相同，长边是水平的。
肖像- 覆盖目标的方向。页面框与目标大小相同，短边是水平的。
length - “size”属性的长度值创建一个绝对页面框。如果仅指定一个长度值，则会同时设置页面框的宽度和高度。“尺寸”属性不允许使用百分比值。

在以下示例中，页面框的外边缘将与目标对齐。“边距”属性的百分比值与目标尺寸相关，因此如果目标纸张尺寸为 21.0 厘米 × 29.7 厘米（即 A4），则边距为 2.10 厘米和 2.97 厘米。

<style type = "text/css">
   <!--
      @page {
         size: auto;   /* auto is the initial value */
         margin: 10%;
      }
   -->
</style>

以下示例将页面框的宽度设置为 8.5 英寸，高度设置为 11 英寸。本例中的页面框需要目标纸张尺寸为 8.5" × 11" 或更大。

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in;  /* width height */
      }
   -->
</style>

创建命名页面布局后，您可以通过将页面属性添加到稍后应用于文档中的元素的样式来在文档中使用它。例如，这种样式将文档中的所有表格呈现在横向页面上 -

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

由于上述规则，在打印时，如果浏览器在文档中遇到 <table> 元素，并且当前页面布局是默认的纵向布局，它将启动一个新页面并在横向页面上打印表格。

左页、右页和首页

打印双面文档时，左右页的页框应该不同。它可以通过两个 CSS 伪类来表示，如下所示 -

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

您可以使用 :first 伪类指定文档首页的样式 -

<style type = "text/css">
   <!--
      @page { margin: 2cm } /* All margins set to 2cm */

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

控制分页

除非另有指定，否则仅当页面格式更改或内容溢出当前页面框时才会出现分页符。要以其他方式强制或抑制分页符，请使用page-break-before、page-break-after和page-break-inside属性。

page -break-before和page-break-after 都接受auto、always、avoid、left和right关键字。

关键字auto是默认值，它允许浏览器根据需要生成分页符。关键字总是强制在元素之前或之后进行分页，而避免则禁止在元素之前或之后立即进行分页。left和right关键字强制一到两个分页符，以便元素呈现在左侧或右侧页面上。

使用分页属性非常简单。假设您的文档具有 1 级标题，并以 2 级标题开始新的章节来表示章节。您希望每一章都从一个新的右侧页面开始，但您不希望章节标题与后续内容隔着分页符分开。您可以使用以下规则来实现这一点 -

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

仅将auto和escape值与page-break-inside属性一起使用。如果您希望表格尽可能不跨页分解，您可以编写规则 -

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

控制寡妇和孤儿

在印刷术语中，孤行是由于分页符而滞留在页面底部的段落行，而寡行是分页符后保留在页面顶部的行。一般来说，单行文本滞留在顶部或底部的打印页面看起来并不吸引人。大多数打印机尝试在每页的顶部或底部留下至少两行或更多行文本。

orphans属性指定必须保留在页面底部的段落的最小行数。
widows属性指定必须保留在页面顶部的段落的最小行数。

以下示例在每页底部创建 4 行，在顶部创建 3 行 -

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>