TopCSS > 2013年2月
2013年2月27日

三点リーダが真ん中に表示されない理由

February 27,2013 1:23 AM
Tag:[]
Permalink

三点リーダ「」が「…」という風に真ん中に表示されない問題について調べてみました。

三点リーダ

1.三点リーダとは

説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「」です。

2.問題点

たとえばブログを書いているときに、記事編集画面のテキストエリアでは「」と表示されているのに、公開したページでは「…」となることがあります。

3.原因

三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。

「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。

たとえば、このブログのfont-familyは以下のようになっています。

font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","MS Pゴシック",sans-serif;

なので、一番最初に設定しているフォント「Verdana」の表示に依存してしまいます。「Verdana」では三点リーダを下に表示します。

余談ですが、このブログはMovable Typeを使っているので、三点リーダはピリオドに変換されるという、またちょっと事情が違います。

が、このエントリーで表示されている(下向きの)三点リーダは細工をして、font-familyに依存するようにしています。

4.フォントの違いによる表示

Firebugのfont-familyの設定値と使って、真ん中に表示されるフォントと下に表示されるフォントをざっと分けてみました。

三点リーダが真ん中に表示されるフォント

  • Lucida Grande
  • caption
  • cursive
  • fantasy
  • icon
  • menu
  • message-box
  • monospace
  • MS UI Gothic
  • sans-serif
  • serif
  • small-caption
  • status-bar

三点リーダが下に表示されるフォント

  • Arial
  • Comic Sans MS
  • Georgia
  • Helvetica
  • Lucida Console
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

上に挙げていない和文フォントは、おそらくすべて真ん中に表示されると思います。よって和文フォントを先に指定すれば解決します。

ただし「いまさら聞けないCSS font-familyのまとめ」で記したとおり、半角英数文字に欧文フォントのフォントファミリーを適用したい場合、先頭に記述するフォントを欧文フォントにする必要があります。

なので、半角英数文字のフォントにこだわっている場合、欧文フォントを先に設定しなければならないのが悩ましいところです。

そもそも三点リーダは全角文字なのに欧文フォントに反応してしまう理由が不明ですが、他力本願でどなたかつぶやいてくれたらそれを後で引用しようかと思います。 guimihanuiさんよりコメント頂きました。「欧文フォントが三点リーダのグリフ(字体)を持っているため」というのが理由だそうです。

4.対処

適切な対処は、「font-family」の設定はそのままにして、三点リーダーのみspan要素などで括って、lang属性を指定する方法です。lang属性を指定することで和文フォントが適用されるようになります。

シックスアパートの平田さんよりご教示いただきました。この場をお借りしてお礼申し上げます。

参考:三点リーダー(…)を真ん中に表示する方法
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    $('body').each(function(){
        var txt = $(this).html();
        $(this).html(txt.replace(/[^>]…/,'<span lang="ja">…</span>'));
    });
});
</script>
<body>
あ…
</body>

下記の対処は上記の対処前に考えたものです。とりあえず残しておきます。

ひとつは「font-family」の設定を見直して、欧文フォントを変更するか、前述のとおり和文フォントを先に記述する方法です。

ただし、和文フォントを先に記述すると半角英数文字に(後に設定した)欧文フォントが適用されなくなります。

もうひとつの対処は、「font-family」の設定はそのままにして、三点リーダーのみspan要素などで括って、個別に異なるフォントを指定する方法です。

手書きでの修正は現実的ではないので、以下のようなjQueryなどで一括置換でしょうか(きちんと検証していないのでうまくいくかどうか分かりませんが)。

<style>
body {
    font-family : Verdana,Arial,"メイリオ",Meiryo;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
    $('body').each(function(){
        var txt = $(this).html();
        $(this).html(txt.replace(/[^>]…/,'<span style="font-family:メイリオ">…</span>'));
    });
});
</script>
<body>
あ…
</body>

5.参考サイト

参考サイトは下記です。ありがとうございました。

三点リーダの謎

2013.03.11
三点リーダに欧文フォントが適用される理由と適切な対処方法を追記しました。

Comments [4] | Trackbacks [1]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3