CSS での簡単な柱の実現方法を解説します。FO での柱は、<fo:marker> と <fo:static-content> などを利用して行ないますが、CSS ではまったく異なる方法で行ないます。
- 柱を出す位置を決めます。
@page { @top-right { content: element(xxx, first); } }この例では、ページの右上 top-right に柱を出すことを示しています。xxx と first については後述します。
- 柱用の class を決めます。
.header { position: running(xxx); }ここでは header という class名を用います。xxx は、先の element で指定した柱の名前です。
- HTML本文中の適当な位置に、柱を挿入します。
<h1><span class="header">Lorem Ipsum</span > Lorem Ipsum </h1> <p>Lorem ipsum dolor sit amet, ...</p> <h1><span class="header">Aenean varius porta</span> Aenean varius porta </h1> <p>Proin vestibulum. Phasellus lacus magna, ...</p> ...ここで、<span class="header"> の内容が柱となります。この内容は、本文中には表示されません。
- ページ中に出現する複数の柱の要素に対して、element に first を指定すると最初に出現した柱が、last を指定すると最後に出現した柱が採用されます。柱の要素が出現しなければ、直前のページの柱と同じ柱となります。
- ついでに、ノンブルを付けるには次のようにします。
@bottom-center { content: "-" counter(page) "-"; }この例では、ページの下中央に “- 1 -“, “- 2 -“… とノンブルを出力します。
このファイルを見れば特定のオブジェクトがどの位置に、どのくらいの大きさで配置されるかが分かるわけです。
