シークレット・オブ・CSSシークレット改訂版
•
2 likes•2,436 views
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
Recommended
More Related Content
What's hot
What's hot (14)
Viewers also liked
Similar to シークレット・オブ・CSSシークレット改訂版
Similar to シークレット・オブ・CSSシークレット改訂版 (20)
More from Japan Electronic Publishing Association
More from Japan Electronic Publishing Association (20)
シークレット・オブ・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 4 Heraclesとは 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. はじめに 1
- 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章：はじめに
- 14. Web標準ブラウザベースCSS組版 組版結果をPDF出力するVivliostyle Formatter とブラ ウザで動くVivliostyle Viewerにより、印刷の世界と画 面の世界 （リフロー、レスポンシブ）を一元化。 Webブラウザで動く ＝ どこでも動く！ ブラウザ上で高度な組版機能を実現する JavaScript ライブラリ （Vivliostyle.js）をオープンソースで開発 次世代のCSS組版仕様の標準を、世界に先駆けて実装。 W3C メンバーとして仕様策定に参加しながら実装、 Webと電子出版の標準化を推進。 14 2章：CSS組版・Vivliostyleの紹介 ■ ■ ■ ■ ■
- 17. ひとつのソースで、 執筆・編集・校正・ レイアウトを可能に3 従来の一般的な出版ワークフローでは、執筆・編集・組 版のそれぞれで別々のソースを扱い、 Web 版・電子版 の作成にはまた手作業でHTMLタグ付けなどしていた。 Vivliostyle により、ひとつのソースで執筆・編集・校 正・レイアウト。Web版・電子版も同時制作可能。 17シークレット3：ひとつのソースで、執筆・編集・校正・レイ ■ ■
- 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 （オプション）
- 28. 制作ワークフロー7 ソース HTML 、画像、 CSS 、 Heracles などの一式を、 オライリー側とGitHubで共有。 翻訳原稿からソース HTML 作成はオライリー側で、 CSS・Heracles開発をビブリオスタイル側で。 どちら側でもHeracles、Vivliostyle Formatterで組版 結果を確認。 問題点の相談、修正指示などはGitHub issuesで。 28 4章：CSSシークレットのCSS組版の実際 ■ ■ ■ ■
- 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：ジャスティフィケーションの調整 ■ ■ ■
- 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 Atlas 7, 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 Formatter 9, 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
- 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版発行