CSS組版・パブリッシング交流会 2018-06-30 村上真雄(@MurakamiShinyu, Vivliostyle.org)の発表資料 Vivliostyle view: http://bit.ly/csspub20180630 Source: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/ja/events/csspub20180630

1. CSS組版について
CSS組版・パブリッシング交流会
2018-06-30
JAGAT XML パブリッシング準研究会
村上真雄@MurakamiShinyu, Vivliostyle.org

2. 目次
1. はじめに 3
2. 従来DTPとCSS組版の違い 6
3. CSS組版エンジンいろいろ 10
4. ページレイアウト関連のCSS仕様 13
5. Vivliostyle について 16
6. おわりに 20
CSS組版について 2

3. はじめに
CSS組版について 3

4. 自己紹介
村上真雄@MurakamiShinyu, Vivliostyle.org：
テキスト整形やXML・CSSの組版エンジンの開発など：
1990年ごろ: テキスト整形ツールXTR を開発、公開。
2000年ごろから: Antenna House Formatter（アンテナハウス社
のXML/CSS組版エンジン）の開発に従事。
2014年: Vivliostyleプロジェクト開始、会社設立。
2018年: Vivliostyle.org でオープンソース版の再始動。
W3C CSS標準化と関わってきています。
JAGAT XMLパブリッシング準研究会に参加してます。
CSS組版について 4

5. JAGAT XMLパブリッシング準研究会とは
JAGAT（公益社団法人日本印刷技術協会）XMLパブリッシング準研
究会は、XMLやHTML/CSSでの出版技術・組版など研究しているグ
ループです。
CSS組版について 5

6. 従来DTPとCSS組版の違い
CSS組版について 6

7. 一般的なDTPでの制作工程
1. 著者からの原稿（Wordファイルなど）
2. DTPソフト（Adobe InDesignなど）で、原稿データをページに流し
込み割り当てていく
3. ページデザインの要求どおりになるように、DTPソフト上で１ペー
ジ１ページ仕上げていく
4. 校正用のプリンタ出力→校正者・編集者・著者がチェックして赤
字で修正指示→DTPソフト上で修正（何回か繰り返し）
5. 印刷に適したPDFの形式（PDF/X-1a など）に出力→PDF入稿
6. 印刷所で印刷→製本→納品
CSS組版について 7

8. CSS組版での制作工程
1. 著者からの原稿（HTML化しやすい形式の何か）
2. 原稿をHTMLデータ化
3. ページデザインの要求どおりになるよう、CSSスタイルシート作成
4. できあがったHTML+CSSから、CSS組版エンジンで組版（プレビュ
ー表示、PDF出力）
5. 組版チェック→HTMLとCSSを修正し再組版（完成まで繰り返し）
6. PDFを印刷所に入稿
7. 印刷所で印刷→製本→納品
CSS組版について 8

9. CSS組版のメリット
Webと同じくHTML+CSS でできる
（InDesign やTeX など使えなくてもいい）
HTML+CSS なので、Web版やEPUB版も一緒に作りやすい。
（一般的なDTP組版からEPUBも作る場合、完成したDTPデータか
らテキストを取り出してEPUBデータ用に加工する作業が必要）
DTPソフトに依存しないデータなので管理しやすい
いろいろ自動化しやすい
共通の体裁の出版物をたくさん作るのが簡単（CSSを再利用）
CSS組版について 9

10. CSS組版エンジンいろいろ
CSS組版について 10

11. プロプライエタリ製品
サーバー上で大量のPDFを生成する大規模自動組版の用途に使用
されている。企業向け製品。
Prince：オーストラリアのYesLogic社の製品。CSSの提唱者で元
Opera CTOのHåkon Wium Lie氏が役員として関係。
PDFreactor：ドイツRealObjects社の製品
Copper PDF：GNN社の製品
Antenna House Formatter：アンテナハウス社の製品
VersaType Converter：トリムマーク社の製品（旧Vivliostyle
Formatter）
CSS組版について 11

12. オープンソースのCSS組版エンジン
wkhtmltopdf：WebKitエンジンでHTMLをPDF化(C++)
WeasyPrint：CSS Paged Mediaのベーシックな機能を実装
(Python)
Vivliostyle：ブラウザ上で動き、ブラウザの印刷機能でPDF生成可
能(JavaScript)
Paged.js：Paged Media initiativeで開発開始(JavaScript)
CSS組版について 12

13. ページレイアウト関連の
CSS仕様
CSS組版について 13

14. ページレイアウト関連CSSモジュール
⭕：CSS組版エンジンでだいたい使える ：CSS組版エンジンによ
っては使える ❌：今のところ使えない
⭕ CSS Paged Media：ページメディアの基本
⭕ CSS Fragmentation：改ページなど
CSS Page Floats：ページの図版配置
ページの要素の自動生成：目次や索引、相互参照、柱、脚注など
CSS Generated Content
CSS Generated Content for Paged Media (GCPM) Level 3
❌ CSS Generated Content for Paged Media (GCPM) Level 4
CSS組版について 14

15. ページテンプレート関連
❌ CSS Regions
❌ CSS Pagination Templates
“EPUB Adaptive Layout”：かつて提案されたEPUB拡張案
ページ内に任意の数の領域を定義して、それらにコンテンツ
を割り当てていくというページテンプレート方式。
CSS Paged Media 仕様（ページに本体領域がひとつだけ）と
はまったく別のもの。
-epubx- プレフィックス付きのCSS拡張構文を使用。
CSS組版について 15

16. Vivliostyle について
CSS組版について 16

17. Vivliostyle の特徴
ブラウザ上で動くJavaScriptプログラム
ベースはEPUB Adaptive Layout のPeter Sorotokin氏による実装
なので、その機能が使える。
CSS Paged Media、CSS Page Floats など、ページレイアウト関連
のCSS仕様(p.14)をいろいろ実装している。
しかし今のところ、CSS Paged Media系のCSS仕様の実装は、先行
しているプロプライエタリ製品(p.11)に比べてまだ不十分
PDF出力はWebブラウザエンジンのものを使う。（ChromeのPDF
出力が使えるが、印刷用にも配布用にもあまり最適ではない）
CSS組版について 17

18. “Vivliostyle” と“VersaType” について
旧ビブリオスタイル社Webサイトに掲載された変更の告知：
株式会社ビブリオスタイルは社名をトリムマーク株式会社に変
更いたしました。
Vivliostyle は製品名をVersaType に変更いたしました。
トリムマーク株式会社は今後オープンソースでの開発を行いませ
ん。
Vivliostyle のオープンソース部分はVivliostyle.org へ移管しまし
た。
VersaType製品の最新情報は：Trim-marks Inc.のFacebookページ
❝
❝
❝
❝
CSS組版について 18

19. Vivliostyle オープンソースについて
Vivliostyle オープンソース・プロジェクトとコミュニティーの維持
管理は：Vivliostyle.org（代表：村上真雄）
一般社団法人ビブリオスタイル（Vivliostyle Foundation）準備中
緩募：Vivliostyle 開発や運営に協力してくれる方
Communiy & Contact: https://vivliostyle.org/community/
CSS組版について 19

20. Thanks!
CSS組版について 20