HTML
CSS
数学

入れ子を想定としてOL要素のリスト番号にローマ数字や括弧などを用いる

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

数学的な文書を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で次のようなレンダリングを実現したいとします.

スクリーンショット 2017-07-16 23.12.09.png

ポイントは

  • リスト番号にローマ数字(など)を用いたい
  • リスト番号に括弧などの装飾をしたい
  • その際,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などをご覧ください.

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

スクリーンショット 2017-07-16 23.12.17.png

ここで個別にリストの番号を変更したい場合は,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になるように設定*/
}

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

スクリーンショット 2017-07-16 22.59.08.png