CSS ページ化メディア モジュール レベル 3

W3C 作業草案,

この文書の詳細
このバージョン:
https://www.w3.org/TR/2023/WD-css-page-3-20230914/
最新の公開版:
https://www.w3.org/TR/css-page-3/
編集者草案:
https://drafts.csswg.org/css-page-3/
履歴:
https://www.w3.org/standards/history/css-page-3/
フィードバック:
CSSWG Issues リポジトリ
トラッカー
仕様内インライン
編集者:
Elika J. Etemad / fantasai (Apple, formerly Mozilla)
前編集者:
Simon Sapin (Mozilla, formerly Kozea)
Melinda Grant (HP)
Håkon Wium Lie (Opera Software)
Jim Bigelow (Hewlett-Packard)
Jacob Refstrup (Hewlett-Packard)
Robert Stevahn (Hewlett-Packard)
この仕様の編集提案:
GitHub 編集

概要

この CSS モジュールは、ページ化された表示で断片化されたコンテンツを保持するためにページが生成および配置される方法を規定します。ページの余白、ページサイズと向き、ヘッダーおよびフッターの制御機能を追加し、ページ番号付けやランニングヘッダー/フッターを可能にするために生成コンテンツを拡張します。フローをそのような生成ページにページ付けするプロセスは [CSS-BREAK-3] で扱われます。

CSS は、スクリーンや紙などでの構造化された文書(HTML や XML など)のレンダリングを記述するための言語です。

この文書の状態

このセクションは、本書の公開時点での状態を説明しています。現在の W3C 出版物の一覧およびこの技術報告書の最新の改訂は、W3C 技術報告書インデックス https://www.w3.org/TR/ にあります。

本文書は CSS ワーキンググループ によって Working Draft として、推奨策定プロセス (Recommendation track) を使って公開されました。Working Draft としての公開は、W3C およびそのメンバーによる支持を意味するものではありません。

本文書は草案であり、いつでも更新、置換、または他の文書によって廃止される可能性があります。本書を進行中の作業以外として引用することは適切ではありません。

フィードバックは、GitHub での issue 提出(推奨)でお送りください。件名に仕様コード “css-page” を含め、次のようにしてください: “[css-page] …コメントの要約…”。すべての issue とコメントは アーカイブ されています。代替として、フィードバックは(アーカイブ)公開メーリングリスト www-style@w3.org に送ることもできます。

この文書は 2023年6月12日 W3C プロセス文書 によって管理されています。

この文書は W3C 特許ポリシー の下で運営されるグループによって作成されました。W3C はグループの成果物に関連して行われた特許開示の 公開リスト を維持しています;そのページには特許を開示する手順も含まれています。個人が自分が実際に知っている特許で、その個人が 本質的請求(Essential Claim(s)) を含むと信じるものを知っている場合、当該情報は W3C 特許ポリシーのセクション6 に従って開示しなければなりません。

1. はじめに

ページ化メディア(例:紙、トレーシングペーパー、フォトアルバムのページ、印刷出力のシミュレーションとしてコンピュータ画面上に表示されるページなど)は、文書の内容が1つ以上の離散的な静的表示面に分割される点で、連続メディアと異なります。ページを扱うために、CSS3 Paged Media は次の方法を記述します:

このモジュールは、文書が有限の幅と高さを持つ矩形領域(page box と呼ばれる)内でどのように整形されるかを指定する ページモデル を定義します。

CSS3 はユーザーエージェントがページボックスをシートにどのように転送するかを規定しませんが、意図したページシートの サイズと向き をユーザーエージェントに伝えるためのいくつかの仕組みを含みます。一般的な場合、CSS3 は1つのページボックスが同様のサイズの1面に転送されることを想定します。

注: [CSS-BREAK-4] 仕様は、フラグメンテーション(ページ分割) の制御、例えば break-beforebreak-afterbreak-insidewidows、および orphans といったプロパティを扱います。

1.1. 値の定義

本仕様は、CSS プロパティ定義の慣例[CSS2])に従い、値定義構文[CSS-VALUES-3] から用います。 本仕様で定義されていない値の型は、CSS Values & Units([CSS-VALUES-3])で定義されています。 他の CSS モジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

各プロパティ固有の定義に列挙された値に加えて、本仕様で定義されるすべてのプロパティは、プロパティ値として CSS-wide キーワード を受け入れます。可読性のため、それらはここでは繰り返して明示していません。

2. ページ用語

次の用語と図はページモデルを説明するのに役立ちます:

ページシート
The corner of a page sheet with the non-printable area at the edge and printable area inside it ページシートは物理媒体の1つの表面です。右の図はページシートの左上隅の表現を示しています。
印刷可能領域と非印刷領域
非印刷領域は、プリンタの用紙取り扱い機構などの理由で物理デバイスが確実に印字できないページシートの領域です。この値はプリンタ依存であり、通常ページシートの各端に沿った小さな領域です。印刷可能領域は、プリンタが確実に印字できるページシートの領域です。印刷可能領域のサイズは、ページシートのサイズから非印刷領域のサイズを差し引いたものになります。ユーザーエージェントは特定の印刷デバイスについてこの領域の寸法を知らない場合がありますが、寸法が分かる場合は、コンテンツが印刷可能領域内に収まるように文書の整形を調整することができます。この調整がどのように行われるかは、セクション § 7.4 シートに収まらないページボックスのレンダリング および § 3.2 ページボックスの外側のコンテンツ に表現された制約の範囲内でデバイス依存です。
ページの向き
ページの向きは page box の辺の長さを比較して定義されます。ページボックスは長辺と短辺と呼ばれる2つの直交する辺を持つ長方形です。長辺の長さは常に短辺の長さ以上です。ページボックスが正方形の場合、両辺は同じ長さであり、どちらを長辺としてもかまいません。本仕様は portraitlandscape のページ向きを定義します。
縦向き(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 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. ページの背景と描画順序

ページの内容を描画する際、ページのレイヤーは以下の描画順で塗られます(下層が先):

  1. ページ背景
  2. 文書キャンバス
  3. ページの境界線
  4. 文書の内容
  5. ページ余白ボックス

ページモデルにおいて、ページ背景はルート背景と類似して振る舞います: その 背景描画領域ブリード領域 であり、マージンを含むページボックス全体を覆います(background-clip に関係なく)。ページ背景はデフォルトでページボックスのパディング領域内に固定され(UA が [CSS-BACKGROUNDS-3] をサポートしている場合は background-origin を尊重します)。しかし background-attachmentfixed の場合、イメージはマージンを含む 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 の "ツリー順" は次のとおりです:

  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 で上書きできます。ページ余白ボックスが重なる場合にのみ視覚的な効果がありますが、多くの場合そのような重なりは発生しないはずです。

3.2. ページボックスの外側のコンテンツ

ページモデルでコンテンツを整形する際、一部のコンテンツが page box の外に出ることがあります。例えば、white-space プロパティが pre の値を持つ要素は、page box よりも広いボックスを生成することがあります。別の例として、ボックスが絶対位置や相対位置で配置されると、不都合な位置に配置される場合があります。例えば、画像が page box の端に配置されたり、page box の下方 100,000 メートルの位置に配置されたりすることがあります。

そのような要素の正確な整形に関する仕様は本書の範囲外です。ただし、著者とユーザーエージェントは、ページボックスの外側のコンテンツに関して次の一般原則に従うことを推奨します:

3.3. ページ進行

CSS は、文書が両面印刷であるかどうかに関係なく、すべての文書で左ページと右ページを区別します。各左ページは右ページに続き、その逆も同様です。左ページと右ページは :left および :right 疑似クラス を使って異なるスタイルにできます。

文書の最初のページが左ページか右ページかは、文書のページ進行によって決まります。ページ進行(page progression) は、文書の印刷ページが横並びに配置されたときにどの方向に順序付けられるかの方向です。例えば、英語や横組みの日本語は通常左から右へ進行し、アラビア語や縦組みの日本語は通常右から左へ進行します。

ページ進行方向は次のように決定されます:

UA が CSS 3 Writing Modes Module の directionwriting-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;
}

左ページと右ページに異なる宣言が与えられている場合、ユーザーエージェントはページボックスを左・右のシートに転送しないプリンタであっても(すなわち媒体の片面にのみ印刷するプリンタであっても)これらの宣言を尊重し、正しく整形された出力を生成しなければなりません。

注. :left:right 擬似クラスに宣言を追加しても、文書がプリンタから両面または片面で出力されるかどうかに必ずしも影響しないこと(これは本仕様の範囲外です)。

4.2.2. 最初のページ擬似クラス: :first

:first 擬似クラスは文書の最初に印刷されるページに一致します。

@page { margin: 2cm } /* 全ての余白を2cmに設定 */

@page :first {
margin-top: 10cm /* 最初のページの上余白を10cmに */
}

4.2.3. 空白ページ擬似クラス: :blank

:blank 擬似クラスは、強制改ページの結果として現れる コンテンツ空ページ一致します。

break-before の leftrightrecto および verso の値のみが、break-before および break-after プロパティによって :blank に一致するページを生成し得ることに注意してください。
この例では、h1 要素の前に強制改ページが発生する可能性があります。
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: nonecontent: "Preliminary edition" より前に書かれていてもトップ中央ヘッダは削除されます。

注. 将来の CSS では他のページ擬似クラスが追加される可能性があります。

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 { ... }
@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 モジュールで定義された計算方法に類似した方法で計算されます:

注: 同じ擬似クラスの繰り返し出現は許可され、特異性を増加させます。

記憶領域の制限のため、実装は fg、または 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 になります。

この例では、緑のルールの方が赤のルールより特異性が高いため勝ちます。 したがって、最初のページは top-left の page-margin box で青いテキストを持ち、top-right では緑のテキストを持ちますが、その後のページでは page-margin boxes に赤いテキストが適用されます。
@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. ページ余白ボックス

ページ余白ボックスはページ余白内のボックスで、疑似要素のように生成コンテンツを含めることができます。

ページ余白ボックスは、ページ番号や文書タイトルなどの補助情報のために確保されたページの一部であるページヘッダーやフッターを作成するために使用できます。

典型的には、ページヘッダー は主に水平書字方向の文書ではページの上部に配置され、主に垂直書字方向の文書では製本側と反対側の辺に配置されます。 水平書字の文書向けのページヘッダーの1つの設計としては、@top-left-corner, @top-left, @top-center, @top-right および @top-right-corner のページ余白ボックスを使う方法があります。 垂直書字の文書向けの別の設計では、右向きページには @right-top, @right-middle, および @right-bottom を、 左向きページには @left-top, @left-middle, および @left-bottom を使うことができます。

ページフッター は通常、ページヘッダーと反対側の端にあります。 例えば、ページヘッダーがページ上部にある水平書字の文書のデザインでは、ページフッターとして @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right および @bottom-right-corner のページ余白ボックスを使うことができます。 垂直書字の文書のデザインでは、ページフッターとしてページの製本側にあるページ余白ボックスを使うことが考えられます。

ページ余白ボックスはページエリアに対して位置決めされ、ページの向きには依存しません。たとえば、上側のページ余白ボックスは縦向きでも横向きでもページエリアの上方にあります。 様々なページ余白ボックスは以下の図で定義および示されています:

表1 ページ余白ボックスの定義
ボックス 説明 配置
top-left-corner ページボックスの上端と左端の余白が交差することで定義される固定サイズのボックス the top left corner box with margin, border, and padding, nested within intersection of the page’s top and left margins
top-left top-left-corner と top-center ページ余白ボックスの間でページ上部余白を埋める可変幅ボックス the top left box with margin, border, and padding, nested in the page’s top margin next to the top left corner box
top-center ページの左右のボーダーエッジ間で水平に中央揃えされ、top-left と top-right の間でページ上部余白を埋める可変幅ボックス the top center box with margin, border, and padding, centered within the page’s top margin
top-right top-center と top-right-corner ページ余白ボックスの間でページ上部余白を埋める可変幅ボックス the top right box with margin, border, and padding, nested within the page’s top margin
top-right-corner ページボックスの上端と右端の余白が交差することで定義される固定サイズのボックス the top right corner box with margin, border, and padding, nested within the intersection of the page’s top and right margin
left-top top-left-corner と left-middle ページ余白ボックスの間で左ページ余白を埋める可変高さボックス left-top, left-middle, and left-bottom page-margin boxes in the page box’s left margin
left-middle ページの上下のボーダーエッジ間で垂直に中央揃えされ、left-top と left-bottom の間で左ページ余白を埋める可変高さボックス
left-bottom left-middle と bottom-left-corner ページ余白ボックスの間で左ページ余白を埋める可変高さボックス
right-top top-right-corner と right-middle ページ余白ボックスの間で右ページ余白を埋める可変高さボックス right-top, right-middle, and right-bottom page-margin boxes in the page box’s right margin
right-middle ページの上下のボーダーエッジ間で垂直に中央揃えされ、right-top と right-bottom の間で右ページ余白を埋める可変高さボックス
right-bottom right-middle と bottom-right-corner ページ余白ボックスの間で右ページ余白を埋める可変高さボックス
bottom-left-corner ページボックスの下端と左端の余白が交差することで定義される固定サイズのボックス bottom left corner box with margin, border, and padding, nested within the page margin at the intersection of the left and bottom page margins
bottom-left bottom-left-corner と bottom-center ページ余白ボックスの間でページ下部余白を埋める可変幅ボックス bottom left page-margin box with margin, border, and padding, nested within the page’s bottom margin next to the bottom-left-corner box
bottom-center ページの左右のボーダーエッジ間で水平に中央揃えされ、bottom-left と bottom-right の間でページ下部余白を埋める可変幅ボックス bottom center box with margin, border, and padding, nested within the page’s bottom margin and centered on the page
bottom-right bottom-center と bottom-right-corner ページ余白ボックスの間でページ下部余白を埋める可変幅ボックス bottom right page-margin box with margin, border, and padding, nested within the page’s bottom margin and next to the bottom-right-corner box
bottom-right-corner ページボックスの下端と右端の余白が交差することで定義される固定サイズのボックス bottom right corner box with margin, border, and padding, nested within the page margin at the intersection of the right and bottom page margins

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: normalnone に計算されます。 ページ余白ボックスは、その content プロパティの計算値が none でない場合に限り 生成される と定義されます。 さもなければ、display: none の要素と同様にボックスは生成されません。

display プロパティはページ余白ボックスには適用されません。

次のスタイルシートは、ページの各コーナーに緑のボックスを作成します(ただし bottom-left コーナーは除く)。
@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 に次のように分配します:

中央ボックス B が生成されている場合、A, B, C の auto 幅は次のように決定されます:

  1. まず、中央ボックス B の auto 幅を解決します: B と AC という2つのボックスがあると仮定し、AC の各寸法は A と C の最大値の2倍とします(これにより B の中央揃えが保持されます)。B と想像上の AC にスペースを前述の A と C の分配方法で分配します。
  2. 次に、サイドボックス A と C の auto 幅を解決します。各サイドボックスの外側幅を (利用可能幅 − B の使用外側幅) ÷ 2 に設定します。
5.3.2.3. min-width および max-width の扱い

min-width および max-width のプロパティは変数次元において通常の要素と同様にページ余白ボックスに適用されますが、同じ辺にある3つのボックスがまとめて考慮されます。

より正確には:

  1. 暫定的な使用幅を(min-width と max-width を無視して)§5.3.2.2 に従って計算します。
  2. もし3つのボックスのいずれかの暫定使用幅が max-width を超える場合、上記の規則を再適用しますが、その際に width の計算値として max-width を使用します。
  3. もし結果として得られた3つのボックスのいずれかの幅が min-width より小さい場合、上記の規則を再適用しますが、その際に width の計算値として min-width を使用します。
5.3.2.4. 位置決め

ボックスの寸法が決まったら、次のように配置されます:

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-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom = 上部ページ余白

  2. もし border-top-width + padding-top + height (height が auto でない場合) + padding-bottom + border-bottom-width、および margin-top および/または margin-bottom(auto でない場合)が上部ページ余白の高さより大きければ、それ以降の規則では margin-top または margin-bottom の auto 値は 0 として扱われます。
  3. もしこの時点で height, margin-top, margin-bottom がすべて auto 以外の計算値を持っているなら、それらは "over-constrained" と言われます。この場合、指定された margin-top の値は auto と見なされます。
  4. もしこの時点で正確に1つの値が 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)にも適用されますが、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. ページ余白ボックスの例

次はページ余白ボックスの使用例のコレクションです。

以下は top-left のヘッダーのみを持つページの例です:
@page {
  @top-left { content: "Header in Left Cell (top-left)" }
}

top-center や top-right ページ余白ボックスに内容が定義されていないため、top-left ページ余白ボックスの範囲はページボックスの中央を越えても許容されます。

Header Example 1

次は中央にヘッダーを持つページの例です:
@page {
  @top-center { content: "Header in Center Cell (top-center)" }
}

Header Example 2

次は top-right ページ余白ボックスに単一のヘッダーを持つページの例です:
@page {
  @top-right { content: "Header in Right Cell (top-right)" }
}

中央セルの内容が空であるため、top-right ページ余白ボックスの範囲はページボックスの中央を越えても許容されます。

Header Example 3

次は top-center と top-left のヘッダーを持つページの例です:
@page {
  @top-left { content: "Left Cell (top-left)" }
  @top-center { content: "Header in Center Cell (top-center)" }
}

Header Example 4

次は top-center と top-right のヘッダーを持つページの例です:
@page {
  @top-center { content: "Header in Center Cell (top-center)" }
  @top-right { content: "Right Cell (top-right)" }
}
margin: 10%;

Header Example 5

次は top-left と 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)" }
}

中央セルの内容がないため、top-left の範囲はページボックスの中央を越えても許容されます。

Header Example 6

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 プロパティの規則は次の例外を除いて適用されます:

ユーザーエージェントは非印刷領域を含むデフォルトのページ余白をユーザーエージェントスタイルシートで確立すべきです。 著者はデフォルトのページエリアが非印刷領域を含まないことを想定すべきです。

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-incrementpage 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-resetcounter-increment によって設定する文は有効ですが、効果はありません。

その他の点において、ページに関連するカウンタは [CSS2]Nested Counters and Scope および Counters に記述された通りに振る舞います。

6.2. ページ余白ボックスとデフォルト値

page や margin コンテキスト内で使用されるプロパティはそのプロパティ定義から初期値を取ります; しかしユーザーエージェントは以下の表の値が UA デフォルトスタイルシートのルールによって設定されたかのように振る舞わなければなりません。

表2. ページ余白ボックスのデフォルト値
ページ余白ボックス 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 ルールが指定されていない場合に選ばれるだろう用紙サイズを仮定します。

未修飾の @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> 名は landscapeportrait と組み合わせてサイズと向きを示すのに使えます。

@page {
size: A4 landscape;
}

上の例はページボックスの幅を 297mm、高さを 210mm に設定します。この例のページボックスは 210mm x 297mm のページシート上にレンダリングされるべきです。

次の例では、ページボックスの外側エッジがページに揃います。margin プロパティのパーセンテージ値はページサイズに対して相対的なので、ページシートの寸法が 210mm x 297mm(A4)の場合、マージンは 21mm と 29.7mm になります。UA デフォルトスタイルシートにページ境界やパディングが設定されていないと仮定すると、結果のページエリアは 189mm x 267.3mm になります(210mm-21mm x 297mm-29.7mm)。
@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度(時計回り)回転して表示されます。

注: 余白ボックスやその他の位置決め要素はこのプロパティと特別な相互作用を持ちません; それらは非回転ページで通常どおりレイアウトされ、その後他のすべてと共に回転されます。

このプロパティは、機能が限られた実装に対する暫定策を意図しており、コンテンツを幅の異なるページ間で流す能力が実装にない場合でも、縦向きと横向きが混在する文書を印刷できるようにします。使用にはいくつかの扱いにくい工夫が必要であり、例えば英語だけを含む幅の広い表を「横向きに」レイアウトするために縦書き(writing-mode)を指定し、その後出力で読みやすさのために回転して正立させる、といった手順が必要になることがあります。

高品質な印刷実装ではこのプロパティを使用する必要はほとんどありません。代わりに、ページの size を使ってページの portraitlandscape の向きを制御してください。

7.2. トリムおよびレジストレーションマーク: marks 記述子

Name: marks
For: @page
Value: none | [ crop || cross ]
Initial: none
Computed value: 指定どおり

このプロパティは文書にトリムマークおよび/またはレジストレーションマークを追加します。これらはページボックスの外側に印刷され、シートのトリミングや位置合わせを支援します。値の意味は次のとおりです:

none
トリムマークもレジストレーションマークも印刷しないことを指定します: ブリード領域 の外側は完全に白紙になります。
crop
トリムマークを印刷することを指定します。これらは通常ページボックスの四辺の外側にある短い線で、ページボックスのエッジの正確な位置を示しますが、ページボックス内やその近傍にインクを置かないようにします。
cross
レジストレーションマークを印刷することを指定します。これらは通常ページボックスの各辺の外側にある十字形のマークで、印刷工程でシートの位置合わせに使用されます。

トリムマークおよびレジストレーションマークは、ページボックスが印刷可能領域より小さい場合にのみ可視になります。

文書に crop と cross マークを設定するには次のコードを使えます:
@page { marks: crop cross }

7.3. ブリード領域: bleed 記述子

Name: bleed
For: @page
Value: auto | <length>
Initial: auto
Computed value: 指定どおり

このプロパティはページボックスの外側にある ブリード領域 の範囲、すなわちページボックスを超えてどこまで描画をクリップするかを指定します。値の意味は次のとおりです:

auto
markscrop の場合は 6pt に計算され、それ以外の場合はゼロになります。
<length>
各方向において、ブリード領域がページボックスの外側にどれだけ広がるかを指定します。値は負にできる場合がありますが、実装依存の制限があるかもしれません。

7.4. シートに収まらないページボックスのレンダリング

もしページボックスがターゲットのページシート寸法と一致しない場合、ユーザーエージェントは次のいずれかを行うべきです(優先順):

  1. 指定されたサイズでより大きなページシート上にページボックスをレンダリングする。
  2. ページボックスがページシートに収まるなら、ページボックスを90°回転する。
  3. ページボックスをページシートに収まるように縮尺する。(ページボックスのアスペクト比は保持するべきです。)
  4. ページボックスをグラフィカルに「スライス」して複数のページシートに分割する。
  5. オーバーフローしたコンテンツをクリップする(最も望ましくない)。

ユーザーエージェントはこれらの操作を行う前にユーザーに相談することを望むかもしれません。

7.5. シート上でのページボックスの配置

ページボックスがページシートより小さい場合、ユーザーエージェントは次のいずれかを行うべきです:

この点についてユーザーエージェントはユーザーに相談することを望むかもしれません。

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 プロパティの動作は次のとおりです:

  1. まず、いかなる auto 値も非 auto の祖先に対して解決されます(上記のとおり)。
  2. 次に、 start page valueend page value が各ボックスについて決定されます。 これは、それぞれ最初または最後の子ボックスから伝播された値(あれば)か、さもなければそのボックス自身の使用値になります。 子は start または end page value を伝播するのは、かつその場合に限り、page プロパティがその子に適用されるときだけです。

    注: 最初または最後の子のボックスは必ずしも最初または最後の子の要素によって生成されるとは限りません。 例えば、ある要素は 'display: none' の前の兄弟しか持たず、その兄弟はボックスを生成しない場合があります。

  3. ルートの最初に印刷されるページの型はルートの start page value です。
  4. もし、ある class A のブレークポイントで出会う二つのボックスについて、 ブレーク前のボックスの end page value と ブレーク後のボックスの start page value が一致しない場合、 その二つのボックスの間にページ区切りが強制され、 区切り後のコンテンツは指定された型のページボックスで再開されます。

注: 本質的に、比較される2つの page 値は、クラス A ブレークポイントで出会う最深のボックスからのものであり、page プロパティが適用されないボックスをルートとするサブツリーを無視します。

ページ区切りの詳細については [CSS-BREAK-3] を参照してください。

この例では、2つの表は横向きページ上にレンダリングされます(実際、収まるなら同じページ上)。table 要素のページプロパティが有効でなくなるため、2番目の表の後の <p> は "narrow" ページタイプが使用されます:
@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>
日本語文書では、単一の文書の異なる部分で異なる基本版面(kihon hanmen)を持つことがあります。[JLREQ] page プロパティと、異なるページ幅を指定する @page ルールを組み合わせることで、この種のレイアウトに対応できます:
<!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 で扱われないいくつかのユーザーエージェントの転送の可能性には次のようなものがあります:

プライバシーおよびセキュリティに関する考慮事項

この仕様は新たなプライバシーまたはセキュリティ上の考慮事項を導入しません。

変更点

2018年10月18日作業草案(18 October 2018 Working Draft)以来の変更点は次のとおりです:

2013年3月14日作業草案(14 March 2013 Working Draft)以来の変更点は次のとおりです:

謝辞

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 コミュニティの他のメンバーで、本仕様に関するレビューとコメントを提供してくれた皆さん。

準拠性

文書上の慣例

準拠要件は記述的主張と RFC 2119 用語の組み合わせで表現されています。規範的な部分におけるキーワード “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHOULD”, “RECOMMENDED”, “MAY” などは RFC 2119 に記載されたとおりに解釈されます。ただし可読性のため、これらの語は本仕様内で常に大文字で表記されているわけではありません。

この仕様のテキストは、非規範と明示された節、例、注を除きすべて規範的です。[RFC2119]

本仕様の例は “for example” という語で導入されるか、class="example" のように規範的テキストから区別されています。

これは参考情報の例の例です。

参考的な注は “Note” で始まり、class="note" で規範的テキストから区別されます。

注: これは参考情報の注です。

注意喚起(advisements)は規範的節で特別な注意を喚起するために強調表示され、<strong class="advisement"> のように区別されます: UAs MUST provide an accessible alternative.

準拠クラス

本仕様への準拠は 3 つの準拠クラスで定義されます:

スタイルシート
CSS スタイルシート
レンダラ
スタイルシートの意味を解釈し文書をレンダリングする UA
オーサリングツール
スタイルシートを書く UA

スタイルシートが本仕様に準拠しているのは、本モジュールで定義された構文を使うすべての記述が一般的な CSS 文法および各機能の個別文法に従って有効である場合です。

レンダラが本仕様に準拠するのは、スタイルシートを適切な仕様に従って解釈することに加え、本仕様で定義されたすべての機能を正しく解析して文書を適切にレンダリングすることをサポートする場合です。ただし、デバイスの制約により文書を正しくレンダリングできないことは UA の非準拠を意味しません(例えば、モノクロモニタで色をレンダリングする必要はありません)。

オーサリングツールが本仕様に準拠するのは、モジュール内の各機能の文法に従って構文的に正しいスタイルシートを書き、スタイルシートの準拠要件を満たす場合です。

部分的実装

著者がフォールバック値を利用できるように、CSS レンダラは未安定または独自拡張の実装に関して最善の実践に従うことが推奨されます。特に、サポートのない at-ルール、プロパティ、値、キーワード、その他の構文要素は(適切に)無効として扱い無視しなければなりません。特に、サポートされない値がある場合に同一の多値プロパティ宣言の中でサポートされる値だけを選択的に尊重してはならず、そのような場合は宣言全体を無視する必要があります。

不安定および独自機能の実装

将来の安定した CSS 機能との衝突を避けるために、CSSWG は不安定機能や独自拡張の実装に関するベストプラクティスに従うことを推奨します。

非実験的実装

仕様が Candidate Recommendation に達すると、非実験的実装が可能になり、実装者は CR レベルの機能を正しく実装していることを示せる場合、その機能の無接頭辞実装を公開するべきです。

CSS の相互運用性を確立・維持するために、CSS Working Group は非実験的な CSS レンダラに対して実装報告(および必要ならばその実装報告で使ったテストケース)を W3C に提出するよう要請しています。提出されたテストケースは CSS Working Group によってレビューおよび修正の対象となります。

テストケースおよび実装報告の提出に関する詳細は CSS Working Group のウェブサイト https://www.w3.org/Style/CSS/Test/ を参照してください。質問は public-css-testsuite@w3.org 宛てに。

索引

本仕様で定義された用語

参照先で定義された用語

参考文献

規範的参考文献

[CSS-ANCHOR-POSITION-1]
Tab Atkins Jr.; Ian Kilpatrick. CSS Anchor Positioning. 2023-06-29. WD. URL: https://www.w3.org/TR/css-anchor-position-1/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2023-02-14. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-3]
Elika Etemad. CSS Box Model Module Level 3. 2023-04-06. REC. URL: https://www.w3.org/TR/css-box-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 2022-11-03. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018-12-04. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 2018-12-18. WD. URL: https://www.w3.org/TR/css-break-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022-01-13. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-CONTENT-3]
Elika Etemad; Dave Cramer. CSS Generated Content Module Level 3. 2019-08-02. WD. URL: https://www.w3.org/TR/css-content-3/
[CSS-DISPLAY-3]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 3. 2023-03-30. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 4. 2021-12-21. WD. URL: https://www.w3.org/TR/css-fonts-4/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad. CSS Inline Layout Module Level 3. 2023-04-01. WD. URL: https://www.w3.org/TR/css-inline-3/
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. 2023-04-03. WD. URL: https://www.w3.org/TR/css-position-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 2021-12-17. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 2021-12-24. CR. URL: https://www.w3.org/TR/css-syntax-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2023-09-03. CR. URL: https://www.w3.org/TR/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. 2023-03-29. WD. URL: https://www.w3.org/TR/css-text-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2022-12-01. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2023-04-06. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 2019-12-10. REC. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019-07-30. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011-06-07. REC. URL: https://www.w3.org/TR/CSS21/
[CSS22]
Bert Bos. Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. 2016-04-12. WD. URL: https://www.w3.org/TR/CSS22/
[MEDIAQ]
Florian Rivoal; Tab Atkins Jr.. Media Queries Level 4. 2021-12-25. CR. URL: https://www.w3.org/TR/mediaqueries-4/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5. 2021-12-18. WD. URL: https://www.w3.org/TR/mediaqueries-5/
[PWGMSN]
Ron Bergman; Tom Hastings. Media Standardized Names. 2002-02-26. IEEE ISTO Printer Working Group 5101.1-2002. URL: ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997-03. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECT]
Tantek Çelik; et al. Selectors Level 3. 2018-11-06. REC. URL: https://www.w3.org/TR/selectors-3/
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. Selectors Level 4. 2022-11-11. WD. URL: https://www.w3.org/TR/selectors-4/

参考情報(Informative References)

[CSS-DEVICE-ADAPT]
Rune Lillesveen; Florian Rivoal; Matt Rakow. CSS Device Adaptation Module Level 1. 2016-03-29. WD. URL: https://www.w3.org/TR/css-device-adapt-1/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 3. 2020-12-17. CR. URL: https://www.w3.org/TR/css-images-3/
[CSS3GCPM]
Dave Cramer. CSS Generated Content for Paged Media Module. 2014-05-13. WD. URL: https://www.w3.org/TR/css-gcpm-3/
[JLREQ]
千葉弘幸(Hiroyuki Chiba)ほか. Requirements for Japanese Text Layout 日本語組版処理の要件(日本語版). 2020-08-11. NOTE. URL: https://www.w3.org/TR/jlreq/

プロパティ索引(Property Index)

Name Value Initial Applies to Inh. %ages Anim­ation type Canonical order Com­puted value
page auto | <custom-ident> auto class A のブレークポイントを生成するボックス no (but see prose) n/a discrete per grammar specified value

@page 記述子(Descriptors)

Name Value Initial Computed value
bleed auto | <length> auto 指定どおり
marks none | [ crop || cross ] none 指定どおり
page-orientation upright | rotate-left | rotate-right upright 指定どおり
size <length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ] auto 指定された値(<length> は絶対化される)

問題索引(Issues Index)

CSS 2.1 では、page box と page area は単純な長方形でした。 どちらもマージン、ボーダー、パディングを持つ CSS ボックスではありませんでした。 この CSS ボックスは page box と page area とは別物であるべきで、 それぞれがその margin area と content area になるべきです。 命名案はありますか?
未修飾の @page に指定されたサイズに対して、少なくともメディアクエリが応答できると便利でしょう。

別案として、@viewport ルールのようにする方法も考えられます([CSS-DEVICE-ADAPT]): まず @page ルールを適用します(どのセレクタに一致させるかは未定ですが)、 UA のデフォルトページサイズを Media Queries とビューポート割合長に使います(viewport-percentage lengths)。 その結果得られたページサイズを "base page size" とし、 その "base page size" を Media Queries とビューポート割合長に使ってスタイルシート全体を再適用します。