Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MurakamiShinyu opened this issue Aug 26, 2024 · 0 comments

Comments

@MurakamiShinyu
Copy link
Member

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のコメントをご覧ください。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant