書籍目次用 counter-increment

「Yahoo! 知恵袋」で（リアル）書籍の目次用として次のような仕様で目次を作れないかという質問があった。

1. ♘♘♘♘♘♘♘♘♘♘1
   1. ◇◇◇◇◇◇◇2
   2. ●●●●●●●●●●10
2. ✤✤✤✤✤✤✤✤15
   1. □□□□□□□□□16
   2. ○○○○○○○25

• 章や節の番号、題、開始ページ番号を付ける。
• 開始頁は右端で右揃え。
• 節は数文字分インデント。
• 章や節の右にページ部分の前まで点線を付ける。
• 点線の長さは不定。

質問者さんは章や節の番号を文字で入力することを考えていたが、私は counter-increment プロパティを利用することを思いついた。番号を漢数字にするには何かやり方があるはずなので、ネット検索。

難しかったのが、長さ不定の点線。ネット検索したらここはグラデーションを付ける linear-gradient プロパティの兄弟 repeating-linear-gradient と flex-grow: 1 で実現できるとわかった。そこまでできれば flexbox の justify-content: space-between でなんとかなる。

counter-increment プロパティの利用

ol/li 要素での番号付リストの場合、text-align: center でセンタリングすると、マーカーとの間に異様な隙間ができてしまう。ul/li 要素での番号なしリストでも同じである。

1. テキストテキストテキスト
2. テキストテキストテキストテキストテキスト

counter-increment プロパティを使うとその問題を解決できる。数字の前や後ろに文字を付加することも出来る。

ポイントは、

1. 準備として li 要素のマーカーを消し、幅（width）を fit-content にしておく。
2. counter-increment と counter 関数の値に共通の適当な名前を付ける。ここでは「eel」にしたが、全角文字でも構わない。
3. 疑似要素「::before」を利用し、content プロパティの値である counter 関数の前後にダブルクォテーションで括って付加したい文字列を指定する。

複合 counter-increment プロパティ

目次での利用を想定して counter-increment プロパティを複合して使えないかと考えた。ネットを検索して二重利用は見つけたが、外側の ol 要素の値を継承して１番目の値とする用法は見つけられなかった。そこでごちゃごちゃやっていたら......成功してしまった(^^;;;

ポイントは、

1. 外側のol 要素に対しては、counter-increment プロパティと counter 関数、::before 擬似要素で連番を作成する（「counter-increment プロパティの利用」参照）。
2. 内側の ol 要素に対して counter-increment プロパティを２つ定義、１つ目の値を外側のと同値＋「0」（数字のゼロ）にする。
3. 内側 ol 要素の li::before に対して、「-」を挟んで counter 関数を２つ使用する。

• 結果の表示に関しては、スマホでの表示スペースの都合で counter-increment に関係ないレイアウト系 CSS を追加した。