CSS での柱

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 -“… とノンブルを出力します。