Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Printable Web

Printable Web

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

spring_raining

March 24, 2018
Tweet

More Decks by spring_raining

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 最古の記録媒体

    View full-size slide

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



    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. CSS
    組版 実例

    View full-size slide

  12. 例: Vertical Rhythm
    要素の高さは一定幅の倍数で揃っていると見栄えが良い
    JLREQ

    「行取り」
    に近い考え
    pixel
    やem
    でも指定できるけど、line-height-step
    で勝手に
    揃えてくれる!
    chrome://flags/#enable-experimental-web-platform-
    features
    を有効にすると適用できる

    View full-size slide

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

    View full-size slide

  14. 例:
    カウンタ
    自動で番号を割り振り参照もできる
    ただしブラウザでは未実装

    を見てくれ!!



    ぬこ

    body {
    counter-reset: fig;
    }
    figcaption {
    counter-increment: fig;
    }
    figcaption::before {
    content: '
    図' counter(fig) '. ';
    }
    a.figref::after {
    content: '
    図' target-counter(attr(href), f
    }

    View full-size slide

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

    View full-size slide

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




    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Vivliostyle

    ためしてみよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide