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

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

Paged.js とは？ Paged.js とは？ 3

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

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

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

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

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

サンプル 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

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

検証⽤プロジェクト サンプルを個別に 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

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

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

その他、気になった点 公式 Web サイト 技術情報が充実していて⾼評価、特に Paged Media 関連 周辺ツール 単体 JavaScript、npm、CLI が揃ってる vivliostyle/themes、vivliostyle/create-book などは Vivliostyle が先⾏していると思 う サンプル不⾜ 機能単位のサンプル コードはあるが、⽂書としての公式サンプルはなさそう Vivliostyle でいう vivliostyle/vivliostyle_doc 的なものがほしい Vivliostyle との⽐較 14

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

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