60569


XMLアーキテクチャにDITA（[Wikipediaへのリンク](https://ja.wikipedia.org/wiki/Darwin_Information_Typing_Architecture)）というのがありまして、それをPDFにしたりHTMLにしたりする仕事をしています．今回はHTML5への変換の質問です．

簡単に言いますと、表題のとおりolの行頭番号にfont-weight:bold;を適用したいのですがやり方がわかりません．

まずDITAには作業の手順を示すsteps/stepという要素があります．例えば次のようにオーサリングされます．

[code]

        <steps>
            <step>
                <cmd>コマンド１</cmd>
            </step>
            <step>
                <cmd>コマンド２</cmd>
                <substeps>
                    <substep>
                        <cmd>サブステップのコマンド１</cmd>
                    </substep>
                    <substep>
                        <cmd>サブステップのコマンド２</cmd>
                    </substep>
                    <substep>
                        <cmd>サブステップのコマンド３</cmd>
                    </substep>
                </substeps>
            </step>
            <stepsection>ここでstepsectionでリストが区切られます．</stepsection>
            <step>
                <cmd>コマンド３</cmd>
                <substeps>
                    <substep>
                        <cmd>サブステップのコマンド１</cmd>
                    </substep>
                    <substep>
                        <cmd>サブステップのコマンド２</cmd>
                    </substep>
                </substeps>
            </step>
            <step>
                <cmd>コマンド４</cmd>
            </step>
        </steps>
    
[/code]

これは単純に考えればHTML5のolに落とせば良いのですが、曲者にtopicsectionという要素があって、リストの間にコメントを入れられるのです．これには決して行頭番号を振ってはなりません．

従って、HTML5に変換するときはol/@startを使用して例えば以下のようになります．

[code]

    <section class="ol steps">
       <ol class="li step" start="1">
          <li class="li step">
             <span class="ph cmd">コマンド１</span>
          </li>
          <li class="li step">
             <span class="ph cmd">コマンド２</span>
             <ol class="ol substeps list-style-lower-alpha">
                <li class="li substep">
                   <span class="ph cmd">サブステップのコマンド１</span>
                </li>
                <li class="li substep">
                   <span class="ph cmd">サブステップのコマンド２</span>
                </li>
                <li class="li substep">
                   <span class="ph cmd">サブステップのコマンド３</span>
                </li>
             </ol>
          </li>
       </ol>
       <div class="li stepsection">ここでstepsectionでリストが区切られます．</div>
       <ol class="li step" start="3">
          <li class="li step">
             <span class="ph cmd">コマンド３</span>
             <ol class="ol substeps list-style-lower-alpha">
                <li class="li substep">
                   <span class="ph cmd">サブステップのコマンド１</span>
                </li>
                <li class="li substep">
                   <span class="ph cmd">サブステップのコマンド２</span>
                </li>
             </ol>
          </li>
          <li class="li step">
             <span class="ph cmd">コマンド４</span>
          </li>
       </ol>
    </section>
    
[/code]

これで途中にstepsectionが入っても手順番号を再開することができます．

さてここでお客様からの要望で、手順番号にfont-weight:bold;を適用してもらいたいとの話になりました．実現方法を考えましたが、

  * olでlist-style-type:none;を適用、およびカウンタをリセット
  * liでカウンタをインクリメントし、li::beforeでcontent:counter(カウンタ名)、およびfont-weight:bold;の適用

というようによくWebに紹介されている手法しか思いつきません．ところがこの方法だと、olでカウンタをリセットするときにol/@startの値を設定する術がないように考えられます．

PDFへの変換ならXSL-FOで何の苦も無くできるのですが、HTML5＋CSSでどうしたらよいかわからなくなってしまいました．

上記のようにol/@startの値をカウンタに引き継ぐ方法がありましたらご教示ください．

以上


CC BY-SA 4.0
2019-11-15T21:31:45.540
60568
2019-12-13T13:42:58.597
2019-11-15T21:49:29.223
9503
9503
question
css html5
olの行頭番号をboldにするには？？


stepsectionがどこで入るかにもよりますが、ネストしない（必ずsection直下にある）のであれば、start属性は無視してsectionでカウンタをリセットすればいいんじゃないでしょうか。

[code]

    section {
        counter-reset: listCounter;
    }
    section > ol > li {
        list-style-type: none;
    }
    section > ol > li::before {
        content: counter(listCounter) ".";
        counter-increment: listCounter;
        margin-right: 0.1rem;
        font-weight: bold;
    }
    
[/code]

[code]

    section {
      counter-reset: listCounter;
    }
    
    section>ol>li {
      list-style-type: none;
    }
    
    section>ol>li::before {
      content: counter(listCounter) ".";
      counter-increment: listCounter;
      margin-right: 0.1rem;
      font-weight: bold;
    }
[/code]

[code]

    <section class="ol steps">
      <ol class="li step" start="1">
        <li class="li step">
          <span class="ph cmd">コマンド１</span>
        </li>
        <li class="li step">
          <span class="ph cmd">コマンド２</span>
          <ol class="ol substeps list-style-lower-alpha">
            <li class="li substep">
              <span class="ph cmd">サブステップのコマンド１</span>
            </li>
            <li class="li substep">
              <span class="ph cmd">サブステップのコマンド２</span>
            </li>
            <li class="li substep">
              <span class="ph cmd">サブステップのコマンド３</span>
            </li>
          </ol>
        </li>
      </ol>
      <div class="li stepsection">ここでstepsectionでリストが区切られます．</div>
      <ol class="li step" start="3">
        <li class="li step">
          <span class="ph cmd">コマンド３</span>
          <ol class="ol substeps list-style-lower-alpha">
            <li class="li substep">
              <span class="ph cmd">サブステップのコマンド１</span>
            </li>
            <li class="li substep">
              <span class="ph cmd">サブステップのコマンド２</span>
            </li>
          </ol>
        </li>
        <li class="li step">
          <span class="ph cmd">コマンド４</span>
        </li>
      </ol>
    </section>
[/code]


CC BY-SA 4.0
2019-11-15T23:10:17.237
60569
2019-12-13T13:42:58.597
2019-12-13T13:42:58.597
32986
62
60568
answer