先日、１年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました！スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。
更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。
検証端末
今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。
- AQUOS PHONE SERIE ISW16SH / Android4.0.4 / 標準ブラウザ、Android Chrome
- Galaxy Nexus / Android4.2.2 / 標準ブラウザ、Android Chrome
- iPhone4S / iOS5 / Mobile Safari
- iPhone5 / iOS6 / Mobile Safari
Webフォントとwriting-modeの関係
以前、「縦書きにWebフォントを使いたい！けど使えるのか検証してみた」という記事でwriting-modeの縦組とWebフォントの組み合わせの検証結果を紹介しました。このときはWindows版Safari（5.1.2）とMac版Safari（5.1.1）、iOS5のMobileSafariで検証し、以下のような結果になりました。
- WinではWebフォントは表示されるが、フォントが横に寝てしまう
- Mac/iOSでは正しい向きで縦書きにはなるが、WEBフォントが適用されているのは漢字のみで、かなはデバイスフォントになってしまう
今回の更新でもiOS5は推奨動作環境に含んでいたので、縦組部分のHTMLの構成は涅槃とSVGtextのままでwriting-modeは使いませんでしたが、その後iOS6ではかなにもWebフォントが正しく適用されるようになっていました！前回は検証対象外だったAndroidでも表示できました。少しずつですが改善が進んでいるようです。writing-modeの縦組＋Webフォントは、環境を限定すれば実現できるかも！？
Android Chromeでline-heightがかわる？
上記のwriting-modeとの組み合わせの検証結果のように、Android Chromeでのみベースライン？が上がったような表示になってしまいました。SVG要素内のSVG textで縦組している画面では文字間が、横組みや涅槃を使った画面では行間（涅槃の場合brで改行して縦組として見せているので、文字間はline-heightで指定されている）が空いてしまい、表示が崩れてしまいました。原因が分からなかったため、今回はUAを判別し、Android Chromeのみline-heightの調整を行いました。
AndroidとTTF
当初、AndroidではTTF形式への切替えを予定していました。保有しているAndroid端末での検証の結果、Galaxy Nexus（Android4.2.2）の標準ブラウザでは表示されるのに、AQUOS PHONE SERIE ISW16SH（Android4.0.4）の標準ブラウザではまったく適用されずデバイスフォントが表示されてしまう問題が発生。どちらもWebKitのビルド番号は534.30でした。一部端末とOSの組み合わせで利用できないフォントフォーマットがあるようです。今回はどの保有検証端末でも不具合なく表示されたOTFに統一することにしました。
Androidの標準ブラウザで特定のグリフが抜ける？
フォント形式をOTFに統一したところ、Galaxy Nexus（Android4.2.2）の標準ブラウザだけ縦組のレイアウトで特定のグリフが表示されない問題がみられました。SVGのtext要素とOTFの相性が悪いという可能性も考え、縦組みライブラリの涅槃（グリフは横組み用だけど見た目的に縦組ができる）でも試してみましたが、涅槃の場合も特定のグリフだけ表示されず。横組の場合は正しく表示されるので、マークアップとの相性なのか・・・もう少し細かい検証を行わないと分かりませんが、未だ謎のままです。他の端末（AQUOS PHONE SERIE ISW16SH（Android4.0.4）の標準ブラウザとAndroid Chrome、Galaxy Nexus（Android4.2.2）のAndroid Chrome）では問題なく表示されました。
