Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
November 25, 2018
Technology
6
4.5k
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
spring_raining
0
1.4k
spring_raining
0
350
spring_raining
2
1.5k
spring_raining
3
500
spring_raining
3
620
spring_raining
5
1.8k
spring_raining
0
250
spring_raining
0
480
spring_raining
0
150
Other Decks in Technology
See All in Technology
clustervr
0
160
shimacos
2
320
toshinoritakai
1
200
kentaro
1
420
caori_t
0
160
mmarukaw
0
1.4k
pinboro
0
2.1k
saoritakita
0
350
soachr
1
150
hirosys
0
130
ocise
0
130
comucal
PRO
0
420
Featured
See All Featured
moore
125
21k
zakiwarfel
88
3.3k
lara
16
2.6k
morganepeng
17
1.1k
schacon
145
6.6k
geeforr
332
29k
samanthasiow
56
6.3k
jlugia
216
16k
chriscoyier
684
180k
bryan
30
3.3k
philnash
8
490
smashingmag
229
18k
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 〜 私が作っています 〜