Web標準CSSサポートの大改善の取り組み

CSS組版ならWeb標準CSSは使えて当然

CSS組版のメリット
- Webの標準のCSSの知識があれば、自分でスタイルシートを作れること。
標準のCSSを学ぶための材料はたくさんある。
- MDNサイトのCSS入門などお薦め。

Vivliostyle.jsはブラウザのCSS機能を拡張

Vivliostyle.jsは、標準のWebブラウザ上で動く。
CSSでのレイアウトの機能の多くはブラウザでサポートされているCSSの機能を利用。
- それだけでは足りないCSSの組版機能を追加実装
- この方式だから基本的に
  Vivliostyle.jsのCSS機能 ⊃ ブラウザのCSS機能
  （Vivliostyleのほうがスーパーセット）
  - しかし、これまで必ずしもそうなってなかった…

ブラウザで使えるCSSプロパティと値は基本的にすべて利用可能に (v2.17~)

CSSの処理を見直して、ブラウザで使えるCSSプロパティと値は基本的にすべて使えるように改良。
- Vivliostyle.jsの中で定義されていないCSSプロパティや値でも、ブラウザでサポートされているなら有効にした。（以前は無効にしてた）
- 今後は、ブラウザでサポートされているCSSプロパティが機能しなかったらそれはバグなのでバグ報告ください！

これでCSSグリッドレイアウトが使える

.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変数をサポート (v2.17~)

CSS変数（カスタムプロパティ）は、スタイルシートをカスタマイズしやすくするのにとても便利。
任意のスタイルルールの中で使用できて、また、ページを定義する @page {...} の中でも使用可能。

:root {
  --page-width: 148mm;
  --page-height: 210mm;
}
@page {
  size: var(--page-width) var(--page-height);
  …
}

:has()、:is()、:not()、:where() 擬似クラスをフルサポート (v2.19~)

とくに:has() 擬似クラスは画期的に便利。
- 子要素や後につづく要素が何であるかによる選択が可能に。

:has() 擬似クラスの使用例：

section:has(section) {
  /* 内側にもsectionが存在するsectionのスタイル */
}
h1:has(+ p) {
  /* 段落pがあとに続く見出しh1のスタイル */
}

まだ残っているCSS標準サポートの課題

最新のブラウザで使えるのにVivliostyleでサポートできてないCSSの機能はまだあります。以下のものなど：

もうすぐ標準になる最新CSS仕様対応も

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;
}

組版に役に立つCSS機能の追加実装

これまで実装してきたCSS組版機能

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組版機能と改善課題

以下はページメディア用CSS機能でまだできてない主なもの：

margin-breakプロパティ　(#734)
- ブロックのマージンがページの先頭になったときに、そのマージンを保持する(keep)か破棄(discard)するか指定。
  - デフォルトの margin-break: auto は、なりゆき改ページでページの先頭になったブロックのマージンを破棄
  - margin-break: keep はマージンを保持する
  - margin-break: discard はマージンを破棄（0にする）
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の問題）。

Vivliostyle.jsにおけるWeb標準、CSSサポートの大改善

目次