分頁媒體與連續媒體的不同之處在於,文檔內容被拆分爲一個或多個離散頁面。分頁媒體包括紙張、透明膠片、顯示在計算機螢幕上的頁面等。
CSS2標準引入了一些基本的分頁控制特性,這些特性允許作者幫助瀏覽器找出如何最好地列印文檔。
CSS2頁面模型指定如何在具有有限寬度和高度的矩形區域(即頁面框)中格式化文檔。這些特徵分爲兩組;
- CSS2 features that define a particular page layout.
- CSS2 features that control the pagination of a document.
Defining Pages : the @page rule
CSS2定義了一個「頁面框」,這是一個有限維的框,內容在其中呈現。頁面框是一個矩形區域,包含兩個區域−
頁面區域−頁面區域包括該頁上列出的框。頁面區域的邊緣用作分頁符之間發生的布局的初始包含塊。
頁邊距區域−包圍頁面區域。
您可以在@page規則中指定頁面框的尺寸、方向、邊距等。頁面框的維度是用「size」屬性設置的。頁面區域的尺寸是頁面框的尺寸減去邊距區域的尺寸。
例如,下面的@page規則將頁框大小設置爲8.5倍11英寸,並在頁框邊緣和頁區域之間的所有邊上創建「2cm」邊距;
<style type = "text/css"> <!-- @page { size:8.5in 11in; margin: 2cm } --> </style>
您可以使用@page規則中的頁邊距、頁邊距頂部、頁邊距底部、頁邊距左側和頁邊距右側屬性來設置頁面的頁邊距。
最後,在@page規則內使用marks屬性在目標工作表的頁面框外創建裁剪和註冊標記。默認情況下,不列印標記。您可以使用一個或兩個裁剪和交叉關鍵字分別在目標列印頁上創建裁剪標記和註冊標記。
Setting Page Size
size屬性指定頁框的大小和方向。有四個值可用於頁面大小−
auto−頁面框將設置爲目標工作表的大小和方向。
橫向覆蓋目標的方向。頁面框的大小與目標相同,較長的邊是水平的。
縱向覆蓋目標的方向。頁面框與目標大小相同,較短的邊是水平的。
length−size屬性的長度值創建一個絕對頁框。如果只指定了一個長度值,則它將設置頁框的寬度和高度。「size」屬性不允許使用百分比值。
在下面的示例中,頁面框的外邊緣將與目標對齊。「margin」屬性的百分比值與目標大小有關,因此如果目標圖紙尺寸爲21.0cm×29.7cm(即A4),則邊距爲2.10cm和2.97cm。
<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>元素,並且當前頁面布局是默認的縱向布局,則會啓動新頁面並在橫向頁面上列印該表。
Left, Right, and First pages
列印雙面文檔時,左右頁的頁框應該不同。它可以通過兩個CSS僞類來表示,如下所示−
<style type = "text/css"> <!-- @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } --> </style>
您可以使用:first pseudo class−指定文檔第一頁的樣式;
<style type = "text/css"> <!-- @page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ } --> </style>
Controlling Pagination
除非另行指定,否則只有當頁面格式更改或內容溢出當前頁面框時才會發生分頁符。若要強制或禁止分頁符,請在屬性中使用分頁符before、分頁符after、和分頁符。
在之前分頁符和在之後分頁符都接受自動、始終、避免、左、和右關鍵字。
關鍵字auto是默認值,它允許瀏覽器根據需要生成分頁符。關鍵字always在元素之前或之後強制換頁,而avoid在元素之前或之後禁止換頁。left和right關鍵字強制一個或兩個分頁符,以便元素呈現在左側或右側頁面上。
使用分頁屬性非常簡單。假設您的文檔有一級標題,則用二級標題開始新的章節以表示節。您希望每一章都從一個新的右側頁面開始,但不希望將節標題拆分爲後續內容的分頁符。您可以使用以下規則來實現這一點−
<style type = "text/css"> <!-- h1 { page-break-before : right } h2 { page-break-after : avoid } --> </style>
僅使用auto和avoid值以及分頁符內的屬性。如果您希望您的表在可能的情況下不被分頁,那麼您可以編寫規則−
<style type = "text/css"> <!-- table { page-break-inside : avoid } --> </style>
Controlling Widows and Orphans
在印刷行話中,孤兒是由於分頁符而滯留在頁面底部的段落行,而寡婦是分頁符後留在頁面頂部的行。通常情況下,列印的頁面在頂部或底部有一行文字,看起來不太吸引人。大多數印表機試圖在每頁的頂部或底部保留至少兩行或多行文本。
orphans屬性指定必須留在頁面底部的段落的最小行數。
widows屬性指定必須留在頁面頂部的段落的最小行數。
下面是在每頁底部創建4行,在頂部創建3行的示例−