| lang | title | author |
|---|---|---|
ja |
Vivliostyle.jsにおけるWeb標準、CSSサポートの大改善 |
Shinyu Murakami |
2022-11-20
Shinyu Murakami
Vivliostyle Foundation
- CSS組版のメリット
- Webの標準のCSSの知識があれば、自分でスタイルシートを作れること。
- 標準のCSSを学ぶための材料はたくさんある。
- MDNサイトのCSS入門などお薦め。
- Vivliostyle.jsは、標準のWebブラウザ上で動く。
- CSSでのレイアウトの機能の多くはブラウザでサポートされているCSSの機能を利用。
- それだけでは足りないCSSの組版機能を追加実装
- この方式だから基本的に
Vivliostyle.jsのCSS機能 ⊃ ブラウザのCSS機能
（Vivliostyleのほうがスーパーセット）- しかし、これまで必ずしもそうなってなかった…
- Vivliostyle.jsでは、CSSの機能を拡張するため、CSSの構文解析やカスケーディングの処理、CSSプロパティやその値の指定が正しいかどうかを判定する処理などを自前でやってる。
- そのベースになってるのはPeter Sorotokin氏によるEPUB Adaptive Layout実装のCSS処理。
- Vivliostyle.jsではそのしくみを引き継いで、CSS組版に必要なCSSの機能を拡充させてきた。
- しかし、最新のWeb標準のCSS機能をすぐに反映させられず、ギャップが生じてた。➡︎ その解消の取り組みへ
- そのベースになってるのはPeter Sorotokin氏によるEPUB Adaptive Layout実装のCSS処理。
- CSSの処理を見直して、ブラウザで使えるCSSプロパティと値は基本的にすべて使えるように改良。
- Vivliostyle.jsの中で定義されていないCSSプロパティや値でも、ブラウザでサポートされているなら有効にした。（以前は無効にしてた）
- 今後は、ブラウザでサポートされているCSSプロパティが機能しなかったらそれはバグなのでバグ報告ください！
CSS Grid Layout の例：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
} ….box1 { grid-column: 1 / 4; }
.box2 { grid-row: 2 / 4; }
.box3
.box4
.box5
- CSS変数（カスタムプロパティ）は、スタイルシートをカスタマイズしやすくするのにとても便利。
- 任意のスタイルルールの中で使用できて、また、ページを定義する
@page {...}の中でも使用可能。
:root {
--page-width: 148mm;
--page-height: 210mm;
}
@page {
size: var(--page-width) var(--page-height);
…
}- とくに:has() 擬似クラスは画期的に便利。
- 子要素や後につづく要素が何であるかによる選択が可能に。
:has() 擬似クラスの使用例：
section:has(section) {
/* 内側にもsectionが存在するsectionのスタイル */
}
h1:has(+ p) {
/* 段落pがあとに続く見出しh1のスタイル */
}最新のブラウザで使えるのにVivliostyleでサポートできてないCSSの機能はまだあります。以下のものなど：
::marker箇条書きのマークを指定する擬似要素 (#723)@counter-styleカウンタースタイルを定義 (#731)@layerカスケードレイヤー (#977)@containerコンテナクエリー (#1046)
- CSS Nesting (#1032)
- CSSルールをネストできる（SCSSと似てる）
- lh and rlh units (#1035)
lhは行高(line-height)を基準にした長さの単位。rlhはルート要素のline-heightが基準。
p { /* 段落間を1行分あける */
margin-block: 1lh;
}
header { /* 見出しブロックを3行どりに */
block-size: 3rlh;
}Vivliostyle.jsでは、ブラウザでは未サポートのページメディア用CSS仕様など組版に必要なCSS機能の実装を進めてきた。以下は主なもの：
- CSS Text Level 4
- hanging-punctuation: 行末の句読点のぶら下げなど
- text-spacing: 和欧文間スペースや約物の詰めなど
- CSS Paged Media Level 3
- ページメディア用CSSの基本仕様
- CSS Generated Content for Paged Media
- 名前付き文字列（Named strings）：本文中の見出しなどの文字列をページヘッダーに柱として表示するのに使用
- 脚注（Footnotes）
- ページセレクター
:nth(An+B)：n番目のページのスタイル target-counter()：クロスリファレンスや目次・索引などの参照先ページ番号を生成するのに使用
- CSS Fragmentation Level 3
- 改ページや改ページ禁止の制御など
- CSS Page Floats
- ページの上部や下部に図版などをフロート配置
以下はページメディア用CSS機能でまだできてない主なもの：
- margin-breakプロパティ (#734)
- ブロックのマージンがページの先頭になったときに、そのマージンを保持する(keep)か破棄(discard)するか指定。
- デフォルトの
margin-break: autoは、なりゆき改ページでページの先頭になったブロックのマージンを破棄 margin-break: keepはマージンを保持するmargin-break: discardはマージンを破棄（0にする）
- デフォルトの
- ブロックのマージンがページの先頭になったときに、そのマージンを保持する(keep)か破棄(discard)するか指定。
- Running Elements (#424)
- HTML文書内の要素をページマージン領域に柱（欄外見出し）として表示できるようにする機能
- 単純な文字列だけなら名前付き文字列（Named strings）で実現できるが、より複雑な要素を柱に表示するのに必要。
@footnote(footnote area) (#1045)- 脚注エリアのスタイルを指定
leader()function (#1027)- 目次の項目とページ番号をつなぐ点線 ...... の出力に便利
- 段組の指定がルート要素またはbody要素以外にあるとき、段組のページ分割処理がうまくいかない (#579)
- テーブル内で脚注が機能しない (#438)
- ページフロートの改良 (#543)
- Mac以外の環境でハイフネーションが無効になる (#569)
- Vivliostyle CLIをWindows、LinuxあるいはDockerで使う場合（Chromiumの問題）。
print-css.rocksというサイトで、いくつかのCSS組版ツールをいろいろテストしての比較一覧が公開されている：
- https://print-css.rocks/lessons
- https://beta.print-css.rocks/lessons ←2022秋版ベータ公開。この1年くらいのVivliostyleの進化が反映されている。
- ほかと比較してのVivliostyleの強みと弱みが分かる。
- ここにあるテストサンプルはCSSを学ぶのにも参考になる。