vivliostyle/themes

セクション番号を "1.1.1" の形式にするCSSの手法がChromeで使えなくなった

Opened this issue · 0 comments

Vivliostyle Base Theme で、セクション番号は "1.1.1" の形式になるように設定されています:

--vs-section--marker-content: counters(
vs-counter-sections,
var(--vs-section--counter-delimiter),
var(--vs-section--counter-style)
);

section:has(> h1:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h1;
break-after: var(--vs-section--h1-break-after);
break-before: var(--vs-section--h1-break-before);
}
section:has(> h2:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h2;
break-after: var(--vs-section--h2-break-after);
break-before: var(--vs-section--h2-break-before);
}
section:has(> h3:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h3;
break-after: var(--vs-section--h3-break-after);
break-before: var(--vs-section--h3-break-before);
}
section:has(> h4:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h4;
break-after: var(--vs-section--h4-break-after);
break-before: var(--vs-section--h4-break-before);
}
section:has(> h5:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h5;
break-after: var(--vs-section--h5-break-after);
break-before: var(--vs-section--h5-break-before);
}
section:has(> h6:first-child) {
counter-increment: vs-counter-sections vs-counter-sec-h6;
break-after: var(--vs-section--h6-break-after);
break-before: var(--vs-section--h6-break-before);
}
section > :is(h1, h2, h3, h4, h5, h6):first-child + * {
counter-reset: vs-counter-sections;
}

このテーマを使ったHTML文書をVivliostyleを使わないで普通にChrome(126以降)で閲覧したとき、セクション番号が正しく表示されない不具合があります。FirefoxとSafariでは問題ありません。また、Chrome 125までは問題ありませんでした。

例:

https://raw.githack.com/MurakamiShinyu/wikipedia-sample/main/%E7%A5%9E%E8%A9%B1.html

これをChromeとSafariで開いたとき、セクション番号が正しく "1.4.3" のように表示されません。
ChromeとSafariの表示を比べたスクリーンショット:
Screenshot 2024-08-26 22 55 34

CSS仕様が変更され、そのあと変更の取り消しが決まったのにChromeが変更を実装してしまった問題

私は最初Chrome (Chromium)のバグだと考えてChromium Issue Trackerに報告しました:

しかし、そのあと追加のコメントに書いたとおり、これはCSSのドラフト仕様の次の変更を反映したものであるということがわかりました:

しかしこの変更は問題があるということで取り消されることになりました:

w3c/csswg-drafts#5477 (comment)

  • RESOLVED: Revert the previous resolution and the associated edits

それなのに、Chromiumはこの変更を実装してしまい、この問題が発生しています。

詳しくは、上記のChromium Issue TrackerのIssueのコメントや、上記CSS仕様のIssueのコメントをご覧ください。