Twitter @takagi1＋TAKAGI-1のはてなブックマーク＋TAKAGI-1 たんぶら
<<2013/01/30 ＜2013/02/26 || 2013/02/28＞ 2013/03/27>>
2013/02/27
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。
IMAGE
説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。
たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。
三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。
「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。
たとえば、このブログのfont-familyは以下のようになっています。
font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;なので、一番最初に設定しているフォント「Verdana」の表示に依存してしまいます。「Verdana」では三点リーダを下に表示します。
余談ですが、このブログはMovable Typeを使っているので、三点リーダはピリオドに変換されるという、またちょっと事情が違います。
が、このエントリーで表示されている（下向きの）三点リーダは細工をして、font-familyに依存するようにしています。
Firebugのfont-familyの設定値と使って、真ん中に表示されるフォントと下に表示されるフォントをざっと分けてみました。
上に挙げていない和文フォントは、おそらくすべて真ん中に表示されると思います。よって和文フォントを先に指定すれば解決します。
ただし「いまさら聞けないCSS font-familyのまとめ」で記したとおり、半角英数文字に欧文フォントのフォントファミリーを適用したい場合、先頭に記述するフォントを欧文フォントにする必要があります。
なので、半角英数文字のフォントにこだわっている場合、欧文フォントを先に設定しなければならないのが悩ましいところです。
そもそも三点リーダは全角文字なのに欧文フォントに反応してしまう理由が不明ですが、他力本願でどなたかつぶやいてくれたらそれを後で引用しようかと思います。
ひとつは「font-family」の設定を見直して、欧文フォントを変更するか、前述のとおり和文フォントを先に記述する方法です。
ただし、和文フォントを先に記述すると半角英数文字に（後に設定した）欧文フォントが適用されなくなります。
もうひとつの対処は、「font-family」の設定はそのままにして、三点リーダーのみspan要素などで括って、個別に異なるフォントを指定する方法です。
[ Posted Wed, 27 Feb 2013 06:40:49 ]