XSL-FO と CSSの比較
XML Prague 2022

Tony Graham
XML Division
Antenna House, Inc.
tgraham@antenna.co.jp
tony@antennahouse.com@tgraham_antenna

XSL-FOとCSSの比較• はじめに• XSL-FOとCSS• XSL-FOとCSSの比較：書籍の製作

なぜ？
• お客様からの要望• どんなとき役立つか:• XSL-FO と CSS のどちらを使用するか検討中• どちらか一方に精通しており、もう一方についてさらに詳しく知りたい• 両方を使っていて、違いについてもっと知りたいXSL-FOとCSS• 歴史• 異なる視点• 機能の比較

歴史YearXSL-FOCSS

1996 DSSSL

CSS 1

1998

CSS 2

1999

初版CSS 3ドラフトHTML
XHTML 1.0

2001 XSL 1.0

XHTML 1.1

2004

WHAT WG 結成

2006 XSL 1.1, XSL-FO 2.0 ワークショップ

HTML WG 再認可

2009 XSL-FO 2.0 デザインノーツ
2011

CSS 2.1

2018

CSSスナップショット2018
W3CがHTML5をWHAT WGに譲渡2019
2020

CSS スナップショット2020

XSL-FOとCSSのプロパティ

CSSユーザは XSL-FOをどう見ているか• ソースは使用前に変換する必要がある• 各プロパティに個別の属性を指定するのは冗長• XSLTの代わりにJavaScriptを使用できる• FOはdisplay属性が固定値の要素• XSL-FOはWebや印刷には使用できない• CSSはXSL-FOよりも学びやすい• CSSユーザの方が多い

XSL-FOユーザはCSSをどう見ているか• CSS は「ツリーを飾るだけ」• CSSセレクタは下向きにも前向きにもならない• CSSは要素に対してのみ動作する

機能の比較••••••••••ボックスレイアウト
ページレイアウト
ヘッダ＆フッタ
多段組分割制御段落設定
脚注＆傍注
表
リスト
文字の設定

••
••••
•
•
•

日本語組版
相互参照
画像の配置
MathML & SVG
カウンタ
色ボーダー＆背景
PDF出力
索引

ボックスレイアウト

ページレイアウト – XSL-FOページレイアウト – CSS

ヘッダ＆フッタ – XSL-FO

ヘッダ＆フッタ – CSSXSL-FOとCSS の比較: 書籍の製作

XSL-FOとCSS を比較

ブロック図HTMLの拡張• 目次を更新• ヘッダとサイドタブコンテンツを生成する• サイドタブのオフセットを計算する• コードブロックにシンタックスハイライ
トを適用

CSS スタイル• 『CSSページ組版入門』のスタイルに基づく• 再利用のために処理を再編
成、スタイルの変更は最小限• あまり変化していないXSL-FO スタイル
• 拡張 HTML にはすでに次のものが含まれる:– ヘッダとフッタ– サイドタブ– シンタックスハイライト• XSLTはCSSスタイルを再実装– HTML から FO への変換のコアとしてhtml2fo.xslの XSLT 3.0 バージョンをインポート

html2fo.xsl• XSLT 1.0 でHTML を XSL-FO に変換する• パブリックドメイン– 一部のLinuxディストリビューションにバンドルされている– Largely forgottenxsl:attribute-set（属性セット）• html2fo.xsl は xsl:attribute-setを使う• モジュール間で構成する• 適用されるたびに評価される<xsl:attribute-set name="id"><xsl:attribute name="id"select="generateid()"/></xsl:attribute-set>• セットから属性を削除する方法がないxsl:attribute 対 CSS カスケード
table {
font-family: source-sans-pro, sourcehan-sans, sans-serif;}table.StdTable {border-color: gray;border-style: solid none solid none;}

プロパティのマップ (1)<xsl:template match="table[tokenize(@class, '¥s+') = 'StdTable']"><xsl:param name="table-properties"
select="map { }"tunnel="yes"as="map(xs:string, map(xs:string, xs:string?))" /><xsl:variable
name="local-table-properties"
select="map {'table' : map { 'border-top' : '1.5pt solid gray' }}"
as="map(xs:string, map(xs:string, xs:string?))" />プロパティのマップ(2)<!-- Properties from importing stylesheet or higher-priority
template have precedence over local properties. --><xsl:variable
name="table-properties"
select="map:put($table-properties,'table',map:merge(($table-properties('table'),$local-table-properties('table'))))"
as="map(xs:string, map(xs:string, xs:string?))" />プロパティのマップ(3)<xsl:next-match><xsl:with-param
name="table-properties"
select="$table-properties"
tunnel="yes"as="map(xs:string, map(xs:string, xs:string?))" /></xsl:next-match></xsl:template>プロパティのマップ(4)<xsl:template name="process-table"><xsl:param name="table-properties"
select="map { }"tunnel="yes"as="map(xs:string, map(xs:string, xs:string?))" /><xsl:sequence
select="ahf:add-properties($table-properties('table'),($border-properties,'border-collapse))" /><xsl:apply-templates select="col | colgroup"/><xsl:apply-templates select="thead"/><xsl:apply-templates select="tfoot"/><xsl:apply-templates select="tbody"/></xsl:template>今後の予定• 比較文書をさらに拡張• Antenna House は、汎用的な CSS からXSL-FO への変換機能は必要としないが…
– CSSa と Transpect 「css-tools」を使用して変換可能

XSL-FOとCSSの比較• 共通のコアプロパティ• 明らかな違いがいくつか• 小さな違いが多数• Antenna House Formatter は多くの違いを解消• 両方とも出力結果は機能的に同一• 汎用の変換も可能だが必要ではないありがとうごさいました!
www.antennahouse.com/xsl-fo-css-comparison

XSL-FO/CSSComparison

XML Prague 2022
Tony Graham
XML Division
Antenna House, Inc.
tgraham@antenna.co.jp
tony@antennahouse.com@tgraham_antenna