Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
Search
spring_raining
November 25, 2018
Technology
6
7.9k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
Presented at HTML5 Conference 2018
spring_raining
November 25, 2018
Tweet
Share
More Decks by spring_raining
See All by spring_raining
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.7k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.5k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
900
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.1k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
670
Printable Web
spring_raining
3
890
今こそCSS組版
spring_raining
5
2.4k
シン・サーバの形は。
spring_raining
0
310
クライアントサイドWebアプリはいいぞ
spring_raining
0
620
Other Decks in Technology
See All in Technology
ZOZOTOWN の推薦における KPI モニタリング/KPI monitoring for ZOZOTOWN recommendations
rayuron
1
810
Qiita埋め込み用スライド
naoki_0531
0
5.5k
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
310
10年もののバグを退治した話
n_seki
0
140
AWS re:Invent 2024 Recap in ZOZO - Serverless で好きなものをしゃべってみた
chongmyungpark
0
1k
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
100
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
1.2k
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
0
100
Unsafe.BitCast のすゝめ。
nenonaninu
0
120
UI State設計とテスト方針
rmakiyama
4
940
Evolving Architecture
rainerhahnekamp
3
200
OPENLOGI Company Profile
hr01
0
57k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
96
5.3k
For a Future-Friendly Web
brad_frost
176
9.5k
RailsConf 2023
tenderlove
29
960
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Facilitating Awesome Meetings
lara
50
6.2k
How to train your dragon (web standard)
notwaldorf
88
5.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Agile that works and the tools we love
rasmusluckow
328
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Transcript
CSS組版の救世主 Vivliostyle 2018/11/25 HTML5 Conference LT 緑豆はるさめ @spring_raining
はじめまして • Twitter: @spring_raining / GitHub: spring-raining • 「はるさめ」とお呼びください •
大阪の大学院生 • フォントの研究をしている CSS組版の救世主 Vivliostyle 2
CSS組版 CSS組版の救世主 Vivliostyle 3 ?
Web技術で本をつくる • HTMLで原稿を書き、CSSでページにレイアウト • それ実用できんの? 4 Lea Verou (著), 牧野
聡 (翻訳). CSSシークレット ―47のテクニックでCSSを自在に操る できます
高まるCSS組版へのニーズ 5 https://twitter.com/vvakame/status/1050002671338278912
CSS組版の救世主 Vivliostyle 6
Vivliostyleとは • https://vivilostyle.org • Webブラウザベースの組版システム • ブラウザの印刷機能でPDFを出力! • CSS組版に必要だけどまだブラウザに無い機能を先取りして 実装
CSS組版の救世主 Vivliostyle 7 Vivliostyle Foundation 〜 私たちが作っています 〜
ブラウザに無い機能 CSS組版の救世主 Vivliostyle 8
@page { @bottom-left { content: counter(page); } @bottom-right { content:
'HTML5 Conference'; } } ページのはしっこのレイアウト • CSS Paged Mediaで定義 CSS組版の救世主 Vivliostyle 9
<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
<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
Vivliostyleの目的 • VivliostyleはW3Cのようなコンソーシアムにより将来標準化 される可能性のある仕様だけに対応する • 決して「ぼくがかんがえたさいきょうのCSS」ではない! • ただし本当に策定されるとは限らない CSS組版の救世主 Vivliostyle
12
Vivliostyleのなりたち • EPUB Adaptive Layoutという仕様に対応したEPUBビューアを Peter Sorotokinさん(提唱者)が作る • その後EPUB Adaptive
Layoutはポシャるが、ビューア自体は よく出来ていた • EPUB Adaptive Layout以外にもCSSの仕様で組版に役立ちそ うなやつ実装しようぜ! → Vivliostyle CSS組版の救世主 Vivliostyle 13 Peter Sorotokin Adobe Systems → Google
実際どうやって動いてるの 1. 指定されたURLからHTMLと 参照されているCSSをロード 2. CSSをパースして(!?) DOMに当てるスタイル情報 を取得 3. 固定サイズのページブロック
中に収まるよう要素を追加 CSS組版の救世主 Vivliostyle 14
今後の方向性 • Next EPUB? • EPUBの仕様は、将来的にCSSの仕様として取り込まれる • Web Publicationsや WebBookへ
• コントリビュートしてみたい → ありがとうございます!!!! • 現在JS+Closure CompilerからTypeScriptへ引っ越し中な ので、もう少し待つとマシなコードになってるはず CSS組版の救世主 Vivliostyle 15
https://viola.pub CSS組版の救世主 Vivliostyle 16
ためしてみよう • Viola (https://viola.pub) • ブラウザ上で完結するCSS組版特化エディタ • Vivliostyle による紙面レイアウトをその場で確認! •
ブラウザの印刷機能を使ってそのままPDF出力! CSS組版の救世主 Vivliostyle 17 〜 私が作っています 〜