更新:
三点リーダー(…)を真ん中に表示する方法
こんにちは、ひらたです。わたしは「…」を多用するのが好きなのですが、そのせいか、なんの前触れもなく、三点リーダーについての話題を振られてしまったので、ちょっととまどいつつも書いてみたいと思います...
そもそも「…」は日本語では三点リーダーと呼ばれたりします。もともと日本語にはなかった表現なのですが、欧文からの翻訳のなかで日本にも定着していった(Wikipedia調べ)ようですね...
で、なぜ三点リーダーが話題になったかというと、Movable Type関連情報が数多く紹介されているブログ「小粋空間」に「三点リーダが真ん中に表示されない理由」というエントリーがあがったからのようです。日本語では、ちょうどフォント高の真ん中にあってほしい「…」が、ブラウザ上では「…」のように、ベースラインの上に表示されてしまうようです。なるほど...
エントリーでも解説されているのですが、こちらは欧文フォントと和文フォントの違いで表示に差がうまれています。実際、手元の Mac でみてみると、同じ U+2026 に Arial ではベースライン上、ヒラギノ角ゴシックでは中央になっていました。そりゃ、ユニコードだと全角の文字だからといって和文フォントが適用されるわけないですからね。ふむふむ...
これを制御するのに、CSS で font-family に指定するフォントの順番を変えてやればいい、という話が書いてあるのですが、これはどっちかというと、言語の問題ですので、言語コードを指定するのがよいのではないかと思います。具体的にどうするかというとですね...
<span lang="ja">…</span>こうすれば日本語のフォントが適用されます。されてますよね...
もちろん、英語を指定すれば欧文フォントに...
<span lang="en">…</span>ちなみに XML namespace でも定義されていますので、XHTML 1.0 だったら <span lang="ja" xml:lang="ja">…</span> と並記します。XHTML なら xml:lang のみですかね...
で、CSS で特定の言語に対してフォントを指定するときには、
span:lang(ja) {font-family: Arial}なんてやるといいようですね、ってこれだとベースラインになってしまうので、正しくは
span:lang(ja) {font-family: san-serif}みたいに、ブラウザにまかせてしまうのもいいかと思います。というか、このブログ、なぜかフォントの指定がいろいろしてあったりするので、この記事だけそうしています...
いちいち言語の指定なんてやってられないよ、って方には小粋空間の jQuery で一括変換するのもいいですね。さらに Movable Type でなんとかせい、という向きには
package fltr_ellipsis_ja;
use strict;
MT::Template::Context->add_global_filter(ellisis_ja => sub {
my ($str, $val, $ctx) = @_;
$str =~ s!((?:\xe2\x80\xa6)+)!<span lang="ja">\1</span>!g;
$str;
})
なんてプラグインを書いて <$mt:EntryBody ellisis_ja="1" $> なんて指定してやれば動くんじゃないでしょうか。最近だと、TinyMCE のほうでなんとかしてしまう方法もいいでしょう。もちろん試していないのですが...
あ、ちなみに、MTのブログの投稿設定で「Word特有の文字を置き換える」設定がオンになっていると、そもそも「…」は「...」とピリオド3つに変換されてしまうので、気をつけましょう。わたしもはまりました...
ちなみに個人的には、ベースラインでも真ん中でもどっちでもいいと思います...
Six Apart をフォローしませんか？
