「青空文庫を縦書き表示」のフォント指定について。
さて「青空文庫を縦書き表示」では、綺麗な縦書きを実現するためにスタイルシート(CSS)でフォントの指定を行っています。
縦書きフォーマットでズレないためには、日本語等幅フォントの使用が必須。各OSに必ずインストールされている日本語フォントを調べてみると、
★Windows Vista：メイリオ、MSゴシック
★WindowsXP：MSゴシック
★Max OS X：ヒラギノ系
だということが分かりました。
ということで、縦書き表示用のCSSで、以下のようにフォントを指定してみたのです。
font-family:'メイリオ' , 'ヒラギノ角ゴ Pro W3' , 'ＭＳ ゴシック' , monospace;
}
ブラウザの種類によっては「フォント名を英語名で指定しないと認識してくれない」などの癖があるので、実際にはもうちょっと煩雑な記述になります。
※参考URL：CSSのfont-family
CSSでのフォント指定の記述は、左側から順に評価されていくので、上の例でいくと
1. まずメイリオを使おうとする。
2. メイリオが無ければヒラギノを使おうとする。
3. ヒラギノも無ければMSゴシックで表示する。
4. MSゴシックも無ければ、ブラウザの環境設定で指定してある等幅フォントを使用する。
これで、Vistaの人 → メイリオ、XPの人 → MSゴシック(またはメイリオ)、Macの人 → ヒラギノでの表示を強制する事ができます。
と、思いきや。
MacにメイリオやMSゴシックを入れている場合、またXPにメイリオは入れていないけれどヒラギノを入れている場合、ちょっとこちらが意図していない表示になってしまう。やっぱりMacではヒラギノで表示した方が、Windowsではメイリオで表示した方が美しく見えます。
そして代替フォントの問題も。
これはCSSでフォントを弄っていたら気が付いたのですが、例えば三点リーダ「...」の縦書き字形は、Unicode区点0x22eeに定義されています。
この字形が、メイリオとヒラギノにはありません。無いものを表示させようとしたら、当然いわゆる「豆腐」が表示されるかと思いきや、意外とシステムがフォローしてくれるのです。
例として、上で書いたCSSを適用している場合、
[ Windows：メイリオがインストールされている場合 ]
1. まずメイリオを使おうとする。 → あった! メイリオで表示。
2. Unicode区点0x22eeという文字を描かなくてはいけない → メイリオに、その字が無い!
3. 次の表示フォント候補「ヒラギノ」を探す。 → インストールされていない。
4. その次のフォント候補「MSゴシック」を探す。 → MSゴシック発見。
→ しかもMSゴシックにはUnicode区点0x22eeという文字が定義されている。
→ この文字だけMSゴシックで表示。
4'. もしMSゴシックにその字形が定義されていなかったら
→ ブラウザ設定で「monospace」に指定されているフォントから探す。
→ そのフォントにも当該字形が無かったら諦めて「豆腐」を表示。
[ Mac：ヒラギノしかインストールされていない場合 ]
1. メイリオは無い。 → ヒラギノがあった! ヒラギノで表示。
2. Unicode区点0x22eeという文字を描かなくてはいけない → ヒラギノに、その字が無い!
3. 次の表示フォント候補「MSゴシック」を探す。 → インストールされていない。
4. ブラウザ設定で「monospace」に指定されているフォントから探す。
→ そのフォントにUnicode区点0x22eeという文字が定義されていない。
→ Macはまだまだ諦めない。システムにインストールされているフォントから、字形0x22eeが定義されているフォントを探し出す。
→ 見つかったらそのフォントで表示。見つからなかったら諦めて「豆腐」を表示。
う〜ん、Macは親切だなぁ。
まぁ何が言いたいかというと、「豆腐は絶対に表示させたくない。ただし、例えばヒラギノの代替フォントとしてMSゴシックが使われたりするのも（表示が汚くなるので）避けたい」という事を実現するには、上記のCSSだとちょっと不都合があるということですね。
ということで、MacとWindowsで異なるCSSを適用する事にしました。
幸い「青空文庫を縦書き表示」ではPHPでスクリプトを書いているので、ユーザエージェントで場合分けをするのは簡単。
<?php
if( strstr( $_SERVER['HTTP_USER_AGENT'] , 'Windows' )){
print "font-family:'メイリオ' , 'ＭＳ ゴシック' , monospace;" ;
}elseif( strstr( $_SERVER['HTTP_USER_AGENT'] , 'Macintosh' )){
print "font-family:'ヒラギノ角ゴ Pro W3' ,monospace;" ;
}else{
print "font-family:monospace;" ;
}
?>
}
上でも書きましたが、ブラウザの種類によっては「フォント名を英語名で指定しないと認識してくれない」などの癖があるので、実際にはもうちょっと煩雑な記述になりますよ。
さてさて、Windows用のfont-family設定のほうは、若干投げやりモード。
WindowsXP環境では、MSゴシックに規定されていない文字は他のデフォルトフォントでも規定されていないっぽい。だからMSゴシックに無い字は「豆腐」になります。
ただし、今のところ問題になる「MSゴシックに無い字」は、長音記号「ー」の縦書き用だけ。「ー」そのものの縦書き字形が存在しないので、これをUnicodeの0x3190（漢文の竪線）で表示させようとしたところ、XP - MSゴシック環境で表示されないとのご指摘を頂いたので、とりあえず「ー」はUnicodeの0x2758の縦棒に変換する事にしてみた。なかなか後ろ向きな解決法。
Macの方は、ヒラギノに無い字はシステムに任せてしまおうという魂胆。システム内を隅から隅まで探しても見つからない字は「豆腐」で結構。だって存在しないんだから表示できっこないもん。
Windows / Mac以外（Linuxなど）でアクセスしてくる人に対しては、ご免なさい。うまく表示されるかも知れないし、されないかもしれません。
ということで「青空文庫を縦書き表示」、まだ表示されない字があるだろうか。
コメント