13 ページメディア

目次

注: この仕様の複数の節は、他の仕様によって更新されている。置換された仕様および節のリストの詳細は、最新のCSS Snapshotにおける"Cascading Style Sheets (CSS) — 公式の定義"を参照されたい。

CSS Working Groupはまた、CSS level 2 revision 2 (CSS 2.2).を開発している。

13.1 ページメディア概論

ページメディア(たとえば、紙、OHPフィルム、コンピュータ画面に表示されるページなど)は、文書のコンテンツが1つ以上の別々のページに分割されるという点で連続メディアと異なる。ページを処理するために、CSS 2.1は、ページのマージンがページボックスに設定される方法および改ページを宣言する方法を説明する。

ユーザーエージェントは、文書が(紙、OHPフィルム、画面など)最後にレンダリングされる実際のシートに文書のページボックスを転送する責任がある。多くの場合ページボックスとシートとの間は1対1の関係であるが、常にそうであるとは限らない。転送の可能性は次のとおり:

13.2 ページボックス:@page規則

ページボックスは、次の2つの領域を含む矩形の領域である:

ページボックスのサイズは、CSS 2.1で指定することはできない。

著者は、@page規則内のページボックスのマージンを指定することができる。@page規則は、キーワード"@page"に続いて任意のページセレクタ、 宣言および@規則を含むブロックから成る。コメントおよび空白は、@pageトークンとページセレクタとの間およびページセレクタとブロックの間となる。@page規則における宣言は、ページコンテキスト内にあると言われる。

注:CSS level 2は、@page内に出現してもよい@規則を持たないが、そのような@規則はlevel 3で定義されることが期待される。

ページセレクタは、どのページに宣言を適用するかを指定する。CSS 2.1において、ページセレクタは、最初のページ、すべての左ページ、またはすべての右ページを指定してもよい。

不正な形式の宣言、不正な形式の文、および@page内の不正な@規則を扱うための規則は、以下に加えて4.2節で定義される。ユーザーエージェントが宣言または@規則の開始(すなわち、IDENTトークンまたはATKEYWORDトークン)を予期するが代わりに予期しないトークンを検出する場合、そのトークンは不正な形式の宣言の最初のトークンであると考えられる。すなわち、不正な形式の文よりもむしろ不正な形式の宣言のための規則が、そのような場合に無視できるトークンを決定するために使用される。

13.2.1 ページのマージン

CSS2.1において、マージンプロパティ'margin-top''margin-right''margin-bottom''margin-left'、および'margin')のみがページコンテキスト内で適用される。次の図はシート、ページボックス、およびページマージンとの関係を示す:

シート、ページボックス、マージン、ページ領域の図   [D]

例:

すべてのページマージンを設定する簡単な例は次のとおり:

@page {
  margin: 3cm;
}

ページコンテキストはフォントの概念を持たないので、'em'および'ex'単位は許可されない。マージンプロパティのパーセント値は、ページボックスの次元に対して相対的である。左右のマージンに対して、マージンはページボックスの幅を参照し、一方上下のマージンに対して、マージンはページボックスの高さを参照する。個別のCSS 2.1プロパティに関連付けられた他の単位すべてが許可される。

負のマージン値(ページボックス上または要素上のいずれか)または絶対位置決めのためのコンテンツは、ページボックスの外側で終わってもよいが、このコンテンツはユーザーエージェント、プリンタ、または最終的には、ペーパーカッターによって"カット"されてもよい。

13.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規則で指定されるものを上書きする。

強制改行が最初の生成ボックスの前に発生する場合、':first'がその改行の前の空白ページに、またはその後にページに適用されるかどうか、CSS2.1で未定義である。

左、右、および最初のページのマージンの宣言は、異なるページ領域の幅になってもよい。実装を簡素化するために、ユーザーエージェントは、左、右、および最初のページの単一のページ領域幅を使用してもよい。この場合、最初のページのページ領域幅を使用すべきである。

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

ページモデルでコンテンツを整形する場合、一部のコンテンツは、現在のページボックスの外側で終わってもよい。たとえば、'white-space'プロパティが値'pre'を持つ要素は、ページボックスよりも幅が広いボックスを生成してもよい。別の例として、ボックスが絶対または相対配置される場合、そのボックスは最後に"不便な"場所になるかもしれない。たとえば、画像はページボックスの下辺またはページボックスの下100,000メートルに配置されてもよい。

そのような要素の実際の整形はこの仕様の範囲外である。しかし、著者およびユーザーエージェントは、ページボックス外のコンテンツに関して次の一般的な原則を遵守することを推奨する:

13.3 改ページ

この節は、CSS 2.1における改ページを説明する。5つのプロパティは、ユーザーエージェントがどこで改ページをしてもよいか、またはすべきであるか、およびどの(左または右)ページで後続のコンテンツを再開すべきかを示す。各改ページは、現在のページボックスでレイアウトを終了し、新しいページボックスにおけるレイアウトを文書ツリーの残りの部分にもたらす。

13.3.1 改ページプロパティ'page-break-before''page-break-after''page-break-inside'

'page-break-before'
値:  auto | always | avoid | left | right | inherit
初期値:  auto
適用対象:  ブロックレベル要素(ただしテキスト参照)
継承:  no
パーセンテージ:  利用不可
メディア:  visual, paged
算出値:  指定される
'page-break-after'
値:  auto | always | avoid | left | right | inherit
初期値:  auto
適用対象:  ブロックレベル要素(ただしテキスト参照)
継承:  no
パーセンテージ:  利用不可
メディア:  visual, paged
算出値:  指定される
'page-break-inside'
値:  avoid | auto | inherit
初期値:  auto
適用対象:  ブロックレベル要素(ただしテキスト参照)
継承:  no
パーセンテージ:  利用不可
メディア:  visual, paged
算出値:  指定される

これらのプロパティの値は以下の意味を持つ:

auto
生成ボックスの前(後、内部)で改ページを強制も禁止もしない。
always
生成ボックスの前(後)で常に改ページを強制する。
avoid
生成ボックスの前(後)で常に改ページを避ける。
left
次のページが左ページとして整形できるように、生成ボックスの前(後)に1つまたは2つの改ページを強制する。
right
次のページが右ページとして整形できるように、生成ボックスの前(後)に1つまたは2つの改ページを強制する。

適合ユーザーエージェントは'always'として'left'と'right'の値を解釈してもよい。

潜在的な改ページの位置は、典型的に 親要素の'page-break-inside'プロパティ、前の要素の'page-break-after'のプロパティ、次の要素の'page-break-before'プロパティの影響のもとにある。これらのプロパティが'auto'以外の値を持つ場合、値'always'、'left'、および'right'は'avoid'よりも優先する。

ユーザーエージェントは、ルート要素の通常フローのブロックレベル要素にこれらのプロパティを適用しなければならない。ユーザーエージェントはまた、他の要素(たとえば、'table-row'要素)にこれらのプロパティを適用してもよい。

改ページがボックスを分割する場合、ボックスのマージン、ボーダー、パディングは、分割が出現する場所で視覚効果を持たない。

13.3.2 要素の内側の改ページ'orphans''widows'

'orphans'
値:  <integer> | inherit
初期値:  2
適用対象:  ブロックコンテナ要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual, paged
算出値:  指定される
'widows'
値:  <integer> | inherit
初期値:  2
適用対象:  ブロックコンテナ要素
継承:  yes
パーセンテージ:  利用不可
メディア:  visual, paged
算出値:  指定される

'orphans'プロパティは、ページの下部に残さなければならないブロックコンテナ内の行の最小数を指定する。'widows'プロパティは、ページの上部に残さなければならないブロックコンテナにおける行の最小数を指定する。これらが改ページを制御するために使用される方法の例を以下に示す。

正の値のみが許可される。

段落の整形についての詳細は行ボックスを参照のこと。

13.3.3 改ページの許可される場所

通常フローにおいて、改ページは次の場所で出現することができる:

  1. ブロックレベルボックス間の垂直方向のマージンの中。非強制改ページがここに出現する場合、関連する'margin-top'および'margin-bottom'プロパティの使用値は'0'に設定される。強制改ページがここに出現する場合、関連する'margin-bottom'プロパティの使用値は'0'に設定される。関連する'margin-top'の使用値は、'0'に設定されるか保持されるかのいずれかであってもよい。
  2. ブロックコンテナボックス内の行ボックスの間。
  3. (0でない)間隔がある場合、ブロックコンテナボックスのコンテンツ辺とその子のコンテンツの外辺(インラインレベルの子のためのブロックレベルの子または行ボックス辺のマージン辺)の間。

注:CSS3は、強制改ページの後に関連する'margin-top'の適用(すなわち、'0'に設定されない)を指定することが期待される。

これらの改ページは、次の規則に従うことを前提とする:

上記が、ページボックスのあふれからのコンテンツを維持するための十分な改ページ位置を提供しない場合、追加の改行位置を見つけるために、規則A、B、Dの順番を破棄する。

それでも満足する改ページ位置にならない場合、改行位置を見つけるために、同様に規則Cを破棄する。

13.3.4 強制改ページ

このマージンに接触するすべての生成ボックスの'page-break-after''page-break-before'プロパティの間で、値'always'、'left'、'right'の少なくとも1つがある場合、(1)で改ページは出現しなければならない

13.3.5 最適な改ページ

CSS 2.1は、どの一連の許可される改ページが使用されなければないらないかを定義しない。CSS 2.1は可能な改ページ位置で改ページするか、まったく改行しないことをユーザーエージェントに禁止しない。ただし、CSS 2.1は、ユーザーエージェントが以下の経験則を(これがときどき矛盾していることを認識しつつ)を順守することを推奨する:

例:

たとえば、スタイルシートが'orphans: 4'、'widows: 2'を含み、現在のページの下部に使用可能な20行(行ボックス)があると仮定する:

'orphans'が'10'、'widows'が'20'、そして現在のページの下部に使用可能な8行が存在すると仮定する:

13.4 ページコンテキストにおけるカスケード処理

ページコンテキスト内の宣言は、通常のCSS宣言と同様にカスケード処理に従う。

例:

以下の例を考えてみる:

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

疑似クラスセレクタの詳細度の高さのために、左ページの左マージンは'4 cm'となり、他のすべてのページ(つまり、右ページ)は'3 cm'の左マージンを持つ。