Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

spring_raining
November 25, 2018

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

Presented at HTML5 Conference 2018

spring_raining

November 25, 2018
Tweet

More Decks by spring_raining

Other Decks in Technology

Transcript

  1. CSS組版の救世主 Vivliostyle
    2018/11/25 HTML5 Conference LT
    緑豆はるさめ @spring_raining

    View Slide

  2. はじめまして
    • Twitter: @spring_raining / GitHub: spring-raining
    • 「はるさめ」とお呼びください
    • 大阪の大学院生
    • フォントの研究をしている
    CSS組版の救世主 Vivliostyle
    2

    View Slide

  3. CSS組版
    CSS組版の救世主 Vivliostyle
    3
    ?

    View Slide

  4. Web技術で本をつくる
    • HTMLで原稿を書き、CSSでページにレイアウト
    • それ実用できんの?
    4
    Lea Verou (著), 牧野 聡 (翻訳). CSSシークレット ―47のテクニックでCSSを自在に操る
    できます

    View Slide

  5. 高まるCSS組版へのニーズ 5
    https://twitter.com/vvakame/status/1050002671338278912

    View Slide

  6. CSS組版の救世主 Vivliostyle
    6

    View Slide

  7. Vivliostyleとは
    • https://vivilostyle.org
    • Webブラウザベースの組版システム
    • ブラウザの印刷機能でPDFを出力!
    • CSS組版に必要だけどまだブラウザに無い機能を先取りして
    実装
    CSS組版の救世主 Vivliostyle
    7
    Vivliostyle Foundation
    〜 私たちが作っています 〜

    View Slide

  8. ブラウザに無い機能
    CSS組版の救世主 Vivliostyle
    8

    View Slide

  9. @page {
    @bottom-left {
    content: counter(page);
    }
    @bottom-right {
    content: 'HTML5 Conference';
    }
    }
    ページのはしっこのレイアウト
    • CSS Paged Mediaで定義
    CSS組版の救世主 Vivliostyle
    9

    View Slide


  10. 吾輩の自画像を

    に示す。




    hoge


    ページ番号やcounterの参照
    • CSS Generated Content for
    Paged Mediaで定義
    CSS組版の救世主 Vivliostyle
    10

    View Slide


  11. 吾輩の自画像を

    に示す。




    hoge


    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

    View Slide

  12. Vivliostyleの目的
    • VivliostyleはW3Cのようなコンソーシアムにより将来標準化
    される可能性のある仕様だけに対応する
    • 決して「ぼくがかんがえたさいきょうのCSS」ではない!
    • ただし本当に策定されるとは限らない
    CSS組版の救世主 Vivliostyle
    12

    View Slide

  13. Vivliostyleのなりたち
    • EPUB Adaptive Layoutという仕様に対応したEPUBビューアを
    Peter Sorotokinさん(提唱者)が作る
    • その後EPUB Adaptive Layoutはポシャるが、ビューア自体は
    よく出来ていた
    • EPUB Adaptive Layout以外にもCSSの仕様で組版に役立ちそ
    うなやつ実装しようぜ! → Vivliostyle
    CSS組版の救世主 Vivliostyle
    13
    Peter Sorotokin
    Adobe Systems → Google

    View Slide

  14. 実際どうやって動いてるの
    1. 指定されたURLからHTMLと
    参照されているCSSをロード
    2. CSSをパースして(!?)
    DOMに当てるスタイル情報
    を取得
    3. 固定サイズのページブロック
    中に収まるよう要素を追加
    CSS組版の救世主 Vivliostyle
    14

    View Slide

  15. 今後の方向性
    • Next EPUB?
    • EPUBの仕様は、将来的にCSSの仕様として取り込まれる
    • Web Publicationsや
    WebBookへ
    • コントリビュートしてみたい → ありがとうございます!!!!
    • 現在JS+Closure CompilerからTypeScriptへ引っ越し中な
    ので、もう少し待つとマシなコードになってるはず
    CSS組版の救世主 Vivliostyle
    15

    View Slide

  16. https://viola.pub
    CSS組版の救世主 Vivliostyle
    16

    View Slide

  17. ためしてみよう
    • Viola (https://viola.pub)
    • ブラウザ上で完結するCSS組版特化エディタ
    • Vivliostyle による紙面レイアウトをその場で確認!
    • ブラウザの印刷機能を使ってそのままPDF出力!
    CSS組版の救世主 Vivliostyle
    17
    〜 私が作っています 〜

    View Slide