XMLアーキテクチャにDITA（Wikipediaへのリンク）というのがありまして、それをPDFにしたりHTMLにしたりする仕事をしています．今回はHTML5への変換の質問です．

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

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

    <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>

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

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

<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>

これで途中に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の値をカウンタに引き継ぐ方法がありましたらご教示ください．

以上