読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

直感的に素直な感じでカスタムなリストマーカーを作りたい

nehan.js programming

例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforecontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。

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>

縦書きと横書きで、それぞれ次のように表示されます。

f:id:convertical:20160313220725p:plainf:id:convertical:20160313220734p:plain