HTMLから覗き見るCSS組版とXSL-FO組版

DITAのHTMLへの変換をやっていてしみじみわかるのですが、HTMLへの変換をカスタマイズするのにCSSをちょこちょこっと修正して、それが一発で生成したHTMLに反映されるのはある意味「快感」です.何かとても自分がすべてをコントロールしているように思えてくるのです.HTMLへの変換というのはざっくり言えば

 ・ブロック要素のテーブルやリストはHTMLのtable/ul/olに変換される.
 ・その他のブロック要素はdivに変換される.
 ・インライン要素はspanに変換される.

と極めて単純です.そして重要なのは、DITAの要素毎にDTDスキーマで定義されたclass属性の値を参考にして、HTMLのクラス属性にそれが反映されるという事です.

例えばよくあるパターンですが、figに番号付きの画像を配置して、その下にリストで番号に対する解説を付けるという場合があります.普通この解説はdlでやるらしいのですが、dlはオーサリングの手間が結構あるので次のようにsl(Simple List)で表現してみました.

    <fig id="fig_et5_btx_wx">
       <image placement="break" keyref="IMG_006_02" id="image_lr2_2tx_wx"/>
       <sl>
          <sli><fpnum>1</fpnum> フォルダアイコン</sli>
          <sli><fpnum>2</fpnum> パソコンアイコン</sli>
          <sli><fpnum>3</fpnum> プリンタアイコン </sli>
          <sli><fpnum>4</fpnum>  ステータス表示エリア</sli>
       </sl>
    </fig>

ここでfpnumというのは、image中の番号を参照するものとして特殊化で追加した要素です.一般にはここに番号を入れます.

これはDITA-OTのHTMLへの変換では次のようになります.

    <figure class="fig fignone" id="concept_2MainWindow__fig_et5_btx_wx">
       <br><img class="image" id="concept_MainWindow_image_lr2_2tx_wx" src="../image/fig_02.gif"><br>
       <ul class="sl simple">
          <li class="sli"><span class="ph fpnum">1</span> フォルダアイコン</li>
          <li class="sli"><span class="ph fpnum">2</span> パソコンアイコン</li>
          <li class="sli"><span class="ph fpnum">3</span> プリンタアイコン </li>
          <li class="sli"><span class="ph fpnum">4</span>  ステータス表示エリア</li>
       </ul>
    </figure>

注意いただきたいのですが、ここでspan/@classには次のfpnumのDTDの定義が反映されているということです.

<!ATTLIST  fpnum %global-atts;  class CDATA "+ topic/ph num-d/fpnum ">

そしてDITA-OTは実によくやってくれるのですが、例えばfpnumに@outputclass="folder"などと書けばそれも@class属性に反映してくれます.

    <sli><fpnum outputclass="folder">1</fpnum> フォルダアイコン</sli>


    <span class="ph fpnum folder">1</span>
    
となります.あとはこれに従って特別なスタイル付けをするCSSを書けばよい訳です.例えば

    span.fpnum{
         font-weight: bold;
    }

これでfpnumは太字表示になってくれます.outputclassを尊重することもできるでしょう.(CSSの当てられるプライオリティを考慮する必要があります.)

基本はこの筋書きで、もっと特殊なことをやりたければ、自分でHTML(HTML5もしくはXHTML)のプラグインを直してやるしかありません.しかしCSSでスタイリングするという手法はこのように「技術的には極めて単純な仕組み」以上の何物でもありません.

CSS組版は基本的にはXHTMLを作ってそこから組版してPDFを生成します.HTMLを作ることと基本的に等価なわけです.もちろんHTMLとして作る場合のCSSとページメディアに出力する場合のCSSはそもそも異なるでしょう.HTMLはピクセルユニットが基本ですが、ページメディアではピクセル単位は意味を成しません.(それでもともかくPDFになってほしいというならCSSを共通にもできるでしょうけれども)

XSL-FOはロジックを重ねれば、極めて複雑なレイアウトをFO(フォーマッティングオブジェクト)の組み合わせで表現できますが、CSSでは複雑なことをやろうとすればするだけどんどんスタイルの迷路にはまり込むことは明白です.そもそものアーキテクチャから逃れることはできないからです.

たぶんそうだと思うのですが、HTML+CSSから入ってきた人は、XSL-FOなんてなんでこんなコストの高いことをやらなければならないんだ!と思うのでしょう.確かにXSL-FOはHTMLのように「ちょこちょこっと」は作れません.ページマスター(fo:layout-master-set)を作らなければならないし、ページシーケンス(fo:page-sequence)を作らねばなりません.つまるところ固定費が高いのです.ですのでなじまない人もいるのでしょう.

固定費が高い代わりにそこには高いビルディングを立てることが出来ます.でもCSSでは固定費がない代わりに3階建て以上のもの(もしくは複雑な仕様の建物)を立てようとするとどんどん大変になります.

簡単なことを簡単な方法でつくることは賛成ですが、それ以上のことに頭をつっこまないのが身のためだと思います.CSSはHTMLのクラス属性にスタイルを関連付けるという極めて単純な仕組みを越えられる技術ではないからです.

以下はCSSを推し進める側のW3CのLiam Quin自身がこの時点でCSSがXSL-FOを越えられない(?)一覧をリストアップしたものです.XSL-FOは実に良くできているのです.

CSS XSLFO Gap Analysis

CSS組版をやろうとする場合には、あらかじめよくその本質と限界を見定める必要があるのではないでしょうか?決して「CSSなら安く上げられる!」などとは思わないことです.