リスト番号にローマ数字や括弧を

数学的な文書をHTMLやEPUB3に取り込む際に，順序リストのCSS設定をどうすべきかをいつも考えてしまいます．例えば，次のような順序リストの入れ子を考えます．

<p>次はいずれも同値である．</p>

<ol class="propositions">
  <li>空でない集合で構成された任意の集合族に対して，そららの直積集合は空ではない．</li>
  <li>帰納的な順序集合には極大元が存在する．ここで，順序集合Aが帰納的とは，その任意の空でない全順序部分集合の上限がAに存在するときにいう．</li>
  <li>任意の集合は整列集合にできる．ここで，整列集合とは
    <ol class="axiom-well-ordered-set">
      <li>全順序集合である</li>
      <li>任意の空でない部分集合は最小元をもつ</li>
    </ol>
    を満たす順序集合のことである．
  </li>
</ol>

このHTMLで次のようなレンダリングを実現したいとします．

ポイントは

リスト番号にローマ数字（など）を用いたい
リスト番号に括弧などの装飾をしたい
その際，i)，ii)などを右に寄せたい
li要素の内容が改行されても，リスト番号の下に文章がこないようにする．
順序リストの入れ子を想定

このために次のようなcssを組みました．

/*ol要素の共通設定*/  
ol.propositions, ol.propositions ol{
  padding-left: 1em; /*入れ子が起こるたびにインデント．0でもよいと思う*/
}

ol.propositions li{
  list-style-type:none; /*標準の番号を消す*/
  margin-left: 3em;     /*下のmargin-leftの符号違いを設定*/
}

ol.propositions li:before{
  display: inline-block; 
  text-align: right; /*i), ii)などを右寄せさせるため*/
  width: 2em;        /*リスト番号の幅*/
  margin-right: 1em; /*リスト番号と文章の間隔*/
  margin-left: -3em; /*上の2つと足して0になるように設定*/
}

/*カウンターの設定（olの階層ごとに設定）*/
ol.propositions>li{
  counter-increment: level1; /*もう少しセマンティックなネーミングはないか……*/
}

ol.propositions>li:before{
  content: counter(level1, upper-roman)"."; /*大文字のローマ数字*/
  font-weight: bold;
}

ol.propositions>li>ol>li{
  counter-increment: level2; /*同上*/
}

ol.propositions>li>ol>li:before{
  content: counter(level2, lower-roman)")"; /*小文字のローマ数字*/
}

意外と知られていない（？）のが，counter関数の第2引数に，ローマ数字にするかなどのlist-style-typeが指定できるということです．ここを省略するとアラビア数字になります．list-style-typeにどういうものがあるかは，list-style-type -CSS | MDNなどをご覧ください．

各要素がどのような配置になっているかは，次のスクリーンショットでなんとなくイメージしてください．

ここで個別にリストの番号を変更したい場合は，class属性を付加して設定します．例えば，ol.axiom-well-ordered-setに次のような設定をします．

/*特定のリスト番号を変えたい時*/
ol.axiom-well-ordered-set>li{
  margin-left:5em;   /*下のmargin-leftの符号違いを設定*/
}
ol.axiom-well-ordered-set>li:before{
  content: "WO"counter(level2)"."!important; /*ここだけ!importantが必要？*/
  font-weight: bold;
  width: 4em;         /*リスト番号の幅を変更する場合*/
  margin-right: 1em;  /*リスト番号と文章の間隔*/
  margin-left: -5em;  /*上の2つと足して0になるように設定*/
}

すると次のようなレンダリングになります．