例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::before
にcontent
を設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。
ol li:nth-child(1)::before{ content:'\2460'; /* CIRCLED DIGIT ONE */ } ol li:nth-child(2)::before{ content:'\2461'; } /* (3〜9は省略) */ ol li:nth-child(10)::before{ content:'\2469'; } ol li::before{ position:absolute; margin-left:-2.5rem; }
しかし、このやり方ではnth-child
の数字別にcontent
を宣言することになるので、面倒だと思うのです。
もしかしたら
counter
みたいなcss内の関数を使って色々できるのかもしれませんが…
nehan.js
を使った場合は、list-style-type
に関数値を設定することで、動的にunicodeを指定するスタイルがシンプルに記述できます。
Nehan.setStyle(".lst-circled-digit > li", { listStyleType:function(ctx){ var index = ctx.getChildIndex(); return String.fromCharCode(0x2460 + index); } });
nehan.jsでは、list-style-typeが標準で定義された識別子ではない場合、css値がそのままマーカーとして使われるようになっています。
あるいは、::marker
というli
直下に差し込まれるpseudo-elementのcontentを動的に設定するやり方もあります。こちらのほうがわかりやすいかもしれませんね。
ただし
::marker
は公式のcssではまだdraftの扱いです。
Nehan.setStyle(".lst-circled-digit > li::marker", { content:function(ctx){ var index = ctx.getParentStyle().getChildIndex(); return String.fromCharCode(0x2460 + index); } });
こうした上で、次のようなHTMLを組版させると
<ol class="lst-circled-digit"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol>
縦書きと横書きで、それぞれ次のように表示されます。