Presented at HTML5 Conference 2018
CSS組版の救世主 Vivliostyle2018/11/25 HTML5 Conference LT緑豆はるさめ @spring_raining
View Slide
はじめまして• Twitter: @spring_raining / GitHub: spring-raining• 「はるさめ」とお呼びください• 大阪の大学院生• フォントの研究をしているCSS組版の救世主 Vivliostyle2
CSS組版CSS組版の救世主 Vivliostyle3?
Web技術で本をつくる• HTMLで原稿を書き、CSSでページにレイアウト• それ実用できんの?4Lea Verou (著), 牧野 聡 (翻訳). CSSシークレット ―47のテクニックでCSSを自在に操るできます
高まるCSS組版へのニーズ 5https://twitter.com/vvakame/status/1050002671338278912
CSS組版の救世主 Vivliostyle6
Vivliostyleとは• https://vivilostyle.org• Webブラウザベースの組版システム• ブラウザの印刷機能でPDFを出力!• CSS組版に必要だけどまだブラウザに無い機能を先取りして実装CSS組版の救世主 Vivliostyle7Vivliostyle Foundation〜 私たちが作っています 〜
ブラウザに無い機能CSS組版の救世主 Vivliostyle8
@page {@bottom-left {content: counter(page);}@bottom-right {content: 'HTML5 Conference';}}ページのはしっこのレイアウト• CSS Paged Mediaで定義CSS組版の救世主 Vivliostyle9
吾輩の自画像をに示す。hogeページ番号やcounterの参照• CSS Generated Content forPaged Mediaで定義CSS組版の救世主 Vivliostyle10
吾輩の自画像をに示す。hogea.fig::before {content: '図'target-counter(attr(href url), fig);}figcaption {counter-increment: fig;}figcaption::before {content: '図' counter(fig) ': ';}ページ番号やcounterの参照• CSS Generated Content forPaged Mediaで定義CSS組版の救世主 Vivliostyle11
Vivliostyleの目的• VivliostyleはW3Cのようなコンソーシアムにより将来標準化される可能性のある仕様だけに対応する• 決して「ぼくがかんがえたさいきょうのCSS」ではない!• ただし本当に策定されるとは限らないCSS組版の救世主 Vivliostyle12
Vivliostyleのなりたち• EPUB Adaptive Layoutという仕様に対応したEPUBビューアをPeter Sorotokinさん(提唱者)が作る• その後EPUB Adaptive Layoutはポシャるが、ビューア自体はよく出来ていた• EPUB Adaptive Layout以外にもCSSの仕様で組版に役立ちそうなやつ実装しようぜ! → VivliostyleCSS組版の救世主 Vivliostyle13Peter SorotokinAdobe Systems → Google
実際どうやって動いてるの1. 指定されたURLからHTMLと参照されているCSSをロード2. CSSをパースして(!?)DOMに当てるスタイル情報を取得3. 固定サイズのページブロック中に収まるよう要素を追加CSS組版の救世主 Vivliostyle14
今後の方向性• Next EPUB?• EPUBの仕様は、将来的にCSSの仕様として取り込まれる• Web PublicationsやWebBookへ• コントリビュートしてみたい → ありがとうございます!!!!• 現在JS+Closure CompilerからTypeScriptへ引っ越し中なので、もう少し待つとマシなコードになってるはずCSS組版の救世主 Vivliostyle15
https://viola.pubCSS組版の救世主 Vivliostyle16
ためしてみよう• Viola (https://viola.pub)• ブラウザ上で完結するCSS組版特化エディタ• Vivliostyle による紙面レイアウトをその場で確認!• ブラウザの印刷機能を使ってそのままPDF出力!CSS組版の救世主 Vivliostyle17〜 私が作っています 〜