ページ化されたメディア（例: 紙、トランスペアレンシー、コンピュータ画面に表示されるページなど）は、文書の内容が1つ以上の個別ページに分割されている点で、連続メディアとは異なります。CSS 2.2では、ページボックスに設定されるページマージンや改ページの宣言方法について説明しています。
ユーザーエージェントは、文書のページボックスを最終的にレンダリングされる実際のシート（紙、トランスペアレンシー、画面など）に転送する責任があります。多くの場合、ページボックスとシートは1対1の関係にありますが、必ずしもそうではありません。転送の方法には以下が含まれます:
ページボックスは、次の2つの領域を含む長方形の領域です:
ページボックスのサイズはCSS 2.2では指定できません。
著者は、@pageルール内でページボックスのマージンを指定できます。@pageルールは、「@page」というキーワードに続いてオプションのページセレクター、さらに宣言と@ルールを含むブロックで構成されます。@pageトークンとページセレクターの間、ページセレクターとブロックの間にはコメントや空白が許可されていますが、オプションです。@pageルールの宣言はページコンテキスト内にあると言われます。
注: CSS レベル 2には@page内に記述できる@ルールはありませんが、これらの@ルールはレベル 3で定義される予定です。
ページセレクターは、どのページに宣言が適用されるかを指定します。CSS 2.2では、ページセレクターは最初のページ、すべての左ページ、またはすべての右ページを指定することができます。
CSS 2.2では、マージンプロパティ（'margin-top', 'margin-right', 'margin-bottom', 'margin-left', および 'margin'）のみがページコンテキスト内で適用されます。次の図は、シート、ページボックス、ページマージン間の関係を示しています:
以下は、すべてのページのページマージンを設定する単純な例です:
@page {
margin: 3cm;
}
ページコンテキストにはフォントの概念がないため、'em'や'ex'単位は許可されません。マージンプロパティのパーセンテージ値はページボックスの寸法に対して相対的です。左および右のマージンではそれらはページボックスの幅を指し、上部および下部のマージンではそれらはページボックスの高さを指します。CSS 2.2プロパティに関連付けられている他のすべての単位が許可されています。
負のマージン値（ページボックスまたは要素上）や絶対位置指定により、内容がページボックスの外に出る可能性がありますが、この内容はユーザーエージェント、プリンター、または最終的には紙裁断機によって「切り取られる」ことがあります。
両面印刷を行う場合、ページボックスが左ページと右ページで異なることがあります。これは、ページセレクターで使用できる2つのCSS疑似クラスを通じて表現できます。
すべてのページは、ユーザーエージェントによって自動的に:leftまたは:right疑似クラスに分類されます。 文書の最初のページが:leftになるか:rightになるかは、ルート要素の主要な書字方向に依存します。例えば、主要な書字方向が左から右の文書の最初のページは:rightページとなり、右から左の文書の最初のページは:leftページとなります。文書を明示的に左ページまたは右ページから印刷を開始するように強制するには、改ページを挿入して最初に生成されるボックスの前に配置します。
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
左ページと右ページに異なる宣言が指定されている場合、ユーザーエージェントは、ページボックスを左ページと右ページに転送しない場合でも（例: 片面印刷のみを行うプリンター）、これらの宣言を尊重する必要があります。
著者は、:first 疑似クラスを使用して文書の最初のページのスタイルを指定することもできます:
@page { margin: 2cm } /* すべてのマージンを2cmに設定 */
@page :first {
margin-top: 10cm /* 最初のページの上マージンを10cmに設定 */
}
:leftまたは:right @pageルールで指定されたプロパティは、疑似クラスが指定されていない@pageルールで指定されたプロパティを上書きします。 :first @pageルールで指定されたプロパティは、:leftまたは:right @pageルールで指定されたプロパティを上書きします。
強制的な改ページが最初に生成されるボックスの前に発生した場合、CSS 2.2では':first'が改ページ前の空白ページに適用されるのか、改ページ後のページに適用されるのかは未定義です。
左ページ、右ページ、最初のページにおけるマージン宣言は、ページ領域の幅を異ならせる可能性があります。実装を簡素化するために、ユーザーエージェントは左ページ、右ページ、最初のページで単一のページ領域幅を使用することができます。この場合、最初のページのページ領域幅が使用されるべきです。
ページモデルでコンテンツをフォーマットする際、一部のコンテンツが現在のページボックスの外に配置される場合があります。例えば、'white-space'プロパティの値が'pre'となっている要素は、ページボックスよりも幅の広いボックスを生成することがあります。別の例として、ボックスが絶対位置または相対位置に配置される場合、「不都合な」位置に配置されることがあります。例えば、画像がページボックスの端やページボックスの100,000メートル下に配置される場合です。
そのような要素の正確なフォーマットはこの仕様の範囲外です。ただし、ページボックス外の内容に関して、著者およびユーザーエージェントが次の一般原則を守ることを推奨します:
このセクションでは、CSS 2.2における改ページについて説明します。5つのプロパティが、ユーザーエージェントが改ページを行うべき場所、またその後のコンテンツを（左または右の）どのページで再開すべきかを示します。各改ページは現在のページボックスでのレイアウトを終了し、文書ツリーの残りの部分を新しいページボックスにレイアウトします。
| 名前: | page-break-before |
|---|---|
| 値: | auto | always | avoid | left | right | inherit |
| 初期値: | auto |
| 適用対象: | ブロックレベル要素（ただし、テキストを参照） |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, ページ化 |
| 計算値: | 指定通り |
| 名前: | page-break-after |
|---|---|
| 値: | auto | always | avoid | left | right | inherit |
| 初期値: | auto |
| 適用対象: | ブロックレベル要素（ただし、テキストを参照） |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, ページ化 |
| 計算値: | 指定通り |
| 名前: | page-break-inside |
|---|---|
| 値: | avoid | auto | inherit |
| 初期値: | auto |
| 適用対象: | ブロックレベル要素（ただし、テキストを参照） |
| 継承: | いいえ |
| パーセンテージ: | N/A |
| メディア: | 視覚, ページ化 |
| 計算値: | 指定通り |
これらのプロパティの値は次の意味を持ちます:
準拠するユーザーエージェントは、'left'および'right'の値を'always'として解釈する場合があります。
潜在的な改ページの場所は、通常、親要素の'page-break-inside' プロパティ、前の要素の'page-break-after'プロパティ、および次の要素の'page-break-before'プロパティの影響を受けます。これらのプロパティが'auto'以外の値を持つ場合、'always'、'left'、および'right'の値が'avoid'よりも優先されます。
ユーザーエージェントは、これらのプロパティをルート要素の通常のフロー内のブロックレベル要素に適用する必要があります。また、'table-row'要素などの他の要素にも適用する場合があります。
改ページがボックスを分割する場合、ボックスのマージン、ボーダー、およびパディングは分割が発生する場所で視覚的な影響を与えません。
| 名前: | orphans |
|---|---|
| 値: | <integer> | inherit |
| 初期値: | 2 |
| 適用対象: | ブロックコンテナ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚, ページ化 |
| 計算値: | 指定通り |
| 名前: | widows |
|---|---|
| 値: | <integer> | inherit |
| 初期値: | 2 |
| 適用対象: | ブロックコンテナ要素 |
| 継承: | はい |
| パーセンテージ: | N/A |
| メディア: | 視覚, ページ化 |
| 計算値: | 指定通り |
'orphans' プロパティは、ページの下部に残しておく必要があるブロックコンテナ内の最小行数を指定します。また、'widows' プロパティは、ページの上部に残しておく必要があるブロックコンテナ内の最小行数を指定します。それらを使用して改ページを制御する例を以下に示します。
正の値のみが許可されます。
段落のフォーマットに関する情報については、行ボックスのセクションを参照してください。
通常のフローでは、改ページは以下の場所で発生する可能性があります:
注: CSS3では、強制的な改ページ後に関連する'margin-top'が適用される（つまり、'0'に設定されない）ことが指定されると予想されています。
これらの改ページは次の規則に従います:
上記がページボックスからのコンテンツのオーバーフローを防ぐための十分な改ページポイントを提供しない場合、追加の改ページポイントを見つけるために規則A、BおよびDが削除されます。
それでも十分な改ページポイントが見つからない場合、さらに規則Cも削除され、さらに多くの改ページポイントを見つけることが試みられます。
改ページは、(1) において必ず発生しなければなりません。もし、ここで出会うボックスを生成するすべての要素の'page-break-after'および'page-break-before'プロパティの中に、少なくとも1つ以上の値が'always'、'left'、または'right'である場合。
CSS 2.2は、一連の許容される改ページの中でどれを使用すべきかを定義していません。CSS 2.2は、すべての可能な改ページポイントで改ページを行うこと、または全く改ページを行わないことを禁止しません。しかし、CSS 2.2は、ユーザーエージェントが以下のような経験則を考慮することを推奨しています（これらは時に矛盾することを認識しながら）：
例えば、スタイルシートに'orphans: 4'、'widows: 2'が含まれており、現在のページの下部に20行の行ボックスが利用可能であると仮定します:
次に、'orphans'が'10'であり、 'widows'が'20'であり、 現在のページの下部に8行が利用可能であると仮定します:
ページコンテキスト内の宣言は、通常のCSS宣言と同様にカスケードに従います。
次の例を考えてみましょう:
@page {
margin-left: 3cm;
}
@page :left {
margin-left: 4cm;
}
より高い特異性を持つ疑似クラスセレクターのため、左ページの左マージンは'4cm'になり、その他すべてのページ（つまり右ページ）は左マージンが'3cm'になります。