1. はじめに
- ページ区切りがどのように作成され回避されるか;
- ページのプロパティ(サイズ、向き、余白、境界線、パディングなど)がどのように指定されるか;
- ヘッダーとフッターがページ余白内にどのように設けられるか; および
- ページカウンタなどのコンテンツがヘッダーやフッターにどのように配置されるか;
このモジュールは、文書が有限の幅と高さを持つ矩形領域(page box と呼ばれる)内でどのように整形されるかを指定する ページモデル を定義します。
CSS3 はユーザーエージェントがページボックスをシートにどのように転送するかを規定しませんが、意図したページシートの サイズと向き をユーザーエージェントに伝えるためのいくつかの仕組みを含みます。一般的な場合、CSS3 は1つのページボックスが同様のサイズの1面に転送されることを想定します。
注: [CSS-BREAK-4] 仕様は、フラグメンテーション(ページ分割) の制御、例えば break-before、break-after、break-inside、widows、および orphans といったプロパティを扱います。
1.1. 値の定義
本仕様は、CSS プロパティ定義の慣例([CSS2])に従い、値定義構文 を [CSS-VALUES-3] から用います。 本仕様で定義されていない値の型は、CSS Values & Units([CSS-VALUES-3])で定義されています。 他の CSS モジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。
各プロパティ固有の定義に列挙された値に加えて、本仕様で定義されるすべてのプロパティは、プロパティ値として CSS-wide キーワード を受け入れます。可読性のため、それらはここでは繰り返して明示していません。
2. ページ用語
次の用語と図はページモデルを説明するのに役立ちます:
- ページシート
-
ページシートは物理媒体の1つの表面です。右の図はページシートの左上隅の表現を示しています。
- 印刷可能領域と非印刷領域
- 非印刷領域は、プリンタの用紙取り扱い機構などの理由で物理デバイスが確実に印字できないページシートの領域です。この値はプリンタ依存であり、通常ページシートの各端に沿った小さな領域です。印刷可能領域は、プリンタが確実に印字できるページシートの領域です。印刷可能領域のサイズは、ページシートのサイズから非印刷領域のサイズを差し引いたものになります。ユーザーエージェントは特定の印刷デバイスについてこの領域の寸法を知らない場合がありますが、寸法が分かる場合は、コンテンツが印刷可能領域内に収まるように文書の整形を調整することができます。この調整がどのように行われるかは、セクション § 7.4 シートに収まらないページボックスのレンダリング および § 3.2 ページボックスの外側のコンテンツ に表現された制約の範囲内でデバイス依存です。
- ページの向き
- ページの向きは page box の辺の長さを比較して定義されます。ページボックスは長辺と短辺と呼ばれる2つの直交する辺を持つ長方形です。長辺の長さは常に短辺の長さ以上です。ページボックスが正方形の場合、両辺は同じ長さであり、どちらを長辺としてもかまいません。本仕様は portrait と landscape のページ向きを定義します。
- 縦向き(Portrait)
- 縦向きページは高さが幅以上です。水平要素は短辺と平行に配置され、垂直要素は長辺と平行に配置されます。
- 横向き(Landscape)
-
横向きページは幅が高さ以上です。水平要素は長辺と平行に配置され、垂直要素は短辺と平行に配置されます。
注: CSS3 は landscape と reverse-landscape の区別を行いません。ただし将来の CSS では区別する可能性があります。デュプレックス印刷の整形時には、UAs は製本側、ページ進行、および読みやすさを考慮して landscape と reverse-landscape のどちらを選ぶかを検討するべきです。
- 両面印刷(Duplex Printing)
- 両面印刷はページシートの各面に1つずつページボックスを印刷し、ページシートの両面を使用します。このモジュールは文書が両面印刷されるかどうかを指定する手段を提供しませんが、left および right ページの概念は、文書が実際に両面印刷されているかどうかにかかわらず、両面印刷であることを前提にしています。
- 製本側(Binding Edge)
- 製本側は、資料が製本されている場合に製本側に向かうページボックスの辺です。製本側は通常、製本に使われるスペースを確保するために反対側の辺より大きな余白を持ちます。製本側は4つの辺のいずれでもあり得ます。ただし、ページシートは通常、縦向きページボックスの製本側が垂直になるように製本されます。このモジュールは製本側を指定する方法を提供しません。両面印刷では、製本側は左右のページでページボックスの反対側にあります。
- 見開きページ(Facing Pages)
- 見開きページは連続する2ページで、両面印刷すると別々の紙の面に配置されるページです。通常、早い方のページはあるシートの裏面で、後のページは別のシートの表面になります。通常、見開きページは製本側が垂直かつ隣接するように配置されます。
- 左ページ
- 通常の見開きレイアウトで左に来るページです。左から右へのページ進行を使用する文書のページレイアウトでは、見開きの早い方のページが左になります。左ページに特有の規則は :left page selector を使って指定できます。
- 右ページ
- 通常の見開きレイアウトで右に来るページです。右から左へのページ進行を使用する文書では、見開きの早い方のページが右になります。右ページに特有の規則は :right page selector を使って指定できます。
3. ページモデル
ページ化メディア(paged media)の整形モデルでは、文書は1つ以上の page box に転送されます。page box は、用紙のページのような矩形の印刷媒体面に対応する特殊な CSS
ボックスです。これは大まかに viewport に類似します。 
他の CSS の ボックス と同様に、page box は margin, border, padding, content 領域で構成されます。page box の content と margin 領域には特別な機能があります:
CSS 2.1 では、page box と page area の両方が単純な長方形でした。どちらもマージン、境界線、パディングを持つ CSS ボックスではありませんでした。この CSS ボックスは page box および page area とは別であるべきであり、それぞれがその margin area と content area になるでしょう。命名のアイデアはありますか?
- page box のコンテンツ領域は page area と呼ばれます。 文書の内容は1つ以上の page box にフローされます。page area は、与えられた page box 内に配置されるルート要素およびその子孫によって生成されるすべてのボックスのコンテナとして機能します。最初のページの page area の辺は、文書の初期の containing block を確立する矩形を設定します。
- page box の margin area は16個の page-margin boxes に分割されます。 各 page-margin box は独自の margin、border、padding、および content 領域を持ちます。page-margin boxes は通常、ランニングヘッダーやフッターを表示するために使用されます。
page box のプロパティは、page context(これは 宣言ブロック であり @page ルールのものです)内に宣言されたプロパティによって決定されます。同様に、page-margin box のプロパティは、その margin context 内に宣言されたプロパティによって決定されます。page context における宣言は page box に影響を与えたり page-margin boxes へ継承したりできますが、文書のルート要素やその他のコンテンツには適用または継承されません。
page box の containing block は、size プロパティを page context 内で使用して指定されます。page box の幅と水平マージンは、非置換ブロック要素の通常フローにおける計算と同様に正確に計算されます。[CSS2] page box の高さと垂直マージンも同様に計算されます(ブロックの高さの式を使う代わりに)。どちらの場合も値が過剰に制約されるとき、いずれかのマージンを無視するのではなく、containing block は page box のマージン端と一致するようにサイズ変更されます。
3.1. ページの背景と描画順序
ページの内容を描画する際、ページのレイヤーは以下の描画順で塗られます(下層が先):
- ページ背景
- 文書キャンバス
- ページの境界線
- 文書の内容
- ページ余白ボックス
ページモデルにおいて、ページ背景はルート背景と類似して振る舞います: その 背景描画領域 は ブリード領域 であり、マージンを含むページボックス全体を覆います(background-clip に関係なく)。ページ背景はデフォルトでページボックスのパディング領域内に固定され(UA が [CSS-BACKGROUNDS-3] をサポートしている場合は background-origin を尊重します)。しかし background-attachment が fixed の場合、イメージはマージンを含む page box に対して位置決めされます(つまり 背景位置決め領域 はページのマージンボックスになります)。
文書キャンバスの背景は page box の背景として描かれます: デフォルトではその 背景描画領域 は page box の border box を覆い、[CSS-BACKGROUNDS-3] をサポートする UA ではルート要素に指定された background-clip の値に従います。それでもなお、背景は通常どおりルート要素または page area に関して位置決めされます。
ページ余白ボックスに関して、文書キャンバス、ページ境界線、および文書のすべての内容は z-index 値が 0 の単一の要素として扱われ、スタッキングコンテキスト を確立します [CSS2]:
ページ余白ボックスは文書内容の一部やキャンバスとの間に交差して描画されることは決してありません。ページ余白ボックスは文書内容の前面か文書キャンバスの背面にのみ描画されます。ページ背景は常に他のすべての下に描かれます。
z-index プロパティは page-margin boxes に適用されます。ページ余白ボックスには position プロパティが適用されないため、z-index は、position プロパティの値に関係なく、あたかも positioned 要素であるかのように常に page-margin boxes に影響します。各 page-margin box は常にスタッキングコンテキストを確立します。
page-margin boxes 同士のデフォルトの描画順序、つまり CSS2.1 付録 E の "ツリー順" は次のとおりです:
- @top-left-corner
- @top-left
- @top-center
- @top-right
- @top-right-corner
- @right-top
- @right-middle
- @right-bottom
- @bottom-right-corner
- @bottom-right
- @bottom-center
- @bottom-left
- @bottom-left-corner
- @left-bottom
- @left-middle
- @left-top
まず @top-left-corner から始め、時計回りに進みます。この順序は任意ですが、z-index で上書きできます。ページ余白ボックスが重なる場合にのみ視覚的な効果がありますが、多くの場合そのような重なりは発生しないはずです。
3.2. ページボックスの外側のコンテンツ
ページモデルでコンテンツを整形する際、一部のコンテンツが page box の外に出ることがあります。例えば、white-space プロパティが pre の値を持つ要素は、page box よりも広いボックスを生成することがあります。別の例として、ボックスが絶対位置や相対位置で配置されると、不都合な位置に配置される場合があります。例えば、画像が page box の端に配置されたり、page box の下方 100,000 メートルの位置に配置されたりすることがあります。
そのような要素の正確な整形に関する仕様は本書の範囲外です。ただし、著者とユーザーエージェントは、ページボックスの外側のコンテンツに関して次の一般原則に従うことを推奨します:
- ページが「ブリード」できるように、コンテンツはページボックスを少し越えて許容されるべきです。
-
ユーザーエージェントは要素の位置決めを尊重するために大量のコンテンツ空ページを生成することを避けるべきです(SHOULD)(例:100ページの空白ページを印刷するのは著者やユーザーの意図ではないでしょう)。コンテンツ空ページ(Content-empty
page) は、ページエリアに背景や境界線以外の印刷可能なコンテンツを含まない page box です。ページエリアが生成コンテンツを含む場合や、 のような表示が不可視のコンテンツ、ゼロ幅スペースのような不可視コンテンツを含む page box
はコンテンツ空ページではありません。一方、背景および/または境界線および/または page-margin box のコンテンツのみを含むページはコンテンツ空ページです。
ただし、page-break-before/break-before および page-break-after/break-after の強制的な改ページ値を尊重するために少数の空の page box を生成することが時に必要であることに注意してください。 [CSS2] [CSS-BREAK-3]
-
著者はレンダリングを回避するために要素を不都合な位置に配置するべきではありません(SHOULD NOT)。代わりに:
- ボックスの生成を完全に抑止するには、display プロパティを none に設定します。
- ボックスを不可視にするには、visibility プロパティを設定します。
- 本仕様はページボックスの外に配置されたボックスをどのように扱うかを定義しません。可能性としては、それらを破棄するか、文書の末尾に対してそれらのための page box を作成するなどが考えられます。
3.3. ページ進行
CSS は、文書が両面印刷であるかどうかに関係なく、すべての文書で左ページと右ページを区別します。各左ページは右ページに続き、その逆も同様です。左ページと右ページは :left および :right 疑似クラス を使って異なるスタイルにできます。
文書の最初のページが左ページか右ページかは、文書のページ進行によって決まります。ページ進行(page progression) は、文書の印刷ページが横並びに配置されたときにどの方向に順序付けられるかの方向です。例えば、英語や横組みの日本語は通常左から右へ進行し、アラビア語や縦組みの日本語は通常右から左へ進行します。
ページ進行方向は次のように決定されます:
- テキストが横方向の行でレイアウトされている場合、ページ進行 は インラインの基底方向(inline base direction) と同じです。
- テキストが縦方向の行でレイアウトされている場合、ページ進行 は ブロックフロー方向(block flow direction) と同じです。
UA が CSS 3 Writing Modes Module の direction と writing-mode プロパティをサポートする場合、ページ進行は 決定 され、ページ進行 は 主たる書字方向(principal writing mode) によって決定されます。
左から右への ページ進行
を持つ文書では、文書の最初のページは右ページになり、その逆も同様です。文書を明示的に左ページまたは右ページから印刷を開始させたい場合、著者はルートにページ区切りを伝搬させる break-before の値を指定できます。[CSS-BREAK-3] この場合、UA
は最初の(空の)ページを抑制しなければなりません(そして :first 疑似クラスは最初に印刷されるページにマッチします)。
html { break-before: always }
左から右へのページ進行を持つ HTML 文書では、上記のスタイルルールにより文書の最初のページは ':left' ページで印刷されます
html { break-before: left }
HTML 文書では、上記のスタイルルールにより文書の最初のページはページ進行に関係なく ':left' ページで印刷されます。
4. ページセレクタとページコンテキスト
4.1. @page ルール
著者は @page ルール内で、ページボックスの寸法、向き、余白などのさまざまな側面を指定できます。@page ルールは ルールセットが許される場所 であればどこでも許可されます。 @page ルールはキーワード @page、オプションのカンマ区切りの ページセレクタ のリスト、および宣言ブロック(page context と呼ばれる)で構成されます。 @page ルールは宣言の間に他の at-ルールを含むこともできます。 本仕様の現行レベルでは、margin at-rules のみが @page 内で許可されています。
@page で セレクタリストを持たないルールはすべてのページに適用されます。 他の @page ルールは、そのセレクタの少なくとも1つに一致するページに適用されます。 page context 内で宣言されたプロパティはページボックスに適用されます。
ページまたはマージンコンテキスト内の宣言ブロックの処理中にエラーが発生した場合、構文解析エラー処理の規則 が適用されます。つまり、そのブロック内の有効な宣言は適用されます。
4.2. ページセレクタ
ページセレクタ は、 ページタイプセレクタ または ページ擬似クラス のいずれかで構成され、それに続いて 0 個以上の追加の ページ擬似クラス が続きます。 セレクタのコンポーネント間には空白は許されません。 <page-selector> の文法と例は以下に示されています。
ページセレクタ は、そのすべての構成要素がページに一致する場合に限り、一致すると言われます。
ページタイプセレクタ は大文字小文字を区別する CSS 識別子 です。 それは named page type を生成する page プロパティで生成されるページに一致します。 ページタイプ名 auto(ASCII 大文字小文字区別なし)はルールを無効にしませんが、決して一致してはならないことに注意してください。
ページ擬似クラス は ASCII 大文字小文字区別なし であり、通常のセレクタにおける 擬似クラス と同じ構文を持ちます。 [SELECT] さまざまな ページ擬似クラス は以下で定義されています。
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;
}
左ページと右ページに異なる宣言が与えられている場合、ユーザーエージェントはページボックスを左・右のシートに転送しないプリンタであっても(すなわち媒体の片面にのみ印刷するプリンタであっても)これらの宣言を尊重し、正しく整形された出力を生成しなければなりません。
4.2.2. 最初のページ擬似クラス: :first
:first 擬似クラスは文書の最初に印刷されるページに一致します。
4.2.3. 空白ページ擬似クラス: :blank
:blank 擬似クラスは、強制改ページの結果として現れる コンテンツ空ページ に一致します。
h1 { break-before: left }
@page :blank {
@top-center { content: "This page is intentionally left blank" }
}
:blank に一致するページは、他のページ擬似クラスにも一致することがあります。
もし全ての右ページにヘッダが指定されている場合、空白の右ページは :blank と :right
の両方に一致します。したがって、右ページに設定した余白ボックスは、空白ページに不要であれば取り除く必要があります。以下は、空白ページからトップ中央のヘッダのみを除き、ページ番号は残す例です:
h1 { break-before: left }
@page :blank {
@top-center { content: none }
}
@page :right {
@top-center { content: "Preliminary edition" }
@bottom-center { content: counter(page) }
}
:blank は :right より高い 特異性 を持つため、content: none が
content: "Preliminary edition" より前に書かれていてもトップ中央ヘッダは削除されます。
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 properties と margin at-rules のみを含めることができます。
-
margin at-rules は page-margin properties のみを含めることができます。
@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }
以下は page-margin boxes の例で、宣言ブロックは意図的に空欄です。
@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. ページコンテキストにおけるカスケード
ページおよびマージンコンテキスト内の宣言は要素のためのスタイル規則内の宣言と同様に カスケード します。
特異性(specificity) は、Selectors モジュールで定義された計算方法に類似した方法で計算されます:
-
ページタイプ名の数を数える (= f)
ページセレクタの構文を考えると、f は 0 か 1 のいずれかしかあり得ません。
- ':first' または ':blank' 擬似クラスの数を数える (= g)
- ':left' または ':right' 擬似クラスの数を数える (= h)
注: 同じ擬似クラスの繰り返し出現は許可され、特異性を増加させます。
記憶領域の制限のため、実装は f、g、または h の大きさに制限を持つ場合があります。その場合、制限より大きい値はその制限にクランプされ、オーバーフローしてはなりません。
特異性は3つの成分 (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;
}
擬似クラスセレクタの方が特異性が高いため、左ページの左余白は 4cm になり、他のすべてのページ(右向きページ)は左余白が 3cm になります。
@page :first {
color: green;
@top-left {
content: "foo";
color: blue;
}
@top-right {
content: "bar";
}
}
@page { color: red;
@top-center {
content: "Page " counter(page);
}
}
ページコンテキストはカスケードするため、次のスタイルシートはページ余白を25mm、page-margin boxes 内のフォントサイズを14pt にスタイルします:
@page { margin: 25mm;}
@page { font-size: 14pt;}
5. ページ余白ボックス
ページ余白ボックスはページ余白内のボックスで、疑似要素のように生成コンテンツを含めることができます。
ページ余白ボックスは、ページ番号や文書タイトルなどの補助情報のために確保されたページの一部であるページヘッダーやフッターを作成するために使用できます。
ページフッター は通常、ページヘッダーと反対側の端にあります。 例えば、ページヘッダーがページ上部にある水平書字の文書のデザインでは、ページフッターとして @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right および @bottom-right-corner のページ余白ボックスを使うことができます。 垂直書字の文書のデザインでは、ページフッターとしてページの製本側にあるページ余白ボックスを使うことが考えられます。
ページ余白ボックスはページエリアに対して位置決めされ、ページの向きには依存しません。たとえば、上側のページ余白ボックスは縦向きでも横向きでもページエリアの上方にあります。 様々なページ余白ボックスは以下の図で定義および示されています:
| ボックス | 説明 | 配置 |
|---|---|---|
| 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. ページ余白ボックスのための at-ルール
ページ余白ボックスは margin at-rules によって page context の内部で作成されます。 著者はこれらのルールを page context 内の宣言の後に置くべきです。レガシークライアントは margin at-rules の後の宣言を正しく扱えない場合があるためです。
margin at-rule は ページ余白ボックス(例: @top-left)を識別する at-ルールであり、ディスクリプタのブロック(margin context と呼ばれる)を持ちます。
次のスタイルシートは、左側にタイトル("Hamlet")を、右側に "Page " とページ番号を先頭に付けたページ番号を含むページヘッダーを確立します:
@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 プロパティはページ余白ボックスには適用されません。
@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 の適用規則はページ余白ボックスにも適用され、指定された幅や高さが制約に違反する場合には幅・高さ・マージンの再計算を引き起こす可能性があります。UA が min-height または min-width をサポートしない場合、これらは常に 0 として扱わなければなりません。
5.3.1. ページ余白ボックスレイアウト用語
CSS2.1 のボックスモデル定義および CSS Sizing のサイズ用語に加えて、以下の用語が後続の計算で使用されます:
- 利用可能幅
- ページの左ボーダー幅、左パディング、ページエリアの幅、右パディング、および右ボーダー幅の合計。言い換えれば、page box の左右のボーダー端間の距離です。これは上部および下部のページ余白ボックスの寸法を計算する際に使用されます。
- 利用可能高さ
- ページの上ボーダー幅、上パディング、ページエリアの高さ、下パディング、および下ボーダー幅の合計。言い換えれば、page box の上下のボーダー端間の距離です。これは左および右のページ余白ボックスの寸法を計算する際に使用されます。
- 外側幅
- outer edge の幅、CSS-BOX-3 で定義されるもの。
- min-content 幅
- 物理的な幅として、min-content block size または min-content inline size のうち該当する方。
- max-content 幅
- 物理的な幅として、max-content block size または max-content inline size のうち該当する方。
- 外側最小幅
- outer width に似ていますが、計算された width が auto の場合に min-content width を使用する点が異なります。
- 外側最大幅
- outer width に似ていますが、計算された width が auto の場合に max-content width を使用する点が異なります。
ページ余白ボックスの containing block はその位置によって異なります:
コーナーのページ余白ボックスの場合、それはそのコーナーで交差する2つのページ余白によって定義される矩形です。
その他のすべてのページ余白ボックスの場合、containing block は、被包囲するページ余白から隣接するコーナーのページ余白ボックスの containing block を差し引いた矩形です。つまり、この containing block の大きさは一方の次元では使用されたページ余白によって与えられ、もう一方の次元では top/bottom 用には利用可能幅、left/right 用には利用可能高さによって与えられます。
5.3.2. ページ余白ボックスの可変寸法計算ルール
以下の規則は @top-left, @top-center および @top-right のページ余白ボックス(本節ではそれぞれ A, B, C と呼ぶ)に適用されます。
5.3.2.1. マージン
3つのボックスのいずれかの margin-left または margin-right が計算結果で auto になる場合、その使用値はゼロになります。
5.3.2.2. auto 幅の解決
以下のアルゴリズムは各ボックスの使用幅を決定します。ここでは、生成されないボックスは幅と外側幅がゼロであると仮定します。
注: 高レベルの目標は(優先順に)中央ボックス B を中央に配置すること、オーバーフローと重なりを最小化すること、コンテンツ量に比例してスペースを割り当てることです。
中央ボックス B が生成されていない場合、利用可能幅を A と C に次のように分配します:
- もし一つのボックスだけが 'width: auto' の場合、 その使用幅は、outer width の合計が available width と等しくなるように解決されます。
-
A と C の両方が 'width: auto' の場合、それぞれのボックスにスペースを次のように配分します:
- もし外側の max-content widths の合計が available width より小さいなら、
その差を flex space
と呼びます。
各ボックスの flex
factor は外側の max-content width に比例して計算し、
その使用される外側幅を次のように設定します:
max-content width + flex space × flex factor ÷ ∑flex factors - さもなければ、もし外側の min-content widths の合計が available width より小さいなら、
その差を flex space
と呼び、各ボックスの flex factor
を max-content
width と min-content width の差に比例して計算し、
その使用される外側幅を次のように設定します:
min-content width + flex space × flex factor ÷ ∑flex factors - それ以外の場合、 前の場合と同様に外側のサイズを計算しますが、 各ボックスの flex factor を外側の min-content width に比例するように設定します。
- もし外側の max-content widths の合計が available width より小さいなら、
その差を flex space
と呼びます。
各ボックスの flex
factor は外側の max-content width に比例して計算し、
その使用される外側幅を次のように設定します:
中央ボックス B が生成されている場合、A, B, C の auto 幅は次のように決定されます:
- まず、中央ボックス B の auto 幅を解決します: B と AC という2つのボックスがあると仮定し、AC の各寸法は A と C の最大値の2倍とします(これにより B の中央揃えが保持されます)。B と想像上の AC にスペースを前述の A と C の分配方法で分配します。
- 次に、サイドボックス A と C の auto 幅を解決します。各サイドボックスの外側幅を (利用可能幅 − B の使用外側幅) ÷ 2 に設定します。
5.3.2.3. min-width および max-width の扱い
min-width および max-width のプロパティは変数次元において通常の要素と同様にページ余白ボックスに適用されますが、同じ辺にある3つのボックスがまとめて考慮されます。
より正確には:
- 暫定的な使用幅を(min-width と max-width を無視して)§5.3.2.2 に従って計算します。
- もし3つのボックスのいずれかの暫定使用幅が max-width を超える場合、上記の規則を再適用しますが、その際に width の計算値として max-width を使用します。
- もし結果として得られた3つのボックスのいずれかの幅が min-width より小さい場合、上記の規則を再適用しますが、その際に width の計算値として min-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 の使用値を計算するために使われます:
-
次の等式がマージンボックスの使用値の間で成り立たなければなりません:
margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom = 上部ページ余白
- もし border-top-width + padding-top + height (height が auto でない場合) + padding-bottom + border-bottom-width、および margin-top および/または margin-bottom(auto でない場合)が上部ページ余白の高さより大きければ、それ以降の規則では margin-top または margin-bottom の auto 値は 0 として扱われます。
- もしこの時点で height, margin-top, margin-bottom がすべて auto 以外の計算値を持っているなら、それらは "over-constrained" と言われます。この場合、指定された margin-top の値は auto と見なされます。
- もしこの時点で正確に1つの値が auto に指定されていれば、その使用値は等式から決まります。
- もし height が auto に設定されているなら、他の auto 値は 0 になり、height は結果の等式から決まります。
- もし margin-top と margin-bottom の両方が auto であるなら、それらの使用値は等しくなります。これによりページ余白ボックスの内容が上部ページ余白内で垂直方向に中央揃えされます。
同じ規則が下部ページ余白ボックス(bottom-left-corner, bottom-left, bottom-center, bottom-right, bottom-right-corner)にも適用されますが、over-constrained の場合には 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" に置き換えられます。左(右)ページ余白ボックスの over-constrained の場合、指定された margin-left(margin-right)の値が無視されます。
5.4. ページ余白ボックスの例
次はページ余白ボックスの使用例のコレクションです。
@page {
@top-left { content: "Header in Left Cell (top-left)" }
}
top-center や top-right ページ余白ボックスに内容が定義されていないため、top-left ページ余白ボックスの範囲はページボックスの中央を越えても許容されます。

@page {
@top-right { content: "Header in Right Cell (top-right)" }
}
中央セルの内容が空であるため、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)" }
}
margin: 10%;

@page {
@top-left { content: "Header in top-left with approx. twice as many words as right cell." }
@top-right { content: "Right cell (top-right)" }
}
中央セルの内容がないため、top-left の範囲はページボックスの中央を越えても許容されます。

6. ページプロパティ
付録 A は CSS 2.1 の規範的な一覧である [CSS2] の ページボックスに適用されるプロパティ を定義しています。 準拠するユーザーエージェントがこれらのプロパティをブロックボックスでサポートする場合、 それらのプロパティは page context においてもサポートされなければなりません。 本仕様はさらに page context のみに適用される size プロパティを定義します。
ページ余白ボックスに適用されるプロパティは page context 内でも設定できます: 継承可能であるか明示的に(margin context 内での inherit キーワードで)継承された場合、 それらは page-margin boxes に継承されます。
同じ付録は CSS 2.1 の [CSS2] の ページ余白ボックスに適用されるプロパティ の規範的な一覧も定義しています。 準拠するユーザーエージェントがこれらのプロパティをブロックボックスでサポートする場合、 それらのプロパティは margin context においてもサポートされなければなりません。
その他の CSS2 によって定義されたプロパティはこれらのコンテキストでは適用されません。 CSS 2.1 に含まれないプロパティについての振る舞いは未定義です。
注: 他のプロパティを未定義のままにする意図は、適切な CSS3 のプロパティが出現するにつれてこの仕様をその都度更新することなく段階的に追加できるようにするためです。
要素と同様に、page context と margin context は、たとえそのプロパティがページやページ余白ボックスに適用されなくとも、すべてのプロパティに対する計算値を持ちます。
通常の CSS プロパティの規則は次の例外を除いて適用されます:
- page-margin boxes は page context から継承します。 page context はルート要素から継承します。 ただし、前の改訂ではこの点が明確でなかったため、page context 内で継承されるプロパティをルート要素と同様に初期値に設定する実装も CSS Paged Media Level 3 に準拠します。この例外は Level 4 で削除されます。
- em および ex 単位の値はそのコンテキストに関連付けられたフォントを基準として解釈されます。margin context の font-size では page context のフォントを基準とし、page context の font-size ではルート要素の font-size を基準とします。しかし、以前の改訂で曖昧だったため、font-size における em と ex を初期値に対して相対的に扱う実装も CSS Paged Media Level 3 に準拠します。この例外は Level 4 で削除されます。
- margin と padding のパーセンテージ値は containing block の寸法に対して相対的です。左右の値は containing block の幅に対して、上下の値は containing block の高さに対して相対的です。
- width と height の使用値はページボックスおよびページ余白ボックスに対して特別な計算規則を持ちます; 詳しくは Page Size と Computing Page-Margin Box Dimensions を参照してください。
- ページ背景は上で記述したとおりに位置決めされ描画されます。
- カウンタのスコーピングに関する規則は 以下の記述 のように修正されます。
- '::before' と '::after' 疑似要素と同様に、page-margin boxes における content プロパティの normal 値は none に計算されます。
- page-margin boxes における vertical-align プロパティは 表セルに指定された通り に振る舞います。書字モードに関係なく、垂直方向での整列を常に行います。
ユーザーエージェントは非印刷領域を含むデフォルトのページ余白をユーザーエージェントスタイルシートで確立すべきです。 著者はデフォルトのページエリアが非印刷領域を含まないことを想定すべきです。
6.1. ページベースのカウンタ
カウンタは @page ルール内で定義および制御でき、page-margin boxes の content として使うことができます。 これはページ数の管理に有用です。
page または margin context 内での counter-increment は、各 page box の生成に伴ってカウンタをインクリメントさせます。
カウンタが page context 内でリセットまたはインクリメントされた場合、それはすべての page-margin boxes のスコープ内にあり、文書内の同名のカウンタを覆い隠します。
カウンタが margin context 内でリセットまたはインクリメントされた場合、それはその page-margin box のスコープ内にあり、page context と文書内の同名カウンタを覆い隠します。
margin context または page context 内でリセットやインクリメントされていないカウンタが margin context 内で counter() や counters() によって使用される場合、その結果の値は、まるで page-margin box がページの開始時に文書内の最も深いノーマルフロー内の要素の内部にある要素であるかのように正確に振る舞います。このような方法でのカウンタの使用はカウンタの値の計算には影響しません。
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 という名前のカウンタが UA によって自動的に作成されます。これは常に文書内の総ページ数になります。(連続メディアでは常に 1 です。)pages の値は操作できません: counter-reset や counter-increment によって設定する文は有効ですが、効果はありません。
その他の点において、ページに関連するカウンタは [CSS2]、Nested Counters and Scope および Counters に記述された通りに振る舞います。
6.2. ページ余白ボックスとデフォルト値
page や margin コンテキスト内で使用されるプロパティはそのプロパティ定義から初期値を取ります; しかしユーザーエージェントは以下の表の値が UA デフォルトスタイルシートのルールによって設定されたかのように振る舞わなければなりません。
| ページ余白ボックス | text-align | vertical-align |
|---|---|---|
| top-left-corner | right | middle |
| top-left | left | middle |
| top-center | center | middle |
| top-right | right | middle |
| top-right-corner | left | middle |
| left-top | center | top |
| left-middle | center | middle |
| left-bottom | center | bottom |
| right-top | center | top |
| right-middle | center | middle |
| right-bottom | center | bottom |
| bottom-left-corner | right | middle |
| bottom-left | left | middle |
| bottom-center | center | middle |
| bottom-right | right | middle |
| bottom-right-corner | left | middle |
body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
margin: 10%;
@top-center { content: "Chapter" counter(chapter) }
}
7. ページサイズ
世界中で多くの異なる用紙サイズが使われています。本仕様の目標のひとつは、Web コンテンツが各用紙サイズごとに特別なスタイルシートを書かなくとも、さまざまなサイズに適応できるようにすることです。
しかし、特定の状況では特定のページサイズが特定のスタイルを達成することが重要です。この目的を達成する一つの方法は、表示を優先的にあるサイズの面で行うことを示す size プロパティを利用することです。別の方法は Media Queries [MEDIAQ] を使って異なる用紙サイズに異なるスタイルシートを適用することです。
7.1. ページサイズ: size プロパティ
| Name: | size |
|---|---|
| For: | @page |
| Value: | <length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ] |
| Initial: | auto |
| Computed value: | 指定された値。<length>s が絶対化されたもの。 |
このプロパティは page box の containing block の目標となるサイズと向きを指定します。 一般的な場合において、1 つの page box が 1 つの page sheet にレンダリングされるとき、 size プロパティは宛先の page sheet のサイズも示します。
ページボックスのサイズは "absolute"(固定サイズ)あるいは "scalable"(利用可能なシートサイズに合わせる)にできます。 表の最初の3つの値はスケーラブルなページボックスを作るために使えます。 他の値は固定サイズのページボックスを定義し、好ましい出力メディアサイズを示します。可能であれば、示されたメディアサイズで出力がレンダリングされるべきです。 指定されたサイズが利用できない場合は、ページボックスを別のサイズに転置する規則 が適用されます。
もし size 宣言が width, height, device-width, device-height, aspect-ratio, device-aspect-ratio, または orientation のようなメディアクエリで修飾されている場合、その宣言は 無視 されなければなりません。メディアクエリは size を尊重しません: それらは @page ルールが指定されていない場合に選ばれるだろう用紙サイズを仮定します。
別の選択肢として @viewport ルールのようにする方法も考えられます [CSS-DEVICE-ADAPT]: まず @page ルールを適用し(どのセレクタに一致するかなど)、 UA のデフォルトページサイズを Media Queries とビューポート割合長(viewport-percentage lengths)に使ってスタイルシート全体を再適用し、結果得られたページサイズを "base page size" とする、などの方法です。
@page {
size: 4in 6in;
}
@media (max-width: 6in) {
@page {
size: letter;
}
}
2 番目の size 宣言は無視されます。すなわち指定された size プロパティの値は 4in 6in です。
- auto
- ページボックスは UA によって選択されたサイズと向きに設定されます。通常は page box のサイズと向きはターゲットメディアシートに合うように選ばれます。
- landscape
- ページの内容を横向きで印刷することを指定します。ページボックスの長い辺が水平になります。もし <page-size> が指定されていなければ、ページシートのサイズは UA によって選ばれます。
- portrait
- ページの内容を縦向きで印刷することを指定します。ページボックスの短い辺が水平になります。もし <page-size> が指定されていなければ、ページシートのサイズは UA によって選ばれます。
- <length>
- ページボックスは与えられた絶対寸法に設定されます。長さが1つだけ指定された場合、それはページボックスの幅と高さの両方を設定します(すなわち正方形になります)。長さが2つ指定された場合、最初が幅、2つ目が高さを決定します。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
- 北米のレター用紙と同等: 幅 8.5 インチ、高さ 11 インチ
- legal
- 北米のリーガルと同等: 幅 8.5 インチ、高さ 14 インチ
- ledger
- 北米のレジャー(ledger)と同等: 幅 11 インチ、高さ 17 インチ
<page-size> 名は landscape や portrait と組み合わせてサイズと向きを示すのに使えます。
@page {
size: A4 landscape;
}
上の例はページボックスの幅を 297mm、高さを 210mm に設定します。この例のページボックスは 210mm x 297mm のページシート上にレンダリングされるべきです。
@page {
size: auto;/* auto is the initial value */
margin: 10%;
}
@page {
size: 8.5in 11in;/* width height */
}
上の例はページボックスの幅を 8.5 インチ、高さを 11 インチに設定します。これはページシートサイズが 8.5"x11" で、向きが portrait であることを示します。
7.1.1. メディアクエリ
この節は参考情報です。
メディアクエリ [MEDIAQ] を使用することで、1つのスタイルシートで異なるページサイズに対する異なるスタイル優先を表現できます。次の例を考えてください:
/* 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 記述子
| Name: | page-orientation |
|---|---|
| For: | @page |
| Value: | upright | rotate-left | rotate-right |
| Initial: | upright |
| Computed value: | 指定どおり |
高品質な印刷実装は、さまざまなサイズと向きのページを扱うことができるため、著者はページの内容に最も適したサイズをページごとに選択できます。たとえば、文書のほとんどのページには size: letter portrait; を使い、幅の広い情報表を配置するために size: letter landscape; に切り替えることがあり得ます。
しかし、幅の異なるページにまたがって流れるコンテンツを扱うことは比較的複雑な作業であり、多くの一般的な印刷実装(特にウェブブラウザ)ではまだ十分に解決されていません。page-orientation 記述子はそのような実装を支援することを意図しており、レイアウトを単一の一貫したサイズで行った後に出力媒体(例えば PDF)で向きを変更して、異なる向きで表示したいページを可能にします。
その値は以下のように定義されます:
- upright
-
特別な向きは適用されません。ページは通常どおりレイアウトおよび整形されます。
- rotate-left
-
ページがレイアウトされた後、出力媒体が回転をサポートする場合、この値はページをレイアウト時から左に90度(反時計回り)回転して表示することを示します。
- rotate-right
-
rotate-left と同様ですが、ページはレイアウト時から右に90度(時計回り)回転して表示されます。
注: 余白ボックスやその他の位置決め要素はこのプロパティと特別な相互作用を持ちません; それらは非回転ページで通常どおりレイアウトされ、その後他のすべてと共に回転されます。
高品質な印刷実装ではこのプロパティを使用する必要はほとんどありません。代わりに、ページの size を使ってページの portrait と landscape の向きを制御してください。
7.2. トリムおよびレジストレーションマーク: marks 記述子
| Name: | marks |
|---|---|
| For: | @page |
| Value: | none | [ crop || cross ] |
| Initial: | none |
| Computed value: | 指定どおり |
このプロパティは文書にトリムマークおよび/またはレジストレーションマークを追加します。これらはページボックスの外側に印刷され、シートのトリミングや位置合わせを支援します。値の意味は次のとおりです:
- none
- トリムマークもレジストレーションマークも印刷しないことを指定します: ブリード領域 の外側は完全に白紙になります。
- crop
- トリムマークを印刷することを指定します。これらは通常ページボックスの四辺の外側にある短い線で、ページボックスのエッジの正確な位置を示しますが、ページボックス内やその近傍にインクを置かないようにします。
- cross
- レジストレーションマークを印刷することを指定します。これらは通常ページボックスの各辺の外側にある十字形のマークで、印刷工程でシートの位置合わせに使用されます。
トリムマークおよびレジストレーションマークは、ページボックスが印刷可能領域より小さい場合にのみ可視になります。
7.3. ブリード領域: bleed 記述子
| Name: | bleed |
|---|---|
| For: | @page |
| Value: | auto | <length> |
| Initial: | auto |
| Computed value: | 指定どおり |
このプロパティはページボックスの外側にある ブリード領域 の範囲、すなわちページボックスを超えてどこまで描画をクリップするかを指定します。値の意味は次のとおりです:
- auto
- marks が crop の場合は 6pt に計算され、それ以外の場合はゼロになります。
- <length>
- 各方向において、ブリード領域がページボックスの外側にどれだけ広がるかを指定します。値は負にできる場合がありますが、実装依存の制限があるかもしれません。
7.4. シートに収まらないページボックスのレンダリング
もしページボックスがターゲットのページシート寸法と一致しない場合、ユーザーエージェントは次のいずれかを行うべきです(優先順):
- 指定されたサイズでより大きなページシート上にページボックスをレンダリングする。
- ページボックスがページシートに収まるなら、ページボックスを90°回転する。
- ページボックスをページシートに収まるように縮尺する。(ページボックスのアスペクト比は保持するべきです。)
- ページボックスをグラフィカルに「スライス」して複数のページシートに分割する。
- オーバーフローしたコンテンツをクリップする(最も望ましくない)。
ユーザーエージェントはこれらの操作を行う前にユーザーに相談することを望むかもしれません。
7.5. シート上でのページボックスの配置
ページボックスがページシートより小さい場合、ユーザーエージェントは次のいずれかを行うべきです:
- ページボックスをシートの中央に配置する — これは両面ページを整列させ、シートの端付近に印刷された情報の偶発的な損失を避けます; または
- ページボックスをページシートの左上隅に配置する(または別の隅。ページボックスの direction と writing-mode に基づく)— これはメディア消費を最小化するかもしれません。
この点についてユーザーエージェントはユーザーに相談することを望むかもしれません。
8. ページ区切り
CSS Fragmentation Module [CSS-BREAK-3] モジュールは、ページ区切りを含めて CSS ボックスがどのように 断片化 され得るかを定義します。これはユーザーエージェントがどこでページを区切ることを許容または強制するか、そして次のコンテンツがどのページ(左または右)で再開するかを示すいくつかのプロパティを定義します。各ページ区切りは現在の page box のレイアウトを終え、文書ツリーの残りの部分を新しいページボックスでレイアウトする原因となります。
8.1. 名前付きページの使用: page
| Name: | page |
|---|---|
| Value: | auto | <custom-ident> |
| Initial: | auto |
| Applies to: | クラス A ブレークポイントを生成するボックス |
| Inherited: | いいえ(ただし本文参照) |
| Percentages: | 該当なし |
| Computed value: | 指定値 |
| Canonical order: | 文法に従う |
| Animation type: | 離散 |
page プロパティは、要素が表示されなければならない特定の種類のページ(named page と呼ばれる)を指定するために使われます。必要ならば強制ページ区切りが導入され、指定された型の新しいページが生成されます。
注: このページは同じ型名を ページセレクタ で使ってスタイル指定できます。
ページタイプ名は大文字小文字を区別する識別子です。ただし auto 値は CSS キーワードであるため ASCII 大文字小文字を区別しません。
page プロパティは継承しません。しかし、要素上の page 値が auto の場合、その使用値は非 auto 値を持つ最も近い祖先で指定された値になります。ルート要素に指定された場合、auto の使用値は空文字列になります。
以前のバージョンのこの仕様は page プロパティが継承されると示していたため、page プロパティを継承し、auto を常に空文字列として扱う実装は引き続き CSS Paged Media Level 3 に準拠します。この例外は Level 4 で削除されます。したがって、著者は非 auto 値を持つ要素の子孫に対して明示的に auto を指定すべきではありません。結果の挙動が予測不能になるためです。
page プロパティの動作は次のとおりです:
- まず、いかなる auto 値も非 auto の祖先に対して解決されます(上記のとおり)。
-
次に、
start page value と end page value が各ボックスについて決定されます。
これは、それぞれ最初または最後の子ボックスから伝播された値(あれば)か、さもなければそのボックス自身の使用値になります。
子は start または end page value
を伝播するのは、かつその場合に限り、page プロパティがその子に適用されるときだけです。
注: 最初または最後の子のボックスは必ずしも最初または最後の子の要素によって生成されるとは限りません。 例えば、ある要素は 'display: none' の前の兄弟しか持たず、その兄弟はボックスを生成しない場合があります。
- ルートの最初に印刷されるページの型はルートの start page value です。
- もし、ある class A のブレークポイントで出会う二つのボックスについて、 ブレーク前のボックスの end page value と ブレーク後のボックスの start page value が一致しない場合、 その二つのボックスの間にページ区切りが強制され、 区切り後のコンテンツは指定された型のページボックスで再開されます。
注: 本質的に、比較される2つの page 値は、クラス A ブレークポイントで出会う最深のボックスからのものであり、page プロパティが適用されないボックスをルートとするサブツリーを無視します。
ページ区切りの詳細については [CSS-BREAK-3] を参照してください。
@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }
with this document:
<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 プロパティ
この一覧は page properties を定義します。 これらは § 6 ページプロパティ でさらに説明されています。
| 双方向(bidi)プロパティ | direction |
| 背景プロパティ | background-color |
| background-image | |
| background-repeat | |
| background-attachment | |
| background-position | |
| background | |
| ボーダープロパティ | border-top-width |
| border-right-width | |
| border-bottom-width | |
| border-left-width | |
| border-width | |
| border-top-color | |
| border-right-color | |
| border-bottom-color | |
| border-left-color | |
| border-color | |
| border-top-style | |
| border-right-style | |
| border-bottom-style | |
| border-left-style | |
| border-style | |
| border-top | |
| border-right | |
| border-bottom | |
| border-left | |
| border | |
| カウンタプロパティ | counter-reset |
| counter-increment | |
| color | |
| フォントプロパティ | font-family |
| font-size | |
| font-style | |
| font-variant | |
| font-weight | |
| font | |
| height プロパティ | height |
| min-height | |
| max-height | |
| line-height | |
| マージンプロパティ | margin-top |
| margin-right | |
| margin-bottom | |
| margin-left | |
| margin | |
| アウトラインプロパティ | outline-width |
| outline-style | |
| outline-color | |
| outline | |
| パディングプロパティ | padding-top |
| padding-right | |
| padding-bottom | |
| padding-left | |
| padding | |
| quotes | |
| テキストプロパティ | letter-spacing |
| text-align | |
| text-decoration | |
| text-indent | |
| text-transform | |
| white-space | |
| word-spacing | |
| visibility | |
| width プロパティ | width |
| min-width | |
| max-width | |
マージンコンテキスト内で適用される CSS 2.1 プロパティ
この一覧は page-margin properties を定義します。 これらは § 6 ページプロパティ でさらに説明されています。
| 双方向(bidi)プロパティ | direction |
| unicode-bidi | |
| 背景プロパティ | background-color |
| background-image | |
| background-repeat | |
| background-attachment | |
| background-position | |
| background | |
| ボーダープロパティ | border-top-width |
| border-right-width | |
| border-bottom-width | |
| border-left-width | |
| border-width | |
| border-top-color | |
| border-right-color | |
| border-bottom-color | |
| border-left-color | |
| border-color | |
| border-top-style | |
| border-right-style | |
| border-bottom-style | |
| border-left-style | |
| border-style | |
| border-top | |
| border-right | |
| border-bottom | |
| border-left | |
| border | |
| カウンタプロパティ | counter-reset |
| counter-increment | |
| content | |
| color | |
| フォントプロパティ | font-family |
| font-size | |
| font-style | |
| font-variant | |
| font-weight | |
| font | |
| height プロパティ | height |
| min-height | |
| max-height | |
| line-height | |
| マージンプロパティ | margin-top |
| margin-right | |
| margin-bottom | |
| margin-left | |
| margin | |
| アウトラインプロパティ | outline-width |
| outline-style | |
| outline-color | |
| outline | |
| overflow | |
| パディングプロパティ | padding-top |
| padding-right | |
| padding-bottom | |
| padding-left | |
| padding | |
| quotes | |
| テキストプロパティ | letter-spacing |
| text-align | |
| text-decoration | |
| text-indent | |
| text-transform | |
| white-space | |
| word-spacing | |
| vertical-align | |
| visibility | |
| width プロパティ | width |
| min-width | |
| max-width | |
| z-index | |
付録 B: 転送の可能性
多くの場合(しかし常にではない)、ページボックスは文書が最終的にレンダリングされる物理的な表面と1対1で対応しています。CSS3 のページモデルはページボックス内での整形を規定しますが、ページボックスをシートに転送する責任はユーザーエージェントにあります。CSS3 で扱われないいくつかのユーザーエージェントの転送の可能性には次のようなものがあります:
- 1つのページボックスを1枚のシートに転送する(例:片面印刷)
- 2つのページボックスを同一シートの表と裏の面に転送する(例:両面印刷)
- N個の(小さい)ページボックスを1枚のシートに転送する("N-up")
- 1つの(大きな)ページボックスを N x M のシートに転送する("タイル")
- シグネチャを作成する。signature は、折り畳んで裁断すると正しい順序で現れるようにシート上に印刷されたページのグループです
- 1つの文書を複数の出力トレイに印刷する
- 印刷指示を含むファイルを生成する
プライバシーおよびセキュリティに関する考慮事項
この仕様は新たなプライバシーまたはセキュリティ上の考慮事項を導入しません。
変更点
2018年10月18日作業草案(18 October 2018 Working Draft)以来の変更点は次のとおりです:
- page-orientation 記述子を追加
2013年3月14日作業草案(14 March 2013 Working Draft)以来の変更点は次のとおりです:
- marks および bleed プロパティを [CSS3GCPM] から取り込んだ
- auto を bleed の初期値に追加し、marks が none の場合にも適用を許可した
- JIS-B4 と JIS-B5 を追加
謝辞
CSS Working Group はこのモジュールの前編集者に特に感謝します: 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 Working Group および www-style コミュニティの他のメンバーで、本仕様に関するレビューとコメントを提供してくれた皆さん。
