2016年10月5日 (改訂:2016年10月17日)
村上 真雄 (MURAKAMI Shinyu)
株式会社ビブリオスタイル
シークレット・オブ・
CSSシークレット
Vivliostyle・CSS組版に
よる書籍制作の実例紹介
1 章
はじめに 5
株式会社ビブリオスタイルの紹介 6
メイキング 7
2 章
CSS組版・Vivliostyleの紹介 12
1 印刷の世界と画面の世界を一元化 13
2 Vivliostyleの組版機能 15
Table of Contents
2 TABLE OF CONTENTS
3
ひとつのソースで、執筆・編集・校正・レイアウトを可能に
17
3 章
制作システムHeraclesとVivliostyle 19
4 Heraclesとは 20
5 目次の自動生成 23
6 索引作成の自動化 24
4 章
CSSシークレットのCSS組版の実際 27
7 制作ワークフロー 28
3TABLE OF CONTENTS
8 CSS組版とはルールを作ること 29
9 コードブロックのページ分割の装飾 31
10 見出しの改行 32
11 ジャスティフィケーションの調整 35
12 これからの課題 40
Index 43
4 TABLE OF CONTENTS
はじめに
1
株式会社ビブリオスタイル (Vivliostyle Inc.)は2014年創
業の電子出版システム開発企業。ブラウザで紙の本のよう
にページをめくって読書ができ、かつ画面に表示されてい
る本をそのまま印刷できる 「Vivliostyle」を開発し、Web
と紙の本の垣根を取り除くことを目指すしている。W3C
メンバー企業としてCSSワーキンググループでも活動中。
社名の 「Vivliostyle」はギリシャ語で 「本」を表すvivlioと
styleの組み合わせたもので、本書の著者リア・ヴェルー
が名付け親。URL:http://vivliostyle.com
株式会社ビブリオスタイルの紹介
6 1章:はじめに
本の「メイキング」から紹介
本書 (英語版)は自己完結的に執筆されています。ク
リーン な HTML5 と 、 O Reilly の HTMLBook 規 格
(oreillymedia.github.io/HTMLBook)で定義され
たいくつかの data-属性を使って記述しました。つま
り、本書で目にするものすべて (レイアウトや画像そし
て色も含む)はCSSを使ってスタイルが指定されていま
す。⋯⋯
メイキング
7メイキング
近年では、 O Reilly が出版する書籍の多くで同様の仕組
みが取り入れられています。このシステムは 「Atlas」と
名づけられています (atlas.oreilly.com)。 Atlas は
O Reilly 社内で使われるだけでなく、誰でも利用できる
という特長があります。
ただし、本書は Atlas の典型的な利用例というわけでは
ありませんでした。筆者の知る限り他に例のないやり方
で、印刷用のCSSの限界に挑んだのが本書です。⋯⋯
8 1章:はじめに
「日本語版について」から
日本語版 (本書)も原書にならい、 HTML や CSS 、 SVG
などで組版を行いました。従来のDTPシステムを使って
レイアウトを再現することはもちろん可能でしたが、こ
だわり抜かれた原書のデザインと 「他に例のないやり方
で、印刷用の CSS の限界に挑んだ」というこの 『CSS
Secrets』の要となるコンセプトを外した本作りをするわ
けにはいかなかったからです。
そこで、Vivliostyle (ビブリオスタイル)社の全面協力
のもと、原書のデータをもとに日本語用の CSSを作成す
ることになりました。 Atlas 用に書かれたソースを再現
9メイキング
するため、Vivliostyle社がAtlasのオープンソースの部分
を再利用してRuby (約600行)で開発したHeracles (仮
称 ) と PDF 生 成 エ ン ジ ン Vivliostyle  Formatter
(vivliostyle.com/ja/products/)の 組 み 合 わ せ
を、原書で使われた膨大なCSSに対応させることに成功
しました。これにより本書のページレイアウト、目次や
索引の相互参照、ページ番号参照、日本語組版に対応し
た文字組みなどが HTML+CSS で実現しています。その
上、 HTML+CSS であることを利用して Web サイトの形
でサンプル版 (vivliostyle.com/ja/samples/css-
secrets/)等を出せるようにもなりました。
10 1章:はじめに
この資料のメイキング
この資料も 『CSSシークレット』と同じCSS組版のしくみ
で作成しています。
11メイキング
CSS組版・
Vivliostyleの紹介
2
印刷の世界と画面の
世界を一元化1
13シークレット1:印刷の世界と画面の世界を一元化
図 2.1
Vivliostyleでワンソース・マルチユース、多様なデバイスに対応可
Web標準ブラウザベースCSS組版
組版結果をPDF出力するVivliostyle Formatter とブラ
ウザで動くVivliostyle Viewerにより、印刷の世界と画
面の世界 (リフロー、レスポンシブ)を一元化。
Webブラウザで動く = どこでも動く!
ブラウザ上で高度な組版機能を実現する JavaScript
ライブラリ (Vivliostyle.js)をオープンソースで開発
次世代のCSS組版仕様の標準を、世界に先駆けて実装。
W3C メンバーとして仕様策定に参加しながら実装、
Webと電子出版の標準化を推進。
14 2章:CSS組版・Vivliostyleの紹介
■
■
■
■
■
Vivliostyleの
組版機能2
柱・ノンブル (ページ番号)
ページ番号参照・クロスリファレンス機能
ページテンプレート機能 (ページマスター定義と選択)
改ページの制御:分割禁止、強制改ページ
空白ページ生成
段組み
15シークレット2:Vivliostyleの組版機能
■
■
■
■
■
■
⋯など。詳しくは:
表組
傍注・脚注
縦書き、縦中横、ルビなど日本語組版機能
数式:TeX形式とMathML形式に対応 (MathJax使用)
Webフォント
関連仕様VivliostyleがサポートするCSS機能一覧
vivliostyle.com/en/documentation/
supported-features/
16 2章:CSS組版・Vivliostyleの紹介
■
■
■
■
■
■
ひとつのソースで、
執筆・編集・校正・
レイアウトを可能に3
従来の一般的な出版ワークフローでは、執筆・編集・組
版のそれぞれで別々のソースを扱い、 Web 版・電子版
の作成にはまた手作業でHTMLタグ付けなどしていた。
Vivliostyle により、ひとつのソースで執筆・編集・校
正・レイアウト。Web版・電子版も同時制作可能。
17シークレット3:ひとつのソースで、執筆・編集・校正・レイ
■
■
18 2章:CSS組版・Vivliostyleの紹介
図 2.2
従来の出版ワークフローとVivliostyleの出版ワークフローの比較
(『CSSシークレット』制作の場合、CMS (コンテンツ管理システム)に相当する
のは、GitHub+Heracles)
制作システム
Heraclesと
Vivliostyle
3
Heraclesとは4
Heracles は、 Vivliostyle 自動組版の前処理として、
ソースのHTMLに加工を加えて、書籍組版に必要な要素
のHTMLコードの自動生成など行うプログラム
「CSSシークレット」組版プロジェクトのために開発
したもの。今後は、ほかの利用も⋯。
「Heracles」は、この開発者のFlorian Rivoal (今回の
書籍制作プロジェクトを村上と共に担当)が名付けた
仮称。
20 3章:制作システムHeraclesとVivliostyle
■
■
■
米O Reilly Media 社の書籍制作システム Atlas で使われ
ている書籍制作のための HTML5マーク ア ッ プ 方 式
(HTMLBook)に対応。
Atlasの機能のうちオープンソースで公開されている
ものを一部再利用している (目次・索引の生成など)
HeraclesはRubyで書かれたプログラムであり、CSS組
版の前処理を柔軟にカスタマイズ可能。
禁則処理:URLの分割、行頭禁則文字の設定など
約物の詰め (行頭や連続する全角約物を半角幅に)、
和欧文間のアキ
21シークレット4:Heraclesとは
■
■
■
■
■
22 3章:制作システムHeraclesとVivliostyle
著者・編集者
↓
ソースHTML
SCSS
↑
デザイナー
→
↦自動
Heracles →出力HTML
CSS
→ Vivliostyle →PDF
→Web
図 3.1
Heracles+Vivliostyleでの制作の流れ
↘
EPUB (オプション)
目次の自動生成5
23シークレット5:目次の自動生成
図 3.2
(『CSSシークレット』の目次から)
Vivliostyle・CSS組版のページ番号参照機能で目次を実現。
Heracles による前処理で目次項目にする章や節のタイトルを集
めて、目次ページのHTMLコードを生成している。
■
■
索引作成の自動化6
24 3章:制作システムHeraclesとVivliostyle
図 3.3
(『CSSシークレット』の索引から)
Vivliostyle・CSS組版のページ番号参照機能で索引を実現。
Heraclesによる前処理で索引語 (HTMLにマークアップ)を集め
て、索引ページのHTMLコードを生成している。
■
■
索引語のマークアップの例:
2レベルの索引語の例:
<a data-type="indexterm"
data-primary="半透明"
data-primary-sortas="はんとうめい"></a>
<a data-type="indexterm"
data-primary="ボーダー"
25シークレット6:索引作成の自動化
HTML
HTML
data-secondary="半透明"
data-secondary-sortas="はんとうめい"></a>
26 3章:制作システムHeraclesとVivliostyle
CSSシークレット
のCSS組版の実際
4
制作ワークフロー7
ソース HTML 、画像、 CSS 、 Heracles などの一式を、
オライリー側とGitHubで共有。
翻訳原稿からソース HTML 作成はオライリー側で、
CSS・Heracles開発をビブリオスタイル側で。
どちら側でもHeracles、Vivliostyle Formatterで組版
結果を確認。
問題点の相談、修正指示などはGitHub issuesで。
28 4章:CSSシークレットのCSS組版の実際
■
■
■
■
CSS組版とは
ルールを作ること8
CSS組版作業は、1ページずつ作るのではなく、ルール
を作ること。
HTMLの文書構造の論理的な要素の種類ごとの体裁を
決めていくルールをCSSで書いていく作業。
ルールを作るのは手間だけど、あとは自動組版になる
ので、ページ数が多くなっても、ソースHTML内容に
29シークレット8:CSS組版とはルールを作ること
■
■
■
大幅な変更が入っても、すぐに組版結果が得られるの
がCSS組版のメリット。
とはいっても、最終的には1ページずつ目で見て確認、
組版体裁がまずいところは直していくという作業も。
P. 35 の「ジャスティフィケーションの調整」など。
30 4章:CSSシークレットのCSS組版の実際
■
コードブロックの
ページ分割の装飾9
31シークレット8:CSS組版とはルールを作ること
図 4.1
コードブロックのページ分割装飾の例 (『CSSシークレット』P.34‑P.35)
分割が起きたときに自動的に現れるギザギザの装飾をCSSで実現。
そこで、次のようにして、日本語文字列の途中では自動で
改行しないようにして、
見出しの改行10
見出しが複数行になるとき、なるべく意味のある区切り
で改行したい。
強制改行 <br/>を入れる方法もあるが、それでは1行
に入る文字数が変わると余計な改行が生じてダメに。
32 4章:CSSシークレットのCSS組版の実際
■
■
改行して良いところ (文節区切りなど)には、次のように
任意改行のタグ<wbr/>を挿入:
h1, h2, h3 {
word-break: keep-all;
}
<h1>CSS組版作業は<wbr/>ルールを<wbr/>
作ること</h1>
33シークレット10:見出しの改行
HTML
34 4章:CSSシークレットのCSS組版の実際
今回は手作業で見出しに <wbr/>を入れてますが、自動的に日本語
の文節区切りなどで<wbr/>を入れることも考えられます。そのしく
みをHeracles に入れるなど。あるいは、 CSS の標準機能として文節
区切り改行モードがあればよいかも (word‑break プロパティをもっ
と便利に)。
ジャスティフィケー
ションの調整11
日本語組版では行末を揃えるジャスティフィケーション
が必須。
CSS では、 text-align: justifyでジャスティフ
ィケーションが有効。
『CSSシークレット』のように、英数字列やURL などが
文章中に頻繁に現れると、ワードラップで長い単語を追
い出すために文字間のアキが大きくなるのが目立つ。
35シークレット11:ジャスティフィケーションの調整
■
■
■
このような調整をどうしたかというと、次の3通り:
36 4章:CSSシークレットのCSS組版の実際
図 4.2
ジャスティフィケーション改善のための調整 (『CSSシークレット』
P.231の図のキャプション、class="justify-space"を指定)
左:適用前
右:適用後
文 字 間 に 少 し だ け ア キ を 追 加  ( class="justify-
space")
これで1行に入る文字が1文字少なくなり、文字が送られて、アキ
ができていた行に収まることに。
文字間を少し詰める (class="justify-compress")
これでワードラップしていた長い単語が行に収まるように。
場 合 に よ っ て は 、 あ き ら め  ( class="giveup-
justify")
37シークレット11:ジャスティフィケーションの調整
■
■
■
.justify-space {
letter-spacing: 0.005em;
}
.justify-compress {
letter-spacing: -0.02em;
}
.giveup-justify {
text-align: left;
}
38 4章:CSSシークレットのCSS組版の実際
それから、編集の側で日本語の表現を変えて文字数を調
整して対応ということも。
39シークレット11:ジャスティフィケーションの調整
ジャスティフィケーションについては、将来的には Vivliostyle 組
版エンジン側で自動で段落の最適な改行位置を決めるよう改善し
たいところ。
ハイフネーション (CSSではhyphens: auto)については、現
状ではVivliostyleはブラウザに依存。Google Chrome 以外のブラ
ウザでは可能。 Chrome でもハイフネーション実装が進んでい
て、もうすぐ標準で利用可能になる見込み。
■
■
■
これからの課題12
Vivliostyle.js/Viewer/Formatter の開発を進めて、いま
ある制限をなくしていくことはもちろん!
HTML5+CSS組版の標準を確立し、学びやすくすること
Web の標準仕様を利用する EPUB がきっかけなり、
W3C で電子出版に関する標準化も行うようになった
ことで、CSSのページレイアウト仕様の標準化を進め
やすくなると期待。
40 4章:CSSシークレットのCSS組版の実際
■
■
■
より使いやすい仕様にして標準として広めることで
利用のハードルは低く。
将来的には、もっと簡単に、 CSS のプロパティや
ルールなんて知らなくてもCSS組版ができるデザイ
ンツールなどできそう。
今 回 利 用 し た O Reilly の HTMLBook の よ う に 、
HTML5 で出版物の文書構造を表現する仕様がある
と、それに対応する CSS スタイルシートが作りやす
く、再利用もしやすくなります。
41シークレット12:これからの課題
■
■
■
W3C で は 、 Digital  Publishing  WAI‑ARIA ( w3.
org/TR/dpub-aria-1.0/)という仕様 (現在ド
ラフト)で、電子出版物の文書構造の表現の語彙を
定め、HTMLの要素にrole属性で指定することを
標準にしようとしてます。その語彙は HTMLBook
のdata-type属性のものと似ているので、移行や
併用は可能です。
関連して、学術論文用の Scholarly HTML (w3c.
github.io/scholarly-html/)など分野に特化
したHTMLマークアップ標準化を推進することも、
CSS組版を利用しやすくするのにつながります。
42 4章:CSSシークレットのCSS組版の実際
■
■
数字・記号
A
D
柱 15
縦書き 16
Atlas 7, 21
Digital Publishing WAI‑ARIA 42
G
H
M
GitHub 28
Heracles 20
HTMLBook 7, 41
MathJax 16
MathML 16
Index
43
S
T
V
W
Scholarly HTML 42
TeX 16
Vivliostyle Formatter 9, 14
Vivliostyle Viewer 14
Vivliostyle.js 14
Webフォント 16
さ
し
せ
索引 24
ジャスティフィケーション 35, 
39
出版ワークフロー 17
制作の流れ 22
制作ワークフロー 28
44 INDEX
の
は
も
り
ノンブル 15
ハイフネーション 39
目次 23
リフロー 14
れ
わ
レスポンシブ 14
ワンソース・マルチユース 13
45INDEX
『CSSシークレット』Webサンプル版
JEPAセミナー報告(2016年10月5日)
「『CSSシークレット』制作秘話
~CSS組版がもたらす新たな可能性」
http://vivliostyle.com/ja/samples/css‑secrets/
http://www.jepa.or.jp/sem/20161005/
シークレット・オブ・CSSシークレット
Vivliostyle・CSS組版による書籍制作の実例紹介
作 者 村上 真雄 (むらかみ しんゆう)
発 行 所 株式会社ビブリオスタイル
〒151‑0051
東京都渋谷区千駄ヶ谷1‑13‑11 co‑lab千駄ヶ谷4‑6
Tel (03)5775‑7296
電子メール info@vivliostyle.com
2016年10月5日  初版発行
2016年10月17日 第1.1版発行

シークレット・オブ・CSSシークレット改訂版