Downloaded 42 times
Uploaded byJapan Electronic Publishing Association
シークレット・オブ・CSSシークレット改訂版
2016.10.05 日本電子出版協会 VS版(目次、索引ジャンプ)は http://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html#x=/vivliostyle_doc/ja/events/JEPA20161005/doc/index.xhtml&spread=false
More Related Content
シークレット・オブ・CSSシークレット改訂版
- 1. 2016年10月5日 （改訂：2016年10月17日） 村上 真雄(MURAKAMI Shinyu) 株式会社ビブリオスタイル シークレット・オブ・ CSSシークレット Vivliostyle・CSS組版に よる書籍制作の実例紹介
- 2. 1 章 はじめに 5 株式会社ビブリオスタイルの紹介6 メイキング 7 2 章 CSS組版・Vivliostyleの紹介 12 1 印刷の世界と画面の世界を一元化 13 2 Vivliostyleの組版機能 15 Table of Contents 2 TABLE OF CONTENTS
- 3. 3 ひとつのソースで、執筆・編集・校正・レイアウトを可能に 17 3 章 制作システムHeraclesとVivliostyle 19 4Heraclesとは 20 5 目次の自動生成 23 6 索引作成の自動化 24 4 章 CSSシークレットのCSS組版の実際 27 7 制作ワークフロー 28 3TABLE OF CONTENTS
- 4. 8 CSS組版とはルールを作ること 29 9コードブロックのページ分割の装飾 31 10 見出しの改行 32 11 ジャスティフィケーションの調整 35 12 これからの課題 40 Index 43 4 TABLE OF CONTENTS
- 5.
- 6.
- 7. 本の「メイキング」から紹介 本書 （英語版）は自己完結的に執筆されています。ク リーン な HTML5と 、 O Reilly の HTMLBook 規 格 （oreillymedia.github.io/HTMLBook）で定義され たいくつかの data-属性を使って記述しました。つま り、本書で目にするものすべて （レイアウトや画像そし て色も含む）はCSSを使ってスタイルが指定されていま す。⋯⋯ メイキング 7メイキング
- 8. 近年では、 O Reillyが出版する書籍の多くで同様の仕組 みが取り入れられています。このシステムは 「Atlas」と 名づけられています （atlas.oreilly.com）。 Atlas は O Reilly 社内で使われるだけでなく、誰でも利用できる という特長があります。 ただし、本書は Atlas の典型的な利用例というわけでは ありませんでした。筆者の知る限り他に例のないやり方 で、印刷用のCSSの限界に挑んだのが本書です。⋯⋯ 8 1章：はじめに
- 9. 「日本語版について」から 日本語版 （本書）も原書にならい、 HTML やCSS 、 SVG などで組版を行いました。従来のDTPシステムを使って レイアウトを再現することはもちろん可能でしたが、こ だわり抜かれた原書のデザインと 「他に例のないやり方 で、印刷用の CSS の限界に挑んだ」というこの 『CSS Secrets』の要となるコンセプトを外した本作りをするわ けにはいかなかったからです。 そこで、Vivliostyle （ビブリオスタイル）社の全面協力 のもと、原書のデータをもとに日本語用の CSSを作成す ることになりました。 Atlas 用に書かれたソースを再現 9メイキング
- 10. するため、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章：はじめに
- 11.
- 12.
- 13.
- 14. Web標準ブラウザベースCSS組版 組版結果をPDF出力するVivliostyle Formatter とブラ ウザで動くVivliostyle Viewerにより、印刷の世界と画 面の世界 （リフロー、レスポンシブ）を一元化。 Webブラウザで動く ＝ どこでも動く！ ブラウザ上で高度な組版機能を実現する JavaScript ライブラリ （Vivliostyle.js）をオープンソースで開発 次世代のCSS組版仕様の標準を、世界に先駆けて実装。 W3Cメンバーとして仕様策定に参加しながら実装、 Webと電子出版の標準化を推進。 14 2章：CSS組版・Vivliostyleの紹介 ■ ■ ■ ■ ■
- 15.
- 16.
- 17. ひとつのソースで、 執筆・編集・校正・ レイアウトを可能に3 従来の一般的な出版ワークフローでは、執筆・編集・組 版のそれぞれで別々のソースを扱い、 Web 版・電子版 の作成にはまた手作業でHTMLタグ付けなどしていた。 Vivliostyleにより、ひとつのソースで執筆・編集・校 正・レイアウト。Web版・電子版も同時制作可能。 17シークレット3：ひとつのソースで、執筆・編集・校正・レイ ■ ■
- 18.
- 19.
- 20. Heraclesとは4 Heracles は、 Vivliostyle自動組版の前処理として、 ソースのHTMLに加工を加えて、書籍組版に必要な要素 のHTMLコードの自動生成など行うプログラム 「CSSシークレット」組版プロジェクトのために開発 したもの。今後は、ほかの利用も⋯。 「Heracles」は、この開発者のFlorian Rivoal （今回の 書籍制作プロジェクトを村上と共に担当）が名付けた 仮称。 20 3章：制作システムHeraclesとVivliostyle ■ ■ ■
- 21. 米O Reilly Media 社の書籍制作システムAtlas で使われ ている書籍制作のための HTML5マーク ア ッ プ 方 式 （HTMLBook）に対応。 Atlasの機能のうちオープンソースで公開されている ものを一部再利用している （目次・索引の生成など） HeraclesはRubyで書かれたプログラムであり、CSS組 版の前処理を柔軟にカスタマイズ可能。 禁則処理：URLの分割、行頭禁則文字の設定など 約物の詰め （行頭や連続する全角約物を半角幅に）、 和欧文間のアキ 21シークレット4：Heraclesとは ■ ■ ■ ■ ■
- 22. 22 3章：制作システムHeraclesとVivliostyle 著者・編集者 ↓ ソースHTML SCSS ↑ デザイナー → ↦自動 Heracles →出力HTML CSS →Vivliostyle →PDF →Web 図 3.1 Heracles＋Vivliostyleでの制作の流れ ↘ EPUB （オプション）
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. 制作ワークフロー7 ソース HTML 、画像、CSS 、 Heracles などの一式を、 オライリー側とGitHubで共有。 翻訳原稿からソース HTML 作成はオライリー側で、 CSS・Heracles開発をビブリオスタイル側で。 どちら側でもHeracles、Vivliostyle Formatterで組版 結果を確認。 問題点の相談、修正指示などはGitHub issuesで。 28 4章：CSSシークレットのCSS組版の実際 ■ ■ ■ ■
- 29.
- 30.
- 31.
- 32.
- 33. 改行して良いところ （文節区切りなど）には、次のように 任意改行のタグ<wbr/>を挿入： h1, h2, h3{ word-break: keep-all; } <h1>CSS組版作業は<wbr/>ルールを<wbr/> 作ること</h1> 33シークレット10：見出しの改行 HTML
- 34. 34 4章：CSSシークレットのCSS組版の実際 今回は手作業で見出しに <wbr/>を入れてますが、自動的に日本語 の文節区切りなどで<wbr/>を入れることも考えられます。そのしく みをHeraclesに入れるなど。あるいは、 CSS の標準機能として文節 区切り改行モードがあればよいかも （word‑break プロパティをもっ と便利に）。
- 35. ジャスティフィケー ションの調整11 日本語組版では行末を揃えるジャスティフィケーション が必須。 CSS では、 text-align:justifyでジャスティフ ィケーションが有効。 『CSSシークレット』のように、英数字列やURL などが 文章中に頻繁に現れると、ワードラップで長い単語を追 い出すために文字間のアキが大きくなるのが目立つ。 35シークレット11：ジャスティフィケーションの調整 ■ ■ ■
- 36.
- 37. 文 字 間に 少 し だ け ア キ を 追 加 （ class="justify- space"） これで１行に入る文字が１文字少なくなり、文字が送られて、アキ ができていた行に収まることに。 文字間を少し詰める （class="justify-compress"） これでワードラップしていた長い単語が行に収まるように。 場 合 に よ っ て は 、 あ き ら め （ class="giveup- justify"） 37シークレット11：ジャスティフィケーションの調整 ■ ■ ■
- 38. .justify-space { letter-spacing: 0.005em; } .justify-compress{ letter-spacing: -0.02em; } .giveup-justify { text-align: left; } 38 4章：CSSシークレットのCSS組版の実際
- 39. それから、編集の側で日本語の表現を変えて文字数を調 整して対応ということも。 39シークレット11：ジャスティフィケーションの調整 ジャスティフィケーションについては、将来的には Vivliostyle 組 版エンジン側で自動で段落の最適な改行位置を決めるよう改善し たいところ。 ハイフネーション （CSSではhyphens:auto）については、現 状ではVivliostyleはブラウザに依存。Google Chrome 以外のブラ ウザでは可能。 Chrome でもハイフネーション実装が進んでい て、もうすぐ標準で利用可能になる見込み。 ■ ■ ■
- 40. これからの課題12 Vivliostyle.js/Viewer/Formatter の開発を進めて、いま ある制限をなくしていくことはもちろん！ HTML5+CSS組版の標準を確立し、学びやすくすること Web の標準仕様を利用するEPUB がきっかけなり、 W3C で電子出版に関する標準化も行うようになった ことで、CSSのページレイアウト仕様の標準化を進め やすくなると期待。 40 4章：CSSシークレットのCSS組版の実際 ■ ■ ■
- 41. より使いやすい仕様にして標準として広めることで 利用のハードルは低く。 将来的には、もっと簡単に、 CSS のプロパティや ルールなんて知らなくてもCSS組版ができるデザイ ンツールなどできそう。 今回 利 用 し た O Reilly の HTMLBook の よ う に 、 HTML5 で出版物の文書構造を表現する仕様がある と、それに対応する CSS スタイルシートが作りやす く、再利用もしやすくなります。 41シークレット12：これからの課題 ■ ■ ■
- 42. 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組版の実際 ■ ■
- 43. 数字・記号 A D 柱 15 縦書き 16 Atlas7, 21 Digital Publishing WAI‑ARIA 42 G H M GitHub 28 Heracles 20 HTMLBook 7, 41 MathJax 16 MathML 16 Index 43
- 44. S T V W Scholarly HTML 42 TeX 16 Vivliostyle Formatter9, 14 Vivliostyle Viewer 14 Vivliostyle.js 14 Webフォント 16 さ し せ 索引 24 ジャスティフィケーション 35, 39 出版ワークフロー 17 制作の流れ 22 制作ワークフロー 28 44 INDEX
- 45. の は も り ノンブル 15 ハイフネーション 39 目次23 リフロー 14 れ わ レスポンシブ 14 ワンソース・マルチユース 13 45INDEX
- 46.
- 47. シークレット・オブ・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版発行