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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide