2014年11月8日「TeXユーザの集い2014」 #texconf14 でのプレゼン HTML版は http://vivliostyle.com/presen/texconf14/

1. TEX の後継として、
HTML5 & CSS 組版
〜Vivliostyle プロジェクト
2014-11-08 #texconf14
村上 真雄 (@MurakamiShinyu)
1

2. はじめに ⾃⼰紹介
• 1990年ごろ、テキスト整形ツール「XTR」を開発しフリーソフトウェ
アとして公開。
• それがきっかけで、組版とマークアップ⾔語（SGML〜XML/HTML）、
スタイルシート⾔語（XSL/CSS）に関⼼を持つ。
• 1999年、XML/CSS⾃動組版ソフトの開発を、アンテナハウスに企画提
案。Antenna House Formatterとして製品化。
• W3C CSS仕様とその実装に携わり、その関係で電⼦書籍フォーマット
EPUB3（縦書き対応）の標準化にも関わった。
• 2014年8⽉、次世代CSS組版ツールを開発するため、株式会社ビブリオ
スタイルを設⽴（アンテナハウスが出資）。
2

3. CSS組版＝HTML(またはXML)+CSSで組版
組版とは、印刷の⼀⼯程で、⽂字や図版などの要素を配置し、紙⾯を
構成すること。……
画⾯上での編集を前提とした WYSIWYG の DTP に対し本来の組版に近
い処理をソフトウェア的に⾏うものにTEXがある。
Wikipedia「組版」“
3

4. CSS 組版は TEX 組版と似てるかも
• 論理的⽂書マークアップ: HTML vs LATEX
• スタイルシート(CSS) vs スタイルファイル(TEX)
4

5. CSS 組版を利⽤している出版社の例
• ⽶アシェット社 (Hachette Book Group)
• ⽶国ベストセラー本の多くがCSS組版
• CSS組版エンジンは Prince
• 制作システムは IGP:Digital Publisher (Infogrid Pacific)
• ⽶オライリー (O'Reilly Media)
• 技術書の多くがCSS組版
• CSS組版エンジンは Antenna House Formatter
• 制作システムはO'Reilly Atlas
5

6. 電⼦出版と関連
• EPUB、PDF、紙の本をワンソースで同時に制作
• Hachette社やO'Reilly Mediaはそれで成功している
6

7. CSS組版と関係あるXML組版のこと
• ⽂書の論理的構造化
• ⽂書構造とスタイルの分離の考え
• SGML→XML→(X)HTML5の流れ
• SGML+DSSSL組版 （ほぼ過去のもの）
• XML+XSL-FO組版
• XSL-FO組版エンジンは Apache FOP、RenderX XEP、Antenna
House Formatter など
• ちなみに、O'Reilly MediaはCSS組版を採⽤する前はこれを使って
いた。
• XML+CSS組版
7

8. CSS組版エンジンの例
• Prince (豪YesLogic社)
• Antenna House Formatter (アンテナハウス)
• AH Formatter V6.2 の紹介
• Webブラウザーを組版エンジンとして使う
• BookJS
• デモ（Safariで試せる）
• ヘッドレスWebブラウザ wkhtmltopdf、PhantomJS
• そして Vivliostyle …
8

9. HTML5 & CSS3 が電⼦出版の基盤に
• EPUB = (X)HTML+CSS+α（メタデータ＆パッケージ化）
• IDPFとW3Cの連携
• W3C Digital Publishing Activity
9

10. CSS組版仕様の標準化
• CSS Paged Media / GCPM / Pagination
• Digital Publishing・電⼦出版ニーズが後押し
• W3CはXSL-FO改訂作業をやめ、CSSに注⼒
• 将来EPUBはこれを使うだろう
• CSS Text / Text Decoration / Wrinting Modes / Fonts
• CSS Regions / Exclusions / Shapes / Page Templates
10

11. HTML5 & CSS3 で⾼度なレイアウト
• EPUB Adaptive Layout
• EPUBの⾼度なページレイアウトの拡張の案（Informational
Document）
• JavaScriptでの実装あり（デモ）
• 将来EPUBはW3Cで標準化されたCSSの機能でこれを実現する⽅向
• CSS Regions/Shapes/ Exclusionsなど Adobe Web Platform Teamのデモ
(Safari)
• National Geographic Forest Giant Demo
• Exclusions Recipe Demo
11

12. ⽇本語組版も︕ W3C技術ノート
『⽇本語組版処理の要件』(JLREQ)
• JIS X 4051「⽇本語⽂書の組版⽅法」をベースに、
W3C仕様で参照できるように英語と⽇本語で公開
• W3Cのi18n (Internationalization)活動
• 紙の書籍版（東京電機⼤学出版局）は、CSS組版で
作られました（AHF使⽤）。
12

13. ⽇本語EPUBの必要性で、標準化が進む
• HTML5 Ruby / CSS Writing Modes / Text / Text Decoration
• EPUB 3.0 (2011年10⽉に勧告) に採⽤
• CSS Writing Modesなど、この時点でW3Cドラフトだったものは -
epub-writing-modeなどプレフィックス付き
• WebKitなどWebブラウザエンジンでの実装も進む
• 各社のEPUBリーダーに
• 組版品質は、これからもっと良くなるはず
• ルビの配置の調整(CSS Ruby)、⾏グリッド配置(CSS Line Grid)、図
版の配置など
13

14. Vivliostyle オープンソース・プロジェクト
• Webブラウザの組版をもっと良くして電⼦出版と印刷出版の共通の組
版エンジンに
• CSS組版機能をJavaScriptでも実装(Polyfill)
• 印刷に使える⾼品質なPDF出⼒を実現
• W3C CSS組版関連仕様の標準化と連携して実装を推進
14

15. Vivliostyle で作ろうとしてるもの
• Vivliostyle Formatter
• 次世代CSS組版エンジン。構造化⽂書（HTML/XML/EPUB等）を
CSSで組版して⾼品質なPDFを⽣成
• Vivliostyle Browser
• Webブラウザ拡張。WebやEPUBの組版をもっと良くしてページ表
⽰と印刷機能を拡張
• Vivliostyle JS
• JavaScriptライブラリ。Webサイトに埋め込みWebコンテンツや
EPUBの⾼品質な組版表⽰を可能に
15

16. 関連・参考オープンソースプロジェクト
• BookJS
• wkhtmltopdf
• PhantomJS
• CSSRegions.js
• Adaptive Layout
• BiB/i
• Readium
• 各Webブラウザエンジン︓WebKit/Blink/Geckoなど
• Qt (QtWebKit / QtWebEngine)
16

17. Vivliostyle をどうぞよろしく
• Vivliostyle Inc. http://vivliostyle.com/
• 株式会社ビブリオスタイル http://vivliostyle.co.jp/
• Facebookページ: Vivliostyle Inc.
• Facebook公開グループ: Vivliostyle Forum
17

18. Thanks TEX, and Good-bye!
18