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.3k
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.6k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.3k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
770
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
630
Printable Web
spring_raining
3
820
今こそCSS組版
spring_raining
5
2.3k
シン・サーバの形は。
spring_raining
0
300
クライアントサイドWebアプリはいいぞ
spring_raining
0
570
Other Decks in Technology
See All in Technology
Databricks における 『MLOps』
databricksjapan
2
170
データベース02: データベースの概念
trycycle
0
150
JSON攻略法.pdf
miyakemito
8
4.9k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.1k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
3
12k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Code Reviewing Like a Champion
maltzj
514
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Designing Experiences People Love
moore
136
23k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
KATA
mclloyd
15
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
For a Future-Friendly Web
brad_frost
172
9k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Building Adaptive Systems
keathley
31
1.9k
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 〜 私が作っています 〜