Printable Web
by
spring_raining
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 トランスパイラ