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

Paged.js について 〜Yet another CSS paged media polyfill〜

akabeko
October 24, 2020

Paged.js について 〜Yet another CSS paged media polyfill〜

Paged.js の紹介と Vivliostyle との比較検証。

akabeko

October 24, 2020
Tweet

More Decks by akabeko

Other Decks in Technology

Transcript

  1. Paged.js について
    〜Yet another CSS paged media polyfill〜
    @akabekobeko
    Vivliostyle User/Dev Meetup 2020 Autumn
    1

    View full-size slide

  2. もくじ
    Paged.js とは?
    Paged.js を使ってみる
    Vivliostyle との⽐較
    まとめ
    2

    View full-size slide

  3. Paged.js とは?
    Paged.js とは? 3

    View full-size slide

  4. Paged.js とは?
    公式サイト https://www.pagedjs.org/
    CSS Paged Media に基づく組版エンジン
    HTML/CSS で作成した⽂書を Web ブラウザーで組版する
    組版した結果は PDF ファイルとして出⼒される
    Web 技術による組版という点が Vivliostyle と共通している
    Paged.js とは? 4

    View full-size slide

  5. CSS Paged Media とは?
    CSS Paged Media Module Level 3
    https://www.w3.org/TR/css-page-3/
    This CSS module specifies how pages are generated and laid out to hold fragmented
    content in a paged presentation. It adds functionality for controlling page margins,
    page size and orientation, and headers and footers, and extends generated content to
    enable page numbering and running headers / footers.
    ざっくり要約すると Web コンテンツでページ処理、ページ番号、ヘッダーやフッターといっ
    た紙の書籍でおなじみの機能を利⽤するための CSS 標準規格です。
    Paged.js とは? 5

    View full-size slide

  6. Paged.js を使ってみる
    Paged.js を使ってみる 6

    View full-size slide

  7. Paged.js の利⽤⽅法
    Paged.js は利⽤⽅法として以下を提供しています。今回は CLI を試します。
    HTML の <br/>タグへ paged.polyfill.js<br/>を指定<br/>npm https://www.npmjs.com/package/pagedjs<br/>CLI https://www.npmjs.com/package/pagedjs<br/>VS Code 拡張 https://marketplace.visualstudio.com/items?<br/>itemName=abechanta.vscode-ext-paged-media<br/>技術書典 9 「無料で楽チン!Markdown で CSS 組版する本」に詳しい<br/>Paged.js を使ってみる 7<br/>

    View full-size slide

  8. CLI の使い⽅
    Node.js + npm を利⽤可能な環境にインストールします。
    $ npm install -g pagedjs-cli
    pagedjs-cli
    コマンドが利⽤可能となるので以下のように実⾏します。
    $ pagedjs-cli ./path/to/index.html -o result.pdf
    ./path/to/index.html
    = 組版対象 HTML ファイルの指定
    -o result.pdf
    = 出⼒オプションと PDF ファイルの指定
    HTML は Paged Media に基づいた CSS を定義、または参照しておく必要があります。
    Paged.js を使ってみる 8

    View full-size slide

  9. サンプル HTML/CSS
    Paged.js を試すにあたり、Paged Media に基づいた HTML/CSS をゼロから作成するのは⼤
    変なので既存サンプルを利⽤します。対象は以下。
    Vivlistyle https://github.com/vivliostyle/vivliostyle_doc
    print-css.rocks https://print-css.rocks/lessons
    これらについて Vivliostyle 村上さんと相談し、検証にふさわしいものを選びました。その結
    果 Vivliostyle = 9
    、print-css.rocks = 54
    の合計 63
    サンプルを検証対象としています。
    Paged.js を使ってみる 9

    View full-size slide

  10. 検証基準
    PDF 化されたサンプルの成否を検証するにあたり、以下の基準を設定しました。
    Vivliostyle サンプルは vivliostyle-cli の出⼒した PDF を基準とする
    print-css.rocks サンプルは Lessons ページ https://print-css.rocks/lessons で OK とさ
    れた PDF を基準とする
    出⼒結果が基準 PDF のとおり組版されていれば OK、それ以外は NG とする
    Paged.js を使ってみる 10

    View full-size slide

  11. 検証⽤プロジェクト
    サンプルを個別に PDF 出⼒するのは⼤変なので検証⽤プロジェクトを作成しました。
    akabekobeko/examples-vivliostyle-pagedjs
    https://github.com/akabekobeko/examples-vivliostyle-pagedjs
    このプロジェクトは Paged.js と Vivliostyle を利⽤してサンプルを⼀括で PDF 化します。
    $ npm run build:vivliostyle
    $ npm run build:pagedjs
    プロジェクトの package.json
    を読むと、それぞれの利⽤⽅法の参考にもなると思います。
    Paged.js を使ってみる 11

    View full-size slide

  12. Vivliostyle との⽐較
    出⼒された PDF について検証した結果は以下のようになりました。
    サンプル サンプル合計 Vivliostyle (OK) Paged.js (OK)
    Vivliostyle 9 9 1
    print-css.rocks 54 37 32
    詳細は以下のブログ記事を参照してください。
    Paged.js を試す https://akabeko.me/blog/2020/10/pagedjs/
    Vivliostyle との⽐較 12

    View full-size slide

  13. 検証結果の考察
    Vivliostyle サンプルで Paged.js が OK だったのは Wood Engraving のみ
    NG のものはページ処理できていない
    print-css.rocks サンプルはページ処理できている
    原因がサンプルか Paged.js なのかは継続調査が必要
    print-css.rocks サンプルで Paged.js のみ OK は blank-pages だけ
    逆の結果を想像していたので意外
    数式はどちらも OK にならず
    両者共に Chromium を利⽤しているため、その対応状況が結果に現れたものと思わ
    れます
    Vivliostyle との⽐較 13

    View full-size slide

  14. その他、気になった点
    公式 Web サイト
    技術情報が充実していて⾼評価、特に Paged Media 関連
    周辺ツール
    単体 JavaScript、npm、CLI が揃ってる
    vivliostyle/themes、vivliostyle/create-book などは Vivliostyle が先⾏していると思

    サンプル不⾜
    機能単位のサンプル コードはあるが、⽂書としての公式サンプルはなさそう
    Vivliostyle でいう vivliostyle/vivliostyle_doc 的なものがほしい
    Vivliostyle との⽐較 14

    View full-size slide

  15. まとめ
    検証結果の拮抗具合と周辺ツール、公式ページ資料の充実などから Vivliostyle のよき競
    合だと感じた
    Paged Media の普及と盛り上がりのために競合の存在はありがたい
    Paged.js と Vivliostyle で共存共栄してゆきたい
    まとめ 15

    View full-size slide

  16. ご清聴
    ありがとうございました
    Paged.js について〜Yet another CSS paged media polyfill〜 16

    View full-size slide