Slide 1

Slide 1 text

Printable Web 2018/3/24 Kyoto.js 14 @spring_raining

Slide 2

Slide 2 text

自己紹介 はるさめ / GitHub: 大阪の大学院生 研究でWebAssembly の機運 @spring_raining spring-raining https://harusamex.com

Slide 3

Slide 3 text

同人誌制作 趣味で技術系同人誌を制作しています

Slide 4

Slide 4 text

最古の記録媒体 紙

Slide 5

Slide 5 text

紙の歴史 世界初のブラウザ: 1991 年(27 年前) パピルス: BC3000 年(5000 年前) 185 倍の歴史! ! ! !

Slide 6

Slide 6 text

CSS 組版とは? Web と紙に出力したい… でも別々にレイアウトするのはめんどくさい… Web のレイアウトをそのまま紙に印刷すれば解決!

Slide 7

Slide 7 text

CSS 組版は要件が先行 非日本語ネイティブの開発者に 「縦中横」 「ぶら下げ組」 など を伝えるのはむずい JLREQ の要件がCSS やEPUB に採用されたりされなかったり 他に中国語/ 韓国語/ インド系言語/ エチオピア語/ アラビア 語/ ヘブライ語/ チベット語/ 欧文自身の組版要件も 日本語組版の要件(JLREQ)

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

電子書籍といえばEPUB 実はHTML とCSS ファイル(+α) をZIP で固めただけ

Slide 10

Slide 10 text

EPUB →CSS IDPF(EPUB 策定フォーラム) はW3C に統合 将来的にEPUB はWeb 技術の一部となる

Slide 11

Slide 11 text

WD: Web Publications Chrome Extension のようにJSON のマニフェストを用意 ServiceWorker でオフラインキャッシュしたり、 Web Payments で販売したり

Slide 12

Slide 12 text

CSS 組版 実例

Slide 13

Slide 13 text

例: Vertical Rhythm 要素の高さは一定幅の倍数で揃っていると見栄えが良い JLREQ の 「行取り」 に近い考え pixel やem でも指定できるけど、line-height-step で勝手に 揃えてくれる! chrome://flags/#enable-experimental-web-platform- features を有効にすると適用できる

Slide 14

Slide 14 text

例: float property 「図の周りに文章を流し込むやつ」 がパワーアップ ただしブラウザでは未実装 img { float-reference: page; float: bottom; }

Slide 15

Slide 15 text

例: カウンタ 自動で番号を割り振り参照もできる ただしブラウザでは未実装 を見てくれ!! ぬこ body { counter-reset: fig; } figcaption { counter-increment: fig; } figcaption::before { content: ' 図' counter(fig) '. '; } a.figref::after { content: ' 図' target-counter(attr(href), f }

Slide 16

Slide 16 text

例: 柱・ノンブル CSS Paged Media で実現 ただしブラウザでは未実装 @page { @bottom-left { content: counter(page); background-color: black; } @bottom-center { background-color: black; } @bottom-right { background-color: black; } }

Slide 17

Slide 17 text

未実装の仕様が 多すぎる! ! ! ! !

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Vivliostyle 未実装のCSS 機能のPolyfill を提供 商業誌でも使われています

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

これから Vivliostyle は企業としての活動と分裂して、 完全にオープンな コミュニティに生まれ変わる spring-raining はCollaborator に! PR お待ちしております!

Slide 22

Slide 22 text

Vivliostyle を ためしてみよう

Slide 23

Slide 23 text

Viola 多機能CSS 組版エディタ( 自画自賛) https://viola.pub

Slide 24

Slide 24 text

実装予定 オンライン同期(Dropbox API ?) CSS テンプレート いい感じのMarkdown トランスパイラ