Incorrect section number for h3 or lower #138

spring-raining · 2025-01-08T01:42:25Z

From https://vivliostyle.slack.com/archives/CJAP6GBKQ/p1736246169734479

見出しに自動的に番号が振られる際, 添付画像のようにH3以下の番号が正常に振られていない状態となっています。本来なら2.1 / 2.1.1 などとなるはずです。
この不具合はテーマのバージョンが2.0.0の時に発生し, 以前の1.0.1では見られませんでした。
不具合の原因となっている部分はthema-base/css/partial/section.cssの--vs-section--root-counter-resetが定義されている下の部分(22行目～29行目)だと思われます。その部分のコードを全部消す, またはvs-counter-sec-h1, vs-counter-sec-h2...の部分だけを消すと番号は正常に振られるようになります。
以下のプルリクのpackages/@vivliostyle/theme-base/css/partial/section.cssの変更の部分が該当部分です。
https://github.com/vivliostyle/themes/commit/d3c9c5bebe02e2b8b67c608b98da13e4ea505c5c#diff-6b70c01e69010cbdc012dbea[…]5baaa995eb8992e33509e0d56c6R19
コードの全体像が掴めていないのでそこが真の原因かどうかは分かりませんが。なおthema-academicを利用したときに発生することは確認済みですが、他のテーマは未確認です。

MurakamiShinyu · 2025-01-13T12:54:05Z

調べました。CSS変数を評価したあとのスタイルシートの関連部分は次のようになってました：

body {
  counter-reset: vs-counter-sec-h2 vs-counter-sec-h3 vs-counter-sec-h4;
}
section:has(> h1:first-child) {
  counter-increment: vs-counter-sec-h1;
}
section:has(> h2:first-child) {
  counter-increment: vs-counter-sec-h2;
}
section > h2:first-child::before {
  content: counter(vs-counter-sec-h2);
}
section:has(> h3:first-child) {
  counter-increment: vs-counter-sec-h3;
}
section > h3:first-child::before {
  content: counter(vs-counter-sec-h2) "." counter(vs-counter-sec-h3);
}
section:has(> h4:first-child) {
  counter-increment: vs-counter-sec-h4;
}
section > h4:first-child::before {
  content: counter(vs-counter-sec-h2) "." counter(vs-counter-sec-h3) "." counter(vs-counter-sec-h4);
}

問題はカウンタ vs-counter-sec-h2、vs-counter-sec-h3、vs-counter-sec-h4 のリセットが body 要素でのみ行われているので、次のように H4→H3→H4 のように見出しが続いたときに H3 のところで vs-counter-sec-h4 カウンタがリセットされず、前のH4での値に1を足したものになってしまう（1.1.1 → 1.2 → 1.2.2 となる）ということです。

<body>
  …
  <h2>H2タイトル</h2>
  <section>
    <h3>H3タイトル</h3>
    <section>
      <h4>H4タイトル</h4>
    </section>
  </section>
  <section>
    <h3>H3タイトル</h3>
    <section>
      <h4>H4タイトル</h4>
    </section>
  </section>

#133 で追加された次の部分

themes/packages/@vivliostyle/theme-base/css/partial/section.css

Lines 22 to 29 in 8654d98

    
           --vs-section--root-counter-reset: vs-counter-sections 
        
             var(--vs-section--root-counter-sections,) vs-counter-sec-h1 
        
             var(--vs-section--root-counter-sec-h1,) vs-counter-sec-h2 
        
             var(--vs-section--root-counter-sec-h2,) vs-counter-sec-h3 
        
             var(--vs-section--root-counter-sec-h3,) vs-counter-sec-h4 
        
             var(--vs-section--root-counter-sec-h4,) vs-counter-sec-h5 
        
             var(--vs-section--root-counter-sec-h5,) vs-counter-sec-h6 
        
             var(--vs-section--root-counter-sec-h6,);

がなかったときは問題が起きなかった理由は、カウンタ vs-counter-sec-h2、vs-counter-sec-h3、vs-counter-sec-h4… をリセットする counter-reset がどこにもなかったので、それらのカウンタが counter-increment されるところでカウンタが生成されていたために、親のsectionが終わったところでそのカウンタのスコープが終わり、H4→H3→H4 という並びの場合、2番目のH4では前のH4のときの vs-counter-sec-h4 は引き継がれないで新しいカウンタになるためです。

修正案： --vs-section--root-counter-reset に含めるのは vs-counter-sections と vs-counter-sec-h1 だけにするとよいのではないでしょうか？

  --vs-section--root-counter-reset: vs-counter-sections
    var(--vs-section--root-counter-sections,) vs-counter-sec-h1
    var(--vs-section--root-counter-sec-h1,);

spring-raining added the bug Something isn't working label Jan 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incorrect section number for h3 or lower #138

Incorrect section number for h3 or lower #138

spring-raining commented Jan 8, 2025

MurakamiShinyu commented Jan 13, 2025

Incorrect section number for h3 or lower #138

Incorrect section number for h3 or lower #138

Comments

spring-raining commented Jan 8, 2025

MurakamiShinyu commented Jan 13, 2025