言語別のCSS変数設定は `:lang(ja) { … }` は `:root:lang(ja) { … }` のほうがよくないか

Open MurakamiShinyu opened this issue 1 year ago • 1 comments

:root { … } で定義したCSS変数に対して、言語別のCSS変数の値が :lang(ja) { … } のようなルールで定義されています。

例えば、Vivliostyle Base Themeの次のところ：

https://github.com/vivliostyle/themes/blob/ebf926f25ccec72fc01bf7f27cad6dcac4af9273/packages/%40vivliostyle/theme-base/css/partial/section.css#L24-L32

このほか、以下の箇所も同様：

https://github.com/vivliostyle/themes/blob/ebf926f25ccec72fc01bf7f27cad6dcac4af9273/packages/%40vivliostyle/theme-base/css/partial/crossref.css#L37

https://github.com/vivliostyle/themes/blob/ebf926f25ccec72fc01bf7f27cad6dcac4af9273/packages/%40vivliostyle/theme-academic/theme.css#L76

https://github.com/vivliostyle/themes/blob/ebf926f25ccec72fc01bf7f27cad6dcac4af9273/packages/%40vivliostyle/theme-bunko/theme.css#L64

これらの :lang(ja) { … } は :root:lang(ja) { … } に修正した方がよいのではないでしょうか？　以下の理由です。

HTML文書で言語の指定はルート要素で <html lang="ja"> のように行うのが一般的であり、言語別のCSS変数設定はルート要素に対して行うだけで通常は問題ない。
:lang(ja) { … } は lang 属性が指定された要素だけではなく、その子孫のすべての要素に適用されるので、次の問題がある
- 特定の要素内だけスタイルを変えるためにその要素でCSS変数に別の値を指定したとき、その要素の子孫の要素では :lang(ja) { … } で指定した値が適用されてしまうので、意図しないスタイルになることがある。例：
```
:root {
  --vs-section--counter-style: decimal;
}
:lang(ja) {
  --vs-section--counter-style: cjk-ideographic;
}
.intro {
  --vs-section--counter-style: katakana;
}
```
```
<html lang="ja">
  ...
  <section class="intro">
    <h2>はじめに</h2>
    ...
  </section>
</html>
```
  この場合、<section class="intro"> 内の見出し <h2> で、変数 --vs-section--counter-style の値は .intro { … } で指定された katakana ではなく :lang(ja) { … } で指定された cjk-ideographic になる。
- ブラウザのDevToolsでVivliostyle Viewerの組版結果の要素に適用されたスタイルを調査するとき、すべての要素に同じCSS変数指定が表示されるため、見づらい。
  
  現状のThemeで :lang(ja) { … } が使われているときのDevToolsの表示例：
  
  :root:lang(ja) { … } に修正した場合のDevToolsの表示例：

もしも、ルート要素だけでなく、文書の途中での lang 属性での言語指定にも対応する必要があるのならば :lang(ja) { … } ではなくて [lang|="ja"] { … } のような属性セレクタを使うのがよいと思います。

Aug 26 '24 08:08 MurakamiShinyu

確かに :lang(ja) よりも :root:lang(ja) によるセレクタのほうが良さそうです。

もしも、ルート要素だけでなく、文書の途中での lang 属性での言語指定にも対応する必要があるのならば :lang(ja) { … } ではなくて [lang|="ja"] { … } のような属性セレクタを使うのがよいと思います。

このような意図はありませんでした。ただ、文章内で lang 属性を指定するようなケースは少ないと思うので、Vivliostyle themesとしてはそこまではサポートせず :root:lang(ja) の指定が良いかと思います。

Sep 07 '24 11:09 spring-raining