Printable Web

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

   最古の記録媒体 紙

5. 5.

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

   倍の歴史！ ！ ！ ！
6. 6.

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

7. 7.

   CSS 組版は要件が先行 非日本語ネイティブの開発者に 「縦中横」 「ぶら下げ組」 など を伝えるのはむずい JLREQ の要件がCSS やEPUB

   に採用されたりされなかったり 他に中国語/ 韓国語/ インド系言語/ エチオピア語/ アラビア 語/ ヘブライ語/ チベット語/ 欧文自身の組版要件も 日本語組版の要件(JLREQ)
8. 8.

   None
9. 9.

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

10. 10.

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

11. 11.

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

    Payments で販売したり
12. 12.

    CSS 組版 実例

13. 13.

    例: Vertical Rhythm 要素の高さは一定幅の倍数で揃っていると見栄えが良い JLREQ の 「行取り」 に近い考え pixel やem

    でも指定できるけど、line-height-step で勝手に 揃えてくれる！ chrome://flags/#enable-experimental-web-platform- features を有効にすると適用できる
14. 14.

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

    float: bottom; }
15. 15.

    例: カウンタ 自動で番号を割り振り参照もできる ただしブラウザでは未実装 <a class="figref" href="#cat"></a> を見てくれ！！ <figure> <img

    src="nuko.png"> <figcaption id="cat"> ぬこ</figcaption> </figure> body { counter-reset: fig; } figcaption { counter-increment: fig; } figcaption::before { content: ' 図' counter(fig) '. '; } a.figref::after { content: ' 図' target-counter(attr(href), f }
16. 16.

    例: 柱・ノンブル CSS Paged Media で実現 ただしブラウザでは未実装 @page { @bottom-left

    { content: counter(page); background-color: black; } @bottom-center { background-color: black; } @bottom-right { background-color: black; } }
17. 17.

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

18. 18.

    None
19. 19.

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

20. 20.

    None
21. 21.

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

22. 22.

    Vivliostyle を ためしてみよう

23. 23.

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

24. 24.

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