最新版WebKitの縦書きとマルチカラムを検証する

海上忍
2011-04-20 12:38:00
EPUB 3.0では縦書きやルビ、禁則処理など、日本語組版に必要とされる処理はおおむねカバーされるが、その表示はHTMLエンジンに依存する。今回は、WebKitを例に、縦書きとマルチカラムの現状をまとめる。
最新特集【一覧】

 EPUBがウェブとの高い親和性を持つことは繰り返し語られているところで、その表示はHTMLエンジンに大きく依存します。縦書きのように仕様が策定段階にある規約であればなおのこと、HTMLエンジンに実装されるかどうかで表示の可否が決定されることが現実です。今回は、EPUB 3.0を見据えた実装において先行するWebKitを例に、縦書きとマルチカラムの現状をまとめてみます。

EPUB 3.0縦書き対応最新状況をまとめる

 これまで度々紹介してきたとおり、5月にも最終仕様勧告が見込まれるEPUB 3.0では、縦書きを正式にサポートします。縦書きのみならず、ルビや縦中横、禁則など日本語組版に必要とされる処理はおおむねカバーされ、それらは(X)HTML5とCSS2.1/CSS3(の一部)の機能により実現されます。

 具体的には、縦書きおよび縦中横はCSS3 Writing Modes、禁則や圏点はCSS3 Text、ルビはHTML5 Rubyを使用します。さらにOpenTypeやSVGなどのフォントはCSS3 Fonts、多段組はCSS3 Multi-Columnと、特にCSS3によるところが大だといえるでしょう。

 ところでこのCSS3、実装の進捗はブラウザにより異なります。CSS3は各機能がモジュールの形で提供され、仕様策定のロードマップはモジュール単位で用意されるため、ブラウザベンダーごとに開発速度や取組方針に差が生じ、その結果はブラウザごとの機能差として現れます。

 縦書きなど日本語組版に求められるEPUB 3.0の仕様でいえば、最も実装が進んでいるのは「WebKit」です。Google Chromeも同じWebKit系ブラウザであり、WebKitの開発成果を取り込んでいますが、その最新開発状況が反映されている実行形式ファイル(Nightly Build)こそが、現時点で入手可能なEPUB 3.0の表示に、最も近いレイアウトエンジン、と言っていいでしょう。

  • WebKit Nightly Build r84139で日本語縦書き表示サンプルを表示したところ

 ちなみに、標準化の作業としてW3Cは「ノート(Note)」「ワーキングドラフト(Working Draft)」「勧告候補(Candidate Recommendation)」「勧告案(Proposed Recommendation)」の順に仕様を練り上げ、最後に「勧告(Recommendation)」として確定されます。上述したCSS3に関連した機能の多くは、下表に示すとおりワーキングドラフトであり、議論が継続中の暫定版的技術文書という段階です。その意味では、最先端を行くWebKit Nightly Buildにしても暫定版であり、完全にEPUB 3.0の要求を満たしているとはいえません。

日本語組版に関連するCSS3モジュールの仕様策定状況
Fontsワーキングドラフト(2011/3/24)
Multi-column勧告候補(2011/4/12)
Writing Modesワーキングドラフト(2011/2/1)
Textワーキングドラフト(2011/4/12)

それでも着実に実装が進むWebKit

 WebKitの開発動向に関する逐一は、タイムラインからチェックできますが、EPUB 3.0に求められる日本語組版を盛り込んだサンプルを実際に表示してみることが、最もわかりやすい方法です。

 それらの仕様策定は、イーストと一般社団法人日本電子出版協会(JEPA)、アンテナハウスが総務省から受諾した「新ICT利活用サービス創出支援事業」がリードしており、適切なサンプルもこちらに公開されています。今回は、WebKit Nightly Build r84139(4月18日公開)を利用し、同じサイト上にあるスクリーンショットと見比べてみました。

 まず、縦書き(-webkit-writing-mode: vertical-rl)そのものについては、スクリーンショットを撮影した2月時点と違いは見られません。圏点(-webkit-text-emphasis-style: sesame)についても同様です。

 縦中横は、スクリーンショットに「webkit-writing-mode: horizontal-tb、text-combine: horizontalは未実装」と注記がありましたが、CSSのコードを確認してみたところ「-webkit-writing-mode: horizontal-tb」はコメントアウトされ、代わりに「-webkit-text-combine: horizontal」が使われていました。行末ぞろえが崩れる結果に影響しているようですが、text-combineによる縦中横の実装は進んでいると考えられます。

 サンプルに多段組のレイアウトは盛り込まれていませんが、CSSに「-webkit-columns:3」を書き加えて再表示してみたところ、お見事! 縦書き、3段組で表示できました。以前テストしたときには未実装だったはずですから、その後も実装が進められていたことがわかります。

  • 縦中横の表示の差。左が「-webkit-writing-mode: horizontal-tb」、右が「-webkit-text-combine: horizontal」

  • 「-webkit-columns:3」で3段組表示したところ

  • 新着記事
  • 特集
  • ブログ