$30 off During Our Annual Pro Sale. View Details »

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
  2. もくじ Paged.js とは? Paged.js を使ってみる Vivliostyle との⽐較 まとめ 2

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

  4. Paged.js とは? 公式サイト https://www.pagedjs.org/ CSS Paged Media に基づく組版エンジン HTML/CSS で作成した⽂書を

    Web ブラウザーで組版する 組版した結果は PDF ファイルとして出⼒される Web 技術による組版という点が Vivliostyle と共通している Paged.js とは? 4
  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
  6. Paged.js を使ってみる Paged.js を使ってみる 6

  7. Paged.js の利⽤⽅法 Paged.js は利⽤⽅法として以下を提供しています。今回は CLI を試します。 HTML の <script> タグへ

    paged.polyfill.js を指定 npm https://www.npmjs.com/package/pagedjs CLI https://www.npmjs.com/package/pagedjs VS Code 拡張 https://marketplace.visualstudio.com/items? itemName=abechanta.vscode-ext-paged-media 技術書典 9 「無料で楽チン!Markdown で CSS 組版する本」に詳しい Paged.js を使ってみる 7
  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
  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
  10. 検証基準 PDF 化されたサンプルの成否を検証するにあたり、以下の基準を設定しました。 Vivliostyle サンプルは vivliostyle-cli の出⼒した PDF を基準とする print-css.rocks

    サンプルは Lessons ページ https://print-css.rocks/lessons で OK とさ れた PDF を基準とする 出⼒結果が基準 PDF のとおり組版されていれば OK、それ以外は NG とする Paged.js を使ってみる 10
  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
  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
  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
  14. その他、気になった点 公式 Web サイト 技術情報が充実していて⾼評価、特に Paged Media 関連 周辺ツール 単体

    JavaScript、npm、CLI が揃ってる vivliostyle/themes、vivliostyle/create-book などは Vivliostyle が先⾏していると思 う サンプル不⾜ 機能単位のサンプル コードはあるが、⽂書としての公式サンプルはなさそう Vivliostyle でいう vivliostyle/vivliostyle_doc 的なものがほしい Vivliostyle との⽐較 14
  15. まとめ 検証結果の拮抗具合と周辺ツール、公式ページ資料の充実などから Vivliostyle のよき競 合だと感じた Paged Media の普及と盛り上がりのために競合の存在はありがたい Paged.js と

    Vivliostyle で共存共栄してゆきたい まとめ 15
  16. ご清聴 ありがとうございました Paged.js について〜Yet another CSS paged media polyfill〜 16