Printable Web

Kyoto.js 14で発表しました
Author: @spring_raining

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. 最古の記録媒体
   紙
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. CSS
    組版 実例
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. View Slide

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

    View Slide

20. View Slide

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

    View Slide

22. Vivliostyle
    を
    ためしてみよう
    

    View Slide

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

    View Slide

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

    View Slide