「縦書き字形」のブラウザ上での表示具合はどんなもんだろう。
前回導きだした、「現行のすべてのOSでいちおう安全な font-family 設定：ゴシック版」を使って、縦書き字形がブラウザ上できちんと表示されるかどうか確かめてみます。
括弧たち ： ユニコード：U+FE35 から U+FE44
︵︶︷︸︹︺︻︼︽︾︿﹀﹁﹂﹃﹄
角括弧 ： U+FE47 と U+FE48
﹇﹈
隅付き括弧（白） ： U+FE17 と U+FE18
︗︘
句読点 ： U+FE10 から U+FE12
︐︑︒
ダッシュ : U+FE31（長） と U+FE32（短）
︱︲
三点リーダ ： U+FE19
︙
二点リーダ ： U+FE30
︰
長音記号の代用 ： U+4E28
丨
︵︶︷︸︹︺︻︼︽︾︿﹀﹁﹂﹃﹄
角括弧 ： U+FE47 と U+FE48
﹇﹈
隅付き括弧（白） ： U+FE17 と U+FE18
︗︘
句読点 ： U+FE10 から U+FE12
︐︑︒
ダッシュ : U+FE31（長） と U+FE32（短）
︱︲
三点リーダ ： U+FE19
︙
二点リーダ ： U+FE30
︰
長音記号の代用 ： U+4E28
丨
ということで、いかがでしょうか。
環境によって、角括弧・隅付き括弧（白）・句読点・ダッシュ（短）・三点リーダ あたりが「豆腐」や「ドット」「空白」で表示されているかもしれません。逆に言うと、それ以外の文字は各OS上できちんと表示される、と。
で、OSやブラウザによって、スタイルシートで指定されたフォントに無い字形への対応が異なっていて、
- システムにインストールされている、CSSで指定されている以外のフォントから探して引っ張ってくる。（その字形がどのフォントにも含まれていなければ当然、表示されない）
- そんな親切なことはしないで、スタイルシートで指定されたフォントに含まれない字形は表示を諦める。
- スタイルシートの font-family に指定されているフォントを記述順に見ていって、システムに入っているフォントが見つかったら、それだけを使う。
…という具合になっているみたい。
なので、無駄な設定となる可能性もあるけれど、いちおう対策として、
- Windows：SimHei（簡体字ゴシック）、SimSun（簡体字明朝）
- iOS：STHeitiJ-Medium（ゴシック）
- Android：Droid Sans Fallback（CJKゴシック）
あたりをスタイルシートの font-family に追加しておけば、きちんと表示される記号・字形が増えるかもしれません。
それを踏まえて、このページで指定している font-family は、
font-family:'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , 'ヒラギノ角ゴ Pro' , 'Hiragino Kaku Gothic Pro' , 'メイリオ' , 'Meiryo' , 'ＭＳ ゴシック' , 'MS Gothic' , 'SinHei' , 'HiraKakuProN-W3' , 'STHeitiJ-Medium' , 'TakaoExゴシック' , 'TakaoExGothic' , 'Droid Sans Japanese' , 'Droid Sans Fallback' , monospace;
という感じです。
さて。
プラットフォームごとの縦書き字形の表示具合を把握したところで、ここから縦書き変換JavaScript・h2v.jsの話。
現在 h2v.js（〜ver2.4.0）では、横書きのときと縦書き時で字形が異なる文字（括弧やダッシュ記号など）については、CSSで右90度回転させて表示、という方法を採っているのです。でも試してみると、これらを縦書き字形に置換して表示してやったほうが、明らかに見た目が綺麗な場合が多い。
で、次期バージョンは、この「縦書き字形に文字置換」を基本線としてみようかなぁ…と。表示が美しいほうが良いもんな。
新しいバージョンは、もう間もなく完成予定です。しばらくお待ちくださいな。
コメント