Happy 2nd birthday HTML5! 2016-10-29 発表資料

1. Webと出版と、CSSの未来の話
Happy 2nd birthday HTML5! 2016­10­29
村上 真雄 (@MurakamiShinyu)
（株）ビブリオスタイル Founder & CTO

2. 目次
1. HTML5と出版 3
2. 画面も印刷もCSSで：Vivliostyleの取り組み 6
3. Webと出版に役立つCSS 10
4. CSSを拡張可能に：CSS Houdini 14
5. まとめ 17
Webと出版と、CSSの未来の話 Page 2

3. HTML5と出版
Webと出版と、CSSの未来の話 Page 3

4. 電子書籍はHTML5やCSS3でできている
EPUB = HTML + CSS + パッケージ化
(AmazonのKindle本も同様)
世界標準のEPUB仕様で日本語の電子書籍が可能になったのは
CSS3 Writing Modesで縦書きが可能に、ブラウザ実装が進む
HTML5でルビのマークアップが標準に
html {
writing-mode: vertical-rl; /* 縦書き */
}
...
<p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。
名前はまだ無い。</p>
わ
が
は
い
吾
輩
は
猫
で
あ
る
︒
名
前
は
ま
だ
無
い
︒
Webと出版と、CSSの未来の話 Page 4

5. Webの標準 ＝ 電子出版の標準へ
２つの標準化団体の連携によりWeb標準を使う電子出版が実現
W3C (World Wide Web Consortium)
IDPF (International Digital Publishing Forum)
Webと出版が融合？
「Web出版物」の標準化構想
Portable Web Publications for the Open Web Platform
オンラインでもオフラインでもシームレスに読める
WebサイトでもEPUBのようなパッケージ形式でも
W3C・IDPFの両組織の統合（W3Cにマージ）への動き
☞W3CとIDPFが両組織の統合を検討中
Webと出版と、CSSの未来の話 Page 5

6. 画面も印刷もCSSで：
Vivliostyleの取り組み
Webと出版と、CSSの未来の話 Page 6

7. Vivliostyle（ビブリオスタイル）とは
vivlio（βιβλίο /vivlío/ ＝ ギリシャ語〈本〉）＋ style
本（出版物）の作り方や読み方の新しいスタイルを、
世界の誰でも自由に使えるオープンなWeb標準技術で
紙でも電子でも、
表現したいように表現できる自由と、
読みたい形で読める自由を （＝アクセシビリティー）
ということを目指して Vivliostyle と命名
2014年8月に株式会社ビブリオスタイル (Vivliostyle Inc.) 設立
W3Cメンバーとして仕様策定に参加しながら、次世代のCSS標準を先行実装
製品：Vivliostyle Viewer (JSライブラリ) / Vivliostyle Formatter (PDF出力)
http://vivliostyle.com
Webと出版と、CSSの未来の話 Page 7

8. Vivliostyleの特徴
印刷の世界と画面の世界を一元化
印刷物も様々な画面も
ひとまとめで扱える
Webブラウザさえあれば使える
HTMLとCSSだけ
オープンソース
github.com/vivliostyle/vivliostyle.js
Webと出版と、CSSの未来の話 Page 8

9. Vivliostyleの事例紹介・デモ
書籍『CSSシークレット』（Lea Verou著、牧野 聡 訳、オライリー）
☞
☞ W3C仕様書など
☞ Vivliostyle Viewerサンプル
Webと出版と、CSSの未来の話 Page 9

10. Webと出版に役立つCSS
Webと出版と、CSSの未来の話 Page 10

11. Webと出版に役立つCSS仕様
日本語縦書きなど
参考 ☞「縦書きWeb普及委員会」の「技術解説」
雑誌のようなレイアウト
段組み：CSS Multi­column Layout
任意の形の回り込み：CSS Shapes
サンプル ☞
CSS Writing Modes
CSS Text
CSS Text Decoration
CSS Ruby
Webと出版と、CSSの未来の話 Page 11

12. ページのレイアウト
CSS Paged Media
CSS Generated Content
CSS Page Templates
CSS Page Floats
フォント：CSS Fonts
最近の話題： Variable font
複数のフォントのようにふるまう単一のフォント
参考☞ Variable Fonts: the Future of (Web) Type
CSS Fonts Level 4 の Font Variation Properties
Webと出版と、CSSの未来の話 Page 12

13. Can I Use ____? (http://caniuse.com)
例：http://caniuse.com/#search=shapes
W3CでCSSの仕様ができて全ブラウザで使えるようになるには時間がかかる
Vivliostyleは、JavaScriptでブラウザのCSS機能を補う実装をしてるが…
Web開発者がWebの機能を拡張していく Extensible Web の考えをCSSにも
（そこで CSS Houdini へ）
Webと出版と、CSSの未来の話 Page 13

14. CSSを拡張可能に：
CSS Houdini
Webと出版と、CSSの未来の話 Page 14

15. CSS Houdiniとは
低レベルAPIを開放し、JavaScriptから利用できるようにする。
ブラウザに未実装のCSS機能を実現するポリフィルが作りやすくなる
VivliostyleのようなJavaScriptによるCSS拡張実装が楽になる。
公開されたCSSポリフィルが色々利用できるようになると便利！
ドラフト仕様：https://drafts.css­houdini.org/
参考☞「CSS Houdini / CSS Working Groupミーティングに参加しました」
（CSS Houdini初回ミーティング（2015年2月）の報告／Vivliostyle blog）
Box Tree API
CSS Layout API
CSS Painting API
CSS Parser API
CSS Properties and Values API
CSS Typed OM
Font Metrics API
Worklets
Webと出版と、CSSの未来の話 Page 15

16. Houdini仕様とブラウザのレンダリング・パイプラインの関係図 （Philip Walton氏の記事
Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of より。
この記事の日本語訳がありました： 「Houdini:CSSにおいて初めて聞くであろう、おそらく一番ワクワクする進化だよ」）
Webと出版と、CSSの未来の話 Page 16

17. まとめ
Webと出版と、CSSの未来の話 Page 17

18. Webと出版がつながること
進化するCSSの未来にわくわく
それらを先取りしてるVivliostyleをチェックしてね
CSS標準のテクニックを学ぶお勧めの本 ☞
『CSSシークレット — 47のテクニックでCSSを
自在に操る』
著者：Lea Verou（リア・ヴェルー）
訳者：牧野 聡
制作：株式会社ビブリオスタイル
発行：オライリー・ジャパン
Webと出版と、CSSの未来の話 Page 18