デザイナーガイド

改ページ抑制されたブロックがページをはみ出す場合、ブロックごと次のページに送られます。 また、段落自体がページの大きさより大きい場合、ブロックの途中では改ページされずページをはみ出します。 はみ出しを防ぐためには、そのブロックが必ず1つのページに収まるようにしてください。

また、改ページの抑制はブロックの直前と直後に対しても指定することができます。 例えば、見出しの直後や箇条書きの直前で改ページされるのは不恰好なので、 これらの改ページを抑制したい場合があります。

ブロックの前後での改ページを抑制するには、page-break-before(ブロックの前)あるいは page-break-after(ブロックの後)プロパティの値にavoidを指定します。 CSSJは改ページが抑制された箇所での改ページを避け、前後の何行かを必ず1つのページに含めるようにします。 改ページが抑制されたポイントの前後の何行目まで改ページの抑制の効果があるかは、 後で説明するwindows,orphansプロパティに依存します。

なお、強制改ページや改ページの抑制をしない場合はautoと指定します。 以下の例では、見出しの後の改ページを避けないように、 h1〜h6に対してpage-break-after: auto;という指定をしています。

結果として、以下のように見出しの直後で改ページされるという好ましくない結果が起こりえます。

先のソースのautoの指定をavoidに変えると、改ページ直前の見出しを強制的に次のページに持ってゆきます。 結果として、表示結果は以下のようになります。

なお、CSSJではHTMLのh1〜h6要素がデフォルトで直後の改ページが抑制されています。

また、これらの指定は強制改ページと競合する場合があります。 例えば、page-break-after: always;と指定された段落の直後に、 page-break-before: avoid;と指定された段落がある場合です。 このような競合が起こった場合、常に強制改ページが優先されます。 つまり、このケースではpage-break-before: avoid;は無視されて改ページが発生します。

windows,orphans

ドキュメントや帳票が改ページされるとき、最後のページに1行だけ印刷されて終わってしまうことがあります。 これは好ましいことではありませんし、だからといってページのスペースが足りない以上、改ページしないわけにはいきません。 このようなもどかしい状況を解決するためにあるのが、段落に対するwindowsとorphansの指定です。

windowsは改ページされた後のページに最低限表示されなければならない行数です。 例えば、windowsが2の場合、以下の例では2ページ目に2行存在するので要件を満たしています。

同じ文書でwindowsが3に指定されていればどうでしょうか？ この場合、以下のように前のページから次のページへ行を移動して、windowsを満たすようにします。

orphansは逆に、改ページされる前のページに最低限残さなければならない行数です。 行数がorphansに達していないのに、改ページをしなければならない場合、 CSSJはいっそのことブロックを丸ごと次のページに移動しようとするでしょう。

また、windowsとorphansは競合することがあります。 すなわち、windowsを満たすために前のページの行を移動するとorphansが満たされない場合です。 このときは、ブロックごと次の行に移動することになります。

そもそもブロックに含まれる行が、windowsやorphansに満たない場合はどうでしょうか。 このような場合、ブロックは前のページに残るか、全て次のページに移動されるかのどちらかです。

以下のような表示になるには、複数の場合が考えられます。 windows、orphansが共に2であるなら、以下のようにはならないでしょう。 なぜなら、段落2の4,5行目を次ページに移動するだけで要件を満たせるからです。 orphansが4以上の場合、windowsが5以上の場合、あるいはwindows、orphansが共に3以上であれば段落2を丸ごと次ページに移動する以外に要件を満たす方法がありません。

windows,orphansは、ブロック要素に対するwindows,orphansプロパティで指定することができます。

このドキュメント(デザイナーガイド)のPDF版を注意深く読めば、灰色のブロックで表される「HTMLソース」が、内容が短い場合は改ページされず、 内容が長い場合は改ページされていることに気づかれるでしょう。 実は、灰色のコード・サンプルにはwindows: 10; orphans: 10;という指定がされています。 「改ページされて欲しくはないけど、全く改ページされないのは困る」というもどかしい状況に直面したら、 windows,orphansを大きめに指定してみることをおすすめします。

ページ番号の表示

position: fixed;と指定されたブロックは、一般のブラウザでは画面上に固定されますが、 CSSJでは各ページの同じ位置に再表示されます。 さらに、拡張機能として、contentプロパティによる内容の生成と、カウンタの操作がページ毎に実行されます。 これを利用して、ページ番号を振ることができます。

<style type="text/css">
  #page-number {
    position: fixed;
    bottom: -1cm;
    text-align: center;
    width: 100%;
  }
  #page-number:before {
    counter-increment: page;
    content: counter(page);
  }
</style>
<div id="page-number"></div>

詳細は「資料集」の「固定位置決めされるブロックの内容の再生成」を参照してください。

テーブル

自動テーブルと固定テーブル

CSSJはCSS2.1の自動レイアウトテーブルと、固定レイアウトテーブルの両方をサポートしています。

自動レイアウトテーブルは、テーブルの内容に合わせてテーブルや列の幅を調整するもので、 一般のブラウザの多くが昔からサポートしているものです。 自動レイアウトテーブルは、テーブルや列の幅を指定しなくても、大体丁度良いレイアウトに調整される反面、 自動で調整された結果が、必ずしもデザイナのイメージ通りにならない場合があります。 また、テーブル全体の情報をもとにレイアウトが調整されるため、CSSJはテーブルの全ての内容を一旦読み込まなければならず、 何十ページにも渡る大きなテーブルでは、パフォーマンスの問題が生じます。

固定レイアウトテーブルは、テーブルや列の幅を最初から指定するものです。 テーブルの内容に関わらずレイアウトは固定されるため、デザイナがテーブルのレイアウトを把握することが容易です。 また、複数ページに渡るテーブルの場合も全体を読み込む必要がないため、大きなテーブルになるほど、 自動レイアウトより高速に処理することができます。 ただし、デザイナはテーブルの内容がはみ出さないように注意して、テーブルのレイアウトを指定する必要があります。

固定レイアウトテーブルでは、各列の幅を指定しない限りは、内容とは無関係に均等に幅が割り振られます。

デフォルトでは自動レイアウトテーブルになります。 固定レイアウトテーブルを作成するには、テーブルに対してtable-layout: fixed;を適用してください。 また、各列の幅を指定するには、最初の行のセルあるいはHTMLのcol要素の、width属性かCSSのwidthプロパティを使ってください。

テーブル中での改ページ

テーブル中で改ページできる位置は、テーブルの行間です。 テーブルセル内では改ページされないので、テーブルセルは常にページの大きさより十分に小さくなるように気をつける必要があります。

テーブルに表題(caption)、ヘッダ(thead)、フッタ(tfoot)がある場合、それらはページ毎に再表示されます。

テーブル内では、行に対するpage-break-beforeおよびpage-break-afterの指定ができます。 これは段落に対する指定と同様に、強制改ページと改ページの抑制を指定することが出来ます。 例えば、帳票なので明細の後に合計が表示される場合、合計欄の直前で改ページされてしまうことは避けたいものです。 このような場合、合計蘭の直前に改ページの抑制を指定することで見やすい改ページをすることができます。

PDFへの変換

フォント

CSSJがサポートするフォントには、次のものがあります。

• 欧文基本14フォント
• 等幅明朝体、等幅ゴシック体
• TrueType外部フォント
• CFF/Type2埋め込みフォント

フォントは、font-family,font-weight,font-styleおよびfontプロパティによって指定されます。 CSSJはこれらの指定の組み合わせに最も近いフォントを選択して利用します。

font-familyは大文字小文字を区別しません。また、空白文字やハイフンは無視されます。 従って、font-family: "Times-Roman";という指定と font-family: "TIMESROMAN";という指定は同じです。 フォント・ファミリには正式なフォント名、大まかなファミリ名、あるいは別名(エイリアス)を指定することができます。 大まかなファミリ名が指定された場合は、さらにfont-weight,font-styleを手がかりにフォントを選択します。

欧文基本14フォントのCourier,Helvetica,Timesには太字(bold)と斜体(italic)と両者を組み合わせたものが用意されています。 font-weight: bold;およびfont-style: italic;という指定をすることでそれらのフォントを選ぶことができます。 font-weightにさらに太い指定をした場合(font-weight: 900;など)、 フォントの輪郭をプログラムで拡張し、太いフォントを表現します。 また、font-styleにitalicあるいはobliqueと指定したにもかかわらず斜体のフォントが見つからない場合は、 プログラムでフォントを傾けます。