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

Presented at HTML5 Conference 2018

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