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.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
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.7k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.4k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
810
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
640
Printable Web
spring_raining
3
840
今こそCSS組版
spring_raining
5
2.3k
シン・サーバの形は。
spring_raining
0
300
クライアントサイドWebアプリはいいぞ
spring_raining
0
590
Other Decks in Technology
See All in Technology
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
16
3.9k
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
650
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
400
Classmethod Odyssey 登壇資料
yamahiro
0
390
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
AWSでRAGを作る法方
sonoda_mj
1
140
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Visualization
eitanlees
139
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing Experiences People Love
moore
136
23k
How to name files
jennybc
67
96k
Documentation Writing (for coders)
carmenintech
63
4.2k
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 〜 私が作っています 〜