三点リーダとCSSのフォント指定

この記事は2006年12月4日に書かれたものです。その後のCSSによる三点リーダ表示の解決法については、この記事に詳しく書きましたのでご参照ください(2013年3月12日)。

以前から三点リーダ(…)がピリオドを3つ打ったみたい(...)に見えるのが気になっていたのだけど、あまりにも腑に落ちないので調べてみた。

ネット上にもあまりそういう情報が転がっていなくて、おかしいなぁと思ったら、WindowsのIEでは発生しない問題のようだ。これは主にSafariとFirefoxが対象(Operaは大丈夫だった)。
日頃からIEの文句ばっかり言ってる手前、こういうのはとても困るが、まあ仕方がない。

このサイトはCSSで

body {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

と指定している。
つまり、欧文フォントはLucida Grandeが適用され、和文は指定していないのでブラウザのデフォルト(ぼくの場合はヒラギノ 角ゴ)が適用されるはずである(ちなみに余談だけどLucida GrandeはOS Xのシステムフォント。いつも見慣れているせいもあって非常に違和感がなく美しい)。
でも、どうやらこれがちゃんと適用されていない様子。

一番単純明快なのは、Osakaのみの指定にすること。これだとちゃんとOsakaになって三点リーダも真ん中に表示される。
ただ、Osakaだとフォントがちょっと太めに感じられるので、できればヒラギノにしたい。

では、ヒラギノだけを指定するとどうか。

body {
	font-family: "ヒラギノ角ゴ Pro W3";
}

なぜか、これだと表示は変わらない。
さらに調べてみると、意外な事実がわかった。
Safariは2バイトのフォント名をきちんと解釈できないようなのだ。

正しくは次のように書く。

body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";
}

欧文名のみだと今度はFirefoxが解釈してくれないそうなので、ふたつを併記しなければならない。

さて、これで解決したかに見えるが、そうは問屋が卸さない。
和文フォントの半角英数は書体が美しくないのでできることなら欧文書体と和文フォントを別々に指定したいというのがそもそもの本題だ。
ということで、今度は欧文フォントに続いて和文フォントを指定してみる。

body {
	font-family: "Lucida Grande", Verdana, Arial,
	 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P ゴシック", sans-serif;
}

論理的にはこれでちゃんと三点リーダは真ん中に来るはず……。

が、やはりダメ。

きっと、なにかすごいTipsがあるんじゃないかと思っていろいろ探してみたが、全然わからない。
で、最終的にたどりついたのは驚きの事実。

SafariやFirefoxは、欧文グリフと和文グリフに異なる任意のfont-familyを割り当てられない。

ということらしい。
な、なんと、それじゃあ今までの苦労が水の泡じゃないか。
馬鹿らしくなってくるけど、そういうことのようだ。
ということは、現状では、欧文フォントはあきらめてヒラギノ 角ゴを指定して三点リーダをちゃんと表示するか、三点リーダをあきらめてきれいな欧文表示をとるかの二者択一ということになる。

で、うちのサイトでは、いまの表示をご覧いただければわかる通り(といっても該当のブラウザの方のみね)、三点リーダはしばらくあきらめることにした。
裏技としては、三点リーダを書くときだけ

(省略)なのだけど<span>……</span>。

というふうに書いて、三点リーダを囲んだspanに対してヒラギノを指定してやるというのも考えられなくはないが、今までの文章を直していくのも手間だし、今後ブラウザが改善されれば解決することなので余計なタグを書くのも好ましくないと思うので思いとどまった。

いまでこそ普通にフォントを指定しているけど、昔は、環境によってフォントが違うからHTMLでフォントを指定するのはご法度みたいな風潮だったし。それに、圧倒的多数のIEでちゃんと表示されてるのだからよしとしよう(こういうときだけ都合がいい)。

次のバージョンアップではぜひ改善してください、AppleさんとMozillaさん。

* * *

ちなみに三点リーダのかわりに「・・・」というふうに「・」をいくつか書いたり、「。。。」というふうに「。」を重ねて書くのは間違いだそうだ。三点リーダを2つ重ねて「……」とするのが正しい使い方。
実はぼくも以前は三点リーダひとつで「…」と書いていたのを最近になって改めた。
ま、Webだからそこまで細かいことをとやかく言わなくてもいいとは思うけど。

Ads by Google

comments powered by Disqus