CSS での簡単な柱の実現方法を解説します。FO での柱は、<fo:marker> と <fo:static-content> などを利用して行ないますが、CSS ではまったく異なる方法で行ないます。

1. 柱を出す位置を決めます。

       @page {
         @top-right {
           content: element(xxx, first);
         }
       }
   

   この例では、ページの右上 top-right に柱を出すことを示しています。xxx と first については後述します。

2. 柱用の class を決めます。

       .header {
         position: running(xxx);
       }
   

   ここでは header という class名を用います。xxx は、先の element で指定した柱の名前です。

3. 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"> の内容が柱となります。この内容は、本文中には表示されません。

4. ページ中に出現する複数の柱の要素に対して、element に first を指定すると最初に出現した柱が、last を指定すると最後に出現した柱が採用されます。柱の要素が出現しなければ、直前のページの柱と同じ柱となります。
5. ついでに、ノンブルを付けるには次のようにします。

       @bottom-center {
         content: "-" counter(page) "-";
       }
   

   この例では、ページの下中央に “- 1 -“, “- 2 -“… とノンブルを出力します。

Tweet