ページメディア

Revised: Jun./26th/2004

ページメディアと連続メディア

コンピュータスクリーンは、文書の矩形領域を切り取って表示しますが、スクロール機構によって非表示領域にも連続的にアクセス可能な連続メディアです。一方、印刷物やフォイル（OHP シート）といったページメディアは、改ページによってアクセスされます。

ページメディアは、矩形領域のページボックスを生成して、文書をフォーマット化します。ユーザエージェントは、ページボックスを実際の紙や OHP シートに変換して出力します。

ページメディアは、@media で、embossed（点字プリンタ）, print（プリンタ）, projection（プロジェクタ）を指します。handheld と tv は、ページメディアと連続メディアの両方の特性を持つとされます。

/* print メディア用に外部スタイルシートをインポート */
@import url(../print.css) print;

/* print メディア用のスタイルシート記述 */
@media print {
  @page { margin: 3cm }
  body { font-size: 10pt }
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

`margin`

ページメディアを指定するセレクタは、@page です。ページボックスは、プロパティにマージン（余白）だけを持ち、パッディングとボーダーを持ちません。

@page { margin: 3cm }

`:first`, `:left`, `:right`

見開き形式の印刷物の場合は、右ページと左ページに、異なるスタイルを指定したい場合があります。左ページの左マージンを 3cm、右マージンを 1.5cm とするとき、右ページでは逆に、左マージンを 1.5cm、右マージンを 3cm にしたいかもしれません。このとき、@page の擬似要素 :left と :right をセレクタにして指定します。

@page:left {
	margin-left: 3cm;
	margin-right: 1.5cm
}
@page:right {
	margin-left: 1.5cm;
	margin-right: 3cm
}

:first 擬似要素を使えば、一ページ目だけ特別扱いできます。

@page:first { margin: 10cm 3cm }

改ページの明示的な指定

要素中の改ページの有無を指定することができます。

改ページ関連のプロパティは、ブロックレベル要素に指定可能です。セレクタにマッチした対象前後の改ページの有無を指定できます。

プロパティ '`page-break-before`'
プロパティ名	値
page-break-before	auto \| always \| avoid \| left \| right \| inherit

プロパティ '`page-break-after`'
プロパティ名	値
page-break-after	auto \| always \| avoid \| left \| right \| inherit

プロパティ '`page-break-inside`'
プロパティ名	値
page-break-inside	avoid \| auto \| inherit

'page-break-before'と'page-break-after'は子要素に継承されます。'page-break-inside' は子要素に継承されません。デフォルトの値は auto です。inherit は、親要素の値を明示的に継承する指定です。

auto: 生成されるボックスの前／後／内部の改ページを強制も禁止もしない。
always: 生成されるボックスの前／後／内部で常に改ページする。
avoid: 生成されるボックスの前／後／内部で改ページしない。
left: 生成されるボックスの前／後の 1 回か 2 回改ページすることで、次のページを左ページとしてフォーマットされる。
right: 生成されるボックスの前／後の 1 回か 2 回改ページすることで、次のページを右ページとしてフォーマットされる。

h1 { page-break-before: left }
h2 { page-break-before: always }

改ページの動的な制御

'page-break' 関連の三つのプロパティによる明示的な指定だけではなく、ページの最後／最初に含まれる最低の行数によって、改ページ位置を柔軟に指定することができます。

プロパティ '`orphans`'
プロパティ名	値
orphans	<integer> \| inherit

プロパティ '`widows`'
プロパティ名	値
widows	<integer> \| inherit

'orphans'と'widows' は子要素に継承されます。デフォルトの値は 2 です。inherit は、親要素の値を明示的に継承する指定です。

'orphans' は、ページの下部に残さなければならない最小行数を指定します。 'widows' は、ページの上部に残さなければならない最小行数を指定します。

例えば、現在のページの末尾に 3 行利用可能で、 'orphans: 5' である場合、レンダリングが必要なブロックの行数が 3 行以下であれば、現在のページにレンダリングし、4 行以上であれば、ブロック前に改行して次のページにレンダリングします。

ページメディア