丸数字をhtml上に表示したい

Question

質問があります。
結論から言うと、

丸数字をhtml上に表示したいと思っています。どういった方法が1番良いでしょうか？

状況としては、
丸数字(①②③)をボックスの右上に配置して表示します。そのボックスは動的に増えます。限度20個くらい。

その丸数字を作成するのに思いついた方法は以下です。

・CSSで作成する
・丸数字の画像をダウンロードする
・キャンバスで作成する？

一度CSSで作ってみたのですが、
質が低く微妙でした。

質が低くなく、動的に増える丸数字に対応できる何かいい方法や参考サイト、あるいはそういったプラグインがあれば教えていただきたいです。

Answer 1

String.fromCharCode( 5 + "①".charCodeAt(0) - 1)

これで"⑤"が得られます。そういうことではなくて？

Comments

[k499778]

yudaさん
ありがとうございます。
このやり方だとさらにjsでfor文を使って動的に丸数字を作ることもできるので
BAにさせていただきました。
String.fromCharCodeのような文字コードを変換するメソッドも知れてよかったです。
感謝しています。

[yuba]

「たかだか20」とのことだったのでこんなコードになっています。21以上が渡されることがあるなら配列から引くようにします。

[k499778]

yubaさん追加回答ありがとうございます。
２１は文字コードが連続していないため、このメソッドでは取得が難しく、
配列に２１以降の丸数字を格納し、そこから引く方がいいということですね。

勉強になります。ありがとうございます。

Answer 2

他の方がおっしゃるように unicode なら１～５０まで用意されてますので、数値範囲が足りるならそれを使うのがキレイと思います

最大数が50を超えるなら、白抜きの丸で背景画像を用意してHTML上で部品化し、javascriptで動的に数字をセットして配置する方法ならやったことあります

あとは、CSS3 で作った人がいたのでマネて白抜き数字をやってみました

.sample {
position: relative;
color: #000;
}

.sample:before {
content: "";
display: block;
position: absolute;
top: -2px;
left: -4px; 
width: 22px;
height: 22px;
border-radius: 20px;
background-color: black;
z-index: -2;
}

.sample:after {
content: "";
display: block;
position: absolute;
top: -1px;
left: -3px; 
width: 20px;
height: 20px;
border-radius: 20px;
background-color: white;
z-index: -1;
}

<p class="sample">99</p>

見た目は・・・やはり微妙？
１桁の場合、２桁の場合、３桁の場合で調整したパターンが必要ですし・・・

Comments

[k499778]

takitoさん
返答ありがとうございます。
私も最初はバッチを作るようなイメージしか持っていなかったのですが、
単純に文字コードを使ってボックスに番号をつけても特に問題はないと気付きました。

私もまさにそのサイトを試しました。
文字の位置がずれたり、丸におさまりきらなかったりして、
もう少し効率よく、質のいい丸数字の作り方を探していました。

白抜きの丸の背景画像に数字をセットするといった発想も知りたかったので
とても参考になりました。

ありがとうございます。

Answer 3

丸数字というから文字コードの話かと思ったら、バッジの話ですね？

CSSで作るのが一番ラクだと思います。
質が低いと感じたのはフォントの問題か、古いブラウザのせいか。

試したCSSコードとキャプチャでもあれば、どこが満足いかなかったのかわかると思います。

Comments

[退会済みユーザー]

他の人がみんな文字コードの話してるところを見ると、本当に文字コードの動的生成の話なのかな…

[k499778]

luckerさん
返答ありがとうございます。
ちなみにこのサイトです。takitoさんの所でも話題になっていますが。
http://ameblo.jp/m-sm-r/entry-11578544446.html

最初はバッジを作るようなイメージでした。

ただ文字コードを使ってボックスの右上に配置するような形でも特に問題ないと気づいたり、それをjsで動的に生成するようなメソッドも知れたりして、
今はそっちで作ってみようと思います。
もしそれが不採用だった時はCSSなどを駆使してバッジを作ってみます。

貴重な意見ありがとうございました。

Answer 4

Unicodeだと①〜㊿まではあります。文字コードをUTF-8にすれば、最新のOSにプリインストールされたフォントで問題ないでしょう。ただ、古い環境ではフォントに㊿等は含まれていない可能性があります。そのような古い環境にも対応するのであれば、○数字だけの外部フォントを用意するのがいいかと思います。

なお、Unicode上のマッピングは連続では無いので、["①", "②", ... , "㊿"]みたいな配列は用意しておく必要はあると思います。

Comments

[k499778]

raccyさん
返答ありがとうございます。
おっしゃる通りですね。
「○数字だけの外部フォントを用意する」や「配列を用意しておく」のようなよくやる発想を知りたかったので貴重な意見を聞けてよかったです。

感謝しています。