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
8k
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
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
130
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
910
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.1k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
680
Printable Web
spring_raining
3
900
今こそCSS組版
spring_raining
5
2.5k
シン・サーバの形は。
spring_raining
0
320
Other Decks in Technology
See All in Technology
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
110
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
エンジニアのキャリアパスと、 その中で自分が大切にしていること
noteinc
3
310
Pwned Labsのすゝめ
ken5scal
2
570
OPENLOGI Company Profile
hr01
0
60k
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
280
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
170
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.9k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.7k
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
400
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Producing Creativity
orderedlist
PRO
344
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
BBQ
matthewcrist
87
9.5k
Speed Design
sergeychernyshev
28
820
A Modern Web Designer's Workflow
chriscoyier
693
190k
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Typedesign – Prime Four
hannesfritz
41
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Your Own Lightsaber
phodgson
104
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
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 〜 私が作っています 〜