CSS組版の救世主 Vivliostyle / 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 〜 私が作っています 〜