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

by spring_raining

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

CSS組版の救世主 Vivliostyle 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

吾輩の自画像をに示す。

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

Slide 11

Slide 11 text

吾輩の自画像をに示す。

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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