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

42ba906dc35ef460ffcb1b7c3307ef45?s=47 spring_raining
November 25, 2018

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

Presented at HTML5 Conference 2018

42ba906dc35ef460ffcb1b7c3307ef45?s=128

spring_raining

November 25, 2018
Tweet

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 〜 私が作っています 〜