Movatterモバイル変換

Vivliostyle.js におけるCSSPaged Media の実装2021-04-10Shinyu MurakamiVivliostyle Foundation

目次1. CSS組版エンジンVivliostyle.js Core　31. Vivliostyle.js のアイデア　since 2014　42. CSS組版に必要なCSS仕様は？　53. 再開発途上CSS Paged Media サポート　72. CSS Paged Media を使いこなそう！　81. Named strings—柱を本文の見出しから　92. Named pages—名前付きのページルール　103. Nth Page Selector: nth()　113. ページメディア用CSS仕様サポート状況まとめ　151. CSS Paged Media Level 3　162. CSS Generated Content for Paged Media (GCPM)　183. CSS Fragmentation Level 3　204. CSS Page Floats　215. より詳しくはVivliostyle ドキュメント→「サポートするCSS 機能」へ　222

CSS組版エンジンVivliostyle.js Core3

Vivliostyle.js のアイデア　since 2014だれもが自由に使えるWebブラウザ上で動くCSS組版エンジンをオープンソースで開発WebブラウザのレンダリングエンジンとPDF出力機能を利用最新のWeb標準をサポートCSS組版仕様の標準化と普及に貢献❌独自仕様で高機能組版を目指す（というのではない。）CSS組版エンジンVivliostyle.js Core 4

CSS組版に必要なCSS仕様は？Webブラウザで標準で使える基本的なCSS仕様CSS 2.1Selectors Level 3CSS Backgrounds and Borders Level 3CSS Fonts Level 3CSS Writing Modes Level 3CSS Multi-column Layout Level 1CSS Flexible Box Level 1etc.CSS組版エンジンVivliostyle.js Core 5

ページメディア用のCSS仕様CSS Paged Media Level 3⭐️ページメディア用CSS基本仕様CSS Generated Content for Paged Media (GCPM) 3⭐️柱や脚注やクロスリファレンスCSS Fragmentation ⭐️改ページ関係CSS Page Floats⭐️図版などページフロート配置Vivliostyle.js はWebブラウザを利用する。したがってWeb用のCSS仕様は基本的に利用できる。ページメディア用のCSS仕様サポートを追加すればよい🌟そうしてVivliostyle.js 開発がスタート　👉Vivliostyle のなりたちCSS組版エンジンVivliostyle.js Core 6

再開発途上CSS Paged Media サポートVivliostyle.js にはだいぶ前からページメディア用のCSS仕様の多くの機能が実装済み。（初期の開発者たちに感謝🙏）しかし、いくつかの重要な機能が実装されずに残っていた。🐢やっと昨年末から、ぼちぼち実装を進めることができている。🌟最新バージョンで利用可能になったページメディア用CSS機能:✅Named strings（名前付き文字列）🌟v2.4 (2020-12-28)✅Nth Page Selector 🌟v2.5 (2021-02-26)✅Named pages（名前付きページ）🌟v2.7 (2021-04-07)CSS組版エンジンVivliostyle.js Core 7

CSS Paged Media を使いこなそう！8

Named strings—柱を本文の見出しから名前付き文字列(Named strings)の使用例:@page :right {@top-right { /* 右上のページヘッダに章見出し */content: string(chap-title, first-except); /* 章の先頭ページを除き表示 */}}h1.chapter { /* 章見出し */string-set: chap-title content();}h1.chapter[title] {string-set: chap-title attr(title); /* 属性の値を使うことも可能 */}CSS Paged Media を使いこなそう！ 9

Named pages—名前付きのページルールページの種類ごとに名前をつけてページ設定を定義。例:@page cover { /* 名前付きのページ設定（名前: "cover"）*/margin: 0; /* "cover" ページは余白無しに *//* "cover" ページは柱（ページヘッダー）無しに */@top-left { content: none; }@top-right { content: none; }}.cover {page: cover; /* pageプロパティで使用する名前付きページを指定 */}CSS Paged Media を使いこなそう！ 10

Nth Page Selector: nth()文書のN 番目のページのスタイルを定義することなどできます。構文: @page :nth(An+B)（CSS セレクタ :nth-child(An+B) のページ版のようなもの）例:@page :nth(1) {margin: 0;background-image: url(cover.png);}CSS Paged Media を使いこなそう！ 11

複数HTML文書連結の場合の @page :first と@page :nth(1) の違い複数HTML文書をまとめて１つの本（PDF、WebPub）にする場合:@page :first は全体の先頭ページだけに適用これはVivliostyle の以前からの動作仕様。現在のCSS PagedMedia 仕様には、複数のHTML文書をまとめて１つの本にする場合のことは定義されていないため、独自仕様といえる。@page :nth(1) は、各HTML文書の先頭ページに適用つまり、章ごとにファイルを分けている場合、@page :nth(1) は各章の先頭ページに適用、@page :first は全体の先頭ページだけ。CSS Paged Media を使いこなそう！ 12

名前付きページと:nth() の組み合わせの例@page :first {　/* 全体の一番最初のページのみに適用 */counter-reset: chapter;}@page chapter:nth(1) {　/* 各章ファイルの最初のページに適用 */counter-increment: chapter;}h1::before {content: "第" counter(chapter) "章";}.chapter {page: chapter;}CSS Paged Media を使いこなそう！ 13

各章のHTMLは次のようになってるとする:<body><section class="chapter"><h1>章のタイトル</h1>...</section></body>これにより、章カウンタを全体の先頭でリセット、各章の先頭でインクリメントすることができる。注意: もし複数の章を１つのHTMLファイルにしている場合は、@page chapter:nth(1) は各章ではなくて１つのHTMLファイルの先頭ページだけに適用される。CSS Paged Media を使いこなそう！ 14

ページメディア用CSS仕様サポート状況まとめ15

CSS Paged Media Level 3https://www.w3.org/TR/css-page-3/4 Page Selectors and the Page Context4.1 The @page Rule ✅4.2 Page selectors4.2.1 Spread pseudo-classes: :left, :right ✅4.2.2 First-page pseudo-class: :first ✅4.2.3 Blank-page pseudo-class: :blank ❌5 Page-Margin Boxes ✅6 Page Properties6.1 Page-based counters ✅ページメディア用CSS仕様サポート状況まとめ 16

7 Page Size7.1 Page size: the size property ✅7.2 Crop and Registration Marks: the marks property ✅7.3 Bleed Area: the bleed property ✅8 Page Breaks8.1 Using named pages: page ✅🌟v2.7 (2021-04-07)ページメディア用CSS仕様サポート状況まとめ 17

CSS Generated Content for Paged Media(GCPM)https://www.w3.org/TR/css-gcpm-3/1 Running headers and footers1.1 Named strings ✅🌟v2.4 (2020-12-28)1.2 Running elements ❌2 Footnotes ✅3 Selecting Pages3.1 Page Selectors: :nth(An+B) ✅🌟v2.5 (2021-02-26)3.2 Page groups: :nth(An+B of pagegroup) ❌ページメディア用CSS仕様サポート状況まとめ 18

4 Leaders: leader() ❌5 Cross-references5.1 The target-counter() function ✅5.2 The target-counters() function ✅5.3 target-text ❌6 Bookmarksページメディア用CSS仕様サポート状況まとめ 19

CSS Fragmentation Level 3https://www.w3.org/TR/css-break-3/3.1 Breaks Between Boxes: the break-before and break-afterproperties ✅3.2 Breaks Within Boxes: the break-inside property ✅3.3 Breaks Between Lines: orphans, widows ✅5.4 Fragmented Borders and Backgrounds: the box-decoration-break property ✅ページメディア用CSS仕様サポート状況まとめ 20

CSS Page Floatshttps://www.w3.org/TR/css-page-floats-3/3.1 The float-reference property ✅3.2 The float property ✅4 The clear property ✅ページメディア用CSS仕様サポート状況まとめ 21

より詳しくはVivliostyle ドキュメント→「サポートするCSS 機能」へ日本語ドキュメントページ: https://vivliostyle.org/ja/documents/サポートするCSS 機能:https://docs.vivliostyle.org/#/ja/supported-css-featuresEnglish Documents: https://vivliostyle.org/documents/Supported CSS Features:https://docs.vivliostyle.org/#/supported-css-featuresページメディア用CSS仕様サポート状況まとめ 22

Movatterモバイル変換

Change Language

Vivliostyle.js における CSS Paged Media の実装

Embed presentation

Recommended

More Related Content

What's hot

Similar to Vivliostyle.js における CSS Paged Media の実装

More from Shinyu Murakami

Vivliostyle.js における CSS Paged Media の実装