CSS組版の救世主 Vivliostyle / HTML5 Conference 2018

Presented at HTML5 Conference 2018

Transcript

1. CSS組版の救世主 Vivliostyle 2018/11/25 HTML5 Conference LT 緑豆はるさめ @spring_raining
2. はじめまして • Twitter: @spring_raining / GitHub: spring-raining • 「はるさめ」とお呼びください • 大阪の大学院生 • フォントの研究をしている CSS組版の救世主 Vivliostyle 2
3. CSS組版 CSS組版の救世主 Vivliostyle 3 ?
4. Web技術で本をつくる • HTMLで原稿を書き、CSSでページにレイアウト • それ実用できんの？ 4 Lea Verou (著), 牧野 聡 (翻訳). CSSシークレット ―47のテクニックでCSSを自在に操る できます
5. 高まるCSS組版へのニーズ 5 https://twitter.com/vvakame/status/1050002671338278912
6. CSS組版の救世主 Vivliostyle 6
7. Vivliostyleとは • https://vivilostyle.org • Webブラウザベースの組版システム • ブラウザの印刷機能でPDFを出力！ • CSS組版に必要だけどまだブラウザに無い機能を先取りして 実装 CSS組版の救世主 Vivliostyle 7 Vivliostyle Foundation 〜 私たちが作っています 〜
8. ブラウザに無い機能 CSS組版の救世主 Vivliostyle 8
9. @page { @bottom-left { content: counter(page); } @bottom-right { content: 'HTML5 Conference'; } } ページのはしっこのレイアウト • CSS Paged Mediaで定義 CSS組版の救世主 Vivliostyle 9
10. <p> 吾輩の自画像を <a class="fig" href="#figA"></a> に示す。 </p> <figure> <img src="img.png" /> <figcaption id="figA"> hoge </figcaption> </figure> ページ番号やcounterの参照 • CSS Generated Content for Paged Mediaで定義 CSS組版の救世主 Vivliostyle 10
11. <p> 吾輩の自画像を <a class="fig" href="#figA"></a> に示す。 </p> <figure> <img src="img.png" /> <figcaption id="figA"> hoge </figcaption> </figure> a.fig::before { content: '図' target-counter( attr(href url), fig); } figcaption { counter-increment: fig; } figcaption::before { content: '図' counter(fig) ': '; } ページ番号やcounterの参照 • CSS Generated Content for Paged Mediaで定義 CSS組版の救世主 Vivliostyle 11
12. Vivliostyleの目的 • VivliostyleはW3Cのようなコンソーシアムにより将来標準化 される可能性のある仕様だけに対応する • 決して「ぼくがかんがえたさいきょうのCSS」ではない！ • ただし本当に策定されるとは限らない CSS組版の救世主 Vivliostyle 12
13. Vivliostyleのなりたち • EPUB Adaptive Layoutという仕様に対応したEPUBビューアを Peter Sorotokinさん（提唱者）が作る • その後EPUB Adaptive Layoutはポシャるが、ビューア自体は よく出来ていた • EPUB Adaptive Layout以外にもCSSの仕様で組版に役立ちそ うなやつ実装しようぜ！ → Vivliostyle CSS組版の救世主 Vivliostyle 13 Peter Sorotokin Adobe Systems → Google
14. 実際どうやって動いてるの 1. 指定されたURLからHTMLと 参照されているCSSをロード 2. CSSをパースして（！？） DOMに当てるスタイル情報 を取得 3. 固定サイズのページブロック 中に収まるよう要素を追加 CSS組版の救世主 Vivliostyle 14
15. 今後の方向性 • Next EPUB？ • EPUBの仕様は、将来的にCSSの仕様として取り込まれる • Web Publicationsや WebBookへ • コントリビュートしてみたい → ありがとうございます！！！！ • 現在JS+Closure CompilerからTypeScriptへ引っ越し中な ので、もう少し待つとマシなコードになってるはず CSS組版の救世主 Vivliostyle 15
16. https://viola.pub CSS組版の救世主 Vivliostyle 16
17. ためしてみよう • Viola （https://viola.pub） • ブラウザ上で完結するCSS組版特化エディタ • Vivliostyle による紙面レイアウトをその場で確認！ • ブラウザの印刷機能を使ってそのままPDF出力！ CSS組版の救世主 Vivliostyle 17 〜 私が作っています 〜