花園明朝OT＋Web フォントによるIVSと OpenType feature tag の表示テスト

ブラウザ上で異体字を表示するには、2つの方法がある。異体字セレクタを使ってIVSで異体字を表現する方法と、CSS3の font-feature-settings プロパティを使って OpenType feature tag によるグリフ置換をする方法だ。今回、花園明朝OTを Web フォントとして利用し、この2つの方法で異体字の表示テストを行った。

方法の具体的な解説

IVSによる方法

IVS（Ideographic Variation Sequence）は親字（基底文字）にVS（Variation Selector; U+E0100–U+E01EF）をつけて異体字を表現する。詳しくは下の Wikipedia の記事などを参照。

異体字セレクタ - Wikipedia

この方法で表現される異体字は、基底文字の包摂範囲内に含まれることになっている。プレーンテキストとして扱えるので、HTMLで表示したければそのままIVS（＝基底文字＋VS）を書けばよい。通常の文字と同様、数値文字参照を使って書くこともできる。フォントやOS、アプリケーションが対応していない場合には、通常の基底文字のグリフが単に表示される（ことが望まれるが、VSが豆腐などで表示されてしまうことが多い）。

例えばHTMLで

葛　葛&#xe0100;　葛&#xe0101;

と書けば、

葛　葛󠄀　葛󠄁

のように表示される。

OpenType feature tag による方法

OpenType にはいろいろなタグが定義されているが、漢字に関係するタグは expt, hojo, jp78, jp83, jp90, nlck, trad, aalt などである。あるグリフから別のグリフへ、一対一や一対多で置換できる。Mac OS X や InDesign、Illustrator などでは以前から使われているが、それ以外の環境ではでは対応が進んでいないため、あまり使われていない。圧→壓のように、包摂範囲外のグリフへの置換も定義されている。

プレーンテキストでは扱えないため、HTMLではCSS3の font-feature-settings プロパティを利用してタグを指定する。これはまだドラフト段階なので、実際にはベンダー接頭辞をつけて利用することになる。

例えば、jp90 タグを有効にするためには次のように指定する。

hoge {
  font-feature-settings:         "jp90" 1;
  -moz-font-feature-settings:    "jp90=1";
  -ms-font-feature-settings:     "jp90" 1;
  -webkit-font-feature-settings: "jp90" 1;
}

aalt のような一対多の置換を含むタグにおいて、n 番目のグリフに置換したい場合には、上の 1 の部分に n を指定する。

2013-05-03追記：この記事を書いた時点では -moz-font-feature-settings だけ指定方法が異なっていた（"jp90=1"）が、現在では他と同じ形式（"jp90" 1）に変更されている。

表示のテスト

花園明朝OT＋Web フォントによる OpenType feature tag とIVSの表示テスト - しろもじ作業室

花園明朝OT ver. 0.510 を Web フォントとして利用し、表示テストを行った。フォントフォーマットはOTFとWOFF（Web Open Font Format）。OTFからWOFFへの変換については、武蔵システムのWOFFコンバータを利用した。

表示テストは Firefox, Safari, Chrome, Opera, IE8 の各ブラウザで行い、すべて最新版を用いた。OSは Windows XP SP3（そろそろ潮時ですかね…）。参考までに先日インストールした Windows 8 Comsumer Preview 上でもテストをしたが、Opera とIE以外では差が見られなかった。

下の画像は、最も対応状況が優れていた Firefox での表示例。

▲ クリックで拡大

結果一覧

ブラウザ	OS	OTF	WOFF	IVS	tag
Firefox 9.0	Win XP	○	○	○	○
Safari 5.1	Win XP	○	○	×	×
Chrome 17.0	Win XP	○	○	×	×^*
Opera 11.61	Win XP	△^†	△^†	×^‡	×
IE 8.0	Win XP	×	×	×	×
IE 10.0	Win 8 CP	○	○	○	△^§

OTF

○：OpenType フォーマットのフォントファイルを Web フォントとして利用できる。
×：対応しておらず、他のフォントで表示される。

WOFF

○：WOFFフォーマットのフォントファイルを Web フォントとして利用できる。
×：対応しておらず、他のフォントで表示される。

IVS

○：適切な異体字グリフが選択されて表示される。
×：VSが豆腐や中黒、空白として表示されてしまう。

結果一覧の註

* Chrome における OpenType feature tag 対応

expt, hojo, jp78, jp83, jp90, nlck の各タグについては、指定するとデフォルトのフォントで描画されてしまうという不具合がある。trad, aalt については、無視される（これは対応していない場合に期待される動作）。expt, hojo, jp78, jp83, jp90, nlck はすべて一対一の置換である一方、trad, aalt には一対多の置換も含まれるという共通点がある。が、これが原因かどうかははっきりしない。

† Opera における OpenType/WOFF 対応

Opera は TrueType, OpenType, SVGフォント, WOFFの各形式に対応していると謳っているが、花園明朝OTでは表示できなかった。武蔵システムのサイトの情報でも、和文 OpenType や、そこから変換したWOFFは×になっている。CFFアウトラインの和文フォントがダメなんだろうか。

‡ Opera におけるIVS対応

引用元が消えているが、Wikipedia によれば Windows 7 上の Opera でIVSが表示できるらしい。表には載せなかったが、今回 Windows 8 Comsumer Preview 上の Opera で表示できることを確認した。

§ IE10 における OpenType feature tag 対応

expt, hojo, jp78, jp83, jp90, nlck の各タグは正常に機能しグリフ置換が行われるが、trad, aalt については無視される。

また、IE10で花園明朝OTを表示させるとディセンダが大きく空いてしまうが、原因不明。

というわけで

Firefox がかなりいい感じ。他のブラウザの実装がいまいちなこともあり、実際に「使える」かどうかは疑問だが、覚えておくと何かの役に立つ……かも……？

しろもじメモランダム

文字についてあれこれと。