CSSページ化メディア-@pageルール

ページメディアは、ドキュメントのコンテンツが1つ以上の個別のページに分割されるという点で連続メディアとは異なります。ページングされたメディアには、紙、OHPフィルム、コンピューターの画面に表示されるページなどが含まれます。

CSS2標準では、ブラウザがドキュメントを最適に印刷する方法を作成者が理解できるようにするいくつかの基本的なページ付け制御機能が導入されています。

CSS2ページモデルは、有限の幅と高さを持つ長方形の領域（ページボックス）内でのドキュメントのフォーマット方法を指定します。これらの機能は2つのグループに分類されます-

特定のページレイアウトを定義するCSS2機能。
ドキュメントのページネーションを制御するCSS2機能。

ページの定義：@pageルール

CSS2は、コンテンツがレンダリングされる有限サイズのボックスである「ページボックス」を定義します。ページボックスは、2つの領域を含む長方形の領域です-

ページ領域-ページ領域には、そのページに配置されたボックスが含まれます。ページ領域の端は、改ページの間に発生するレイアウトの最初の包含ブロックとして機能します。
マージン領域-ページ領域を囲みます。

@pageルール内のページボックスのサイズ、方向、余白などを指定できます。ページボックスのサイズは、 'size’プロパティで設定されます。ページ領域の寸法は、ページボックスの寸法からマージン領域を引いたものです。

たとえば、次の@pageルールは、ページボックスのサイズを8.5×11インチに設定し、ページボックスの端とページ領域の間のすべての辺に「2cm」のマージンを作成します-

<style type = "text/css">
   <!--
      @page { size:8.5in 11in; margin: 2cm }
   -->
</style>

@pageルール内で_margin、margin-top、margin-bottom、margin-left、およびmargin-right_プロパティを使用して、ページのマージンを設定できます。

最後に、@ pageルール内で_marks_プロパティを使用して、ターゲットシートのページボックスの外側にトリミングマークとレジストレーションマークを作成します。デフォルトでは、マークは印刷されません。 _crop_キーワードと_cross_キーワードの一方または両方を使用して、ターゲットの印刷ページにそれぞれトンボとレジストレーションマークを作成できます。

ページサイズの設定

_size_プロパティは、ページボックスのサイズと向きを指定します。ページサイズに使用できる4つの値があります-

auto -ページボックスは、ターゲットシートのサイズと向きに設定されます。
landscape -ターゲットの向きをオーバーライドします。ページボックスはターゲットと同じサイズで、長辺は水平です。
portrait -ターゲットの向きをオーバーライドします。ページボックスはターゲットと同じサイズで、短辺は水平です。
length -'size’プロパティの長さの値は、絶対ページボックスを作成します。長さの値が1つだけ指定されている場合、ページボックスの幅と高さの両方が設定されます。 'size’プロパティにはパーセント値を使用できません。

次の例では、ページボックスの外側の端がターゲットに揃えられます。 'margin’プロパティのパーセンテージ値はターゲットサイズに関連するため、ターゲットシートの寸法が21.0cm×29.7cm（つまりA4）の場合、マージンは2.10cmと2.97cmです。

<style type = "text/css">
   <!--
      @page {
         size: auto;  /*auto is the initial value*/
         margin: 10%;
      }
   -->
</style>

次の例では、ページボックスの幅を8.5インチに設定し、高さを11インチに設定します。この例のページボックスには、8.5 "×11"以上のターゲットシートサイズが必要です。

<style type = "text/css">
   <!--
      @page {
         size: 8.5in 11in; /*width height*/
      }
   -->
</style>

名前付きページレイアウトを作成したら、後でドキュメント内の要素に適用されるスタイルにページプロパティを追加することで、ドキュメント内で使用できます。たとえば、このスタイルは、ドキュメント内のすべてのテーブルを横向きページにレンダリングします-

<style type = "text/css">
   <!--
      @page { size : portrait }
      @page rotated { size : landscape }
      table { page : rotated }
   -->
</style>

上記の規則により、印刷中に、ブラウザがドキュメント内で<table>要素を検出し、現在のページレイアウトがデフォルトの縦向きレイアウトである場合、新しいページを開始し、横向きページにテーブルを印刷します。

左、右、および最初のページ

両面ドキュメントを印刷する場合、左右のページのページボックスは異なるはずです。次のように2つのCSS擬似クラスを介して表現することができます-

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 4cm;
         margin-right: 3cm;
      }

      @page :right {
         margin-left: 3cm;
         margin-right: 4cm;
      }
   -->
</style>

：first擬似クラスを使用して、ドキュメントの最初のページのスタイルを指定できます-

<style type = "text/css">
   <!--
      @page { margin: 2cm }/*All margins set to 2cm*/

      @page :first {
         margin-top: 10cm   /*Top margin on first page 10cm*/
      }
   -->
</style>

ページネーションの制御

特に指定しない限り、改ページは、ページ形式が変更されたとき、またはコンテンツが現在のページボックスをオーバーフローしたときにのみ発生します。それ以外の場合は、改ページを強制または非表示にするには、_page-break-before、page-break-after、_および_page-break-inside_プロパティを使用します。

page-break-before_と_page-break-after_の両方は、_auto、always、avoid、left、、および_right_キーワードを受け入れます。

キーワード_auto_はデフォルトであり、ブラウザが必要に応じて改ページを生成できるようにします。キーワード_always_は、要素の前後に改ページを強制しますが、_avoid_は、要素の直前または直後に改ページを抑制します。 _left_および_right_キーワードは、1つまたは2つの改ページを強制するため、要素は左ページまたは右ページに表示されます。

ページネーションプロパティの使用は非常に簡単です。ドキュメントにレベル1ヘッダーがあり、セクションを示すレベル2ヘッダーで新しい章を開始するとします。各章を新しい右側のページから開始したいが、セクションヘッダーを後続のコンテンツの改ページで分割したくない場合。あなたは次のルールを使用してこれを達成することができます-

<style type = "text/css">
   <!--
      h1 { page-break-before : right }
      h2 { page-break-after : avoid }
   -->
</style>

_page-break-inside_プロパティでは、_auto_および_avoid_の値のみを使用してください。可能な場合、テーブルがページ間で分割されないようにする場合は、ルールを記述します-

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

未亡人と孤児の管理

活版印刷の用語では、オーファンは改ページによりページの下部に取り残された段落の行であり、未亡人は改ページ後にページの上部に残る行です。一般に、印刷されたページは、一行のテキストが上部または下部に取り残された状態では魅力的に見えません。ほとんどのプリンターは、各ページの上部または下部に少なくとも2行以上のテキストを残そうとします。

orphans プロパティは、ページの下部に残す必要がある段落の最小行数を指定します。
widows プロパティは、ページの上部に残す必要がある段落の最小行数を指定します。

各ページの下部に4行、上部に3行を作成する例を次に示します-

<style type = "text/css">
   <!--
      @page{orphans:4; widows:2;}
   -->
</style>

Css-paged-media

目次