しろもじメモランダム

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

トップ > HanaMin

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

webfont HanaMin OpenType 字形字体 文字コード

ブラウザ上で異体字を表示するには、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 の記事などを参照。

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

例えばHTMLで

葛　葛󠄀　葛󠄁

と書けば、

葛　葛󠄀　葛󠄁

のように表示される。

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 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が豆腐や中黒、空白として表示されてしまう。
tag
  • ○：OpenType feature tag が利用できる。
  • ×：対応しておらず、無視される。

結果一覧の註

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

花園明朝OTを0.510に更新、IVD 2012-03-02版に対応

HanaMin OpenType 文字コード webfont

Adobe-Japan1-6 準拠の漢字フォント・花園明朝OTを ver. 0.510 に更新。

以下、主な変更点について解説。

IVD 2012-03-02 版に対応

今月2日にIVD（Ideographic Variation Database）の最新版が公開され、Adobe-Japan1 に32個、Hanyo-Denshi*1 に8,850個のIVSが追加された。この追加により、Adobe-Japan1-6 に含まれる14,664個の漢字グリフすべてがIVSでアクセスできるようになった。花園明朝OTは今回これに対応。

Adobe-Japan1 コレクションに追加されたIVSについては、以下のページに詳しい。

CMap を UniJIS2004-UTF32-H ver. 1.011 に更新

文字コードとグリフ（CID）との対応表である CMap を、最新バージョンの1.011に更新した。1.010からの変更点は以下の通り。

  • U+9FCC（鿌）→ CID+20156 の対応が追加された
  • U+2329, 232A（〈, 〉）→ CID+682, 683 の対応が追加された

花園明朝OTは漢字フォントなので、関係するのは前者のみ。U+9FCC（鿌）は1月31日リリースの Unicode 6.1.0 で追加された統合漢字。

スペースのグリフを少し追加

CID+1（欧文スペース）, CID+3000（和文スペース）, CID+8720（CID+1 の vrt2 置換先グリフ）を追加した。CID+1, CID+8720 の文字幅はとりあえず半角として実装した。CID+8720 を追加した理由は次の項で。

Firefox において Web フォントに使用できない問題を解消

Firefox で花園明朝OTを Web フォントとして使おうとしても、ファイルのダウンロード自体は行われるものの花園明朝OTで描画されない問題があった。

これについて、上の記事のコメントでえむけいさんから次のような情報をいただいた（ありがとうございます）。

Windowsでは、CFFアウトラインのOpenTypeフォントのGSUBテーブルにvrt2 featureが定義されていないのにvhea/vmtxテーブルがあると、OSに不正なフォントして弾かれます。インストールすれば使えるようですが、WebフォントをロードするためのAPIはWebから任意のデータを受け取る可能性があって、フォントレンダリングエンジンの脆弱性も実際に何度か発見されているので、チェックが厳しくなっているようです。
縦書きグリフを追加するか、vhea/vmtxテーブルを削除してください。

花園明朝OTが web font で使えないっぽい - しろもじメモランダム

このアドバイスに従い、縦書きグリフ CID+8720 を追加して以下のように vrt2 feature を定義した。

feature vrt2 {
  sub \1 by \8720;
} vrt2;

これにより、Firefox での問題は解消されたようだ。縦書きグリフを追加するのではなく vhea/vmtx テーブルを削除する方法もあるが、これを試したところ Microsoft Word で縦書きができなくなった（花園明朝OTを指定してもMS明朝で描画される）ので採らなかった。

なお、上の記事では「Chrome で試したら『エラー　このページの表示中に問題が発生しました』云々と出てページすら表示されなかった」と書いたが、こちらについては Chrome のアップデートの過程で解消されていた様子。

*1:こちらは花園明朝OTには収録していない。

花園明朝OTが web font で使えないっぽい

HanaMin webfont OpenType

追記（2012-03-06）：解消したっぽい。

一昨日 ver. 0.500 を公開した花園明朝OTですが、web font として使おうとするとどうもうまくいかないっぽい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>test</title>
    <style type="text/css">
      @font-face {
        font-family: "MyHanaMinOT";
        src: url("HanaMinOTPr6N-Regular.otf") format("opentype");
      }
      textarea {
        font-family: "MyHanaMinOT";
        font-size: 300%;
      }
    </style>
  </head>
  <body>
    <textarea>花園明朝</textarea>
  </body>
</html>

このHTMLを表示させればOKなはずだけど（ですよね？）、Firefox 5 で試してみたところ花園明朝で表示してくれない。Firebug でチェックした限りではフォントファイルのDL自体はちゃんと行われているので、フォントの中身の問題だろうか。

ちなみに Chrome で試したら「エラー　このページの表示中に問題が発生しました」云々と出てページすら表示されなかった。むむ……

2年ぶりに花園明朝OTを更新、Pr6Nに

書体 HanaMin OpenType

グリフウィキのグリフを利用して作成している花園明朝OTを、2年ぶりに更新しました。漢字以外のかな・アルファベット・記号などは収録していませんが、Adobe-Japan1-6 の漢字はすべて収録したため、Pr6N を名乗っています*1。

また今までと同様、OpenType feature tag による字形切り替え、及びIVSによる字形切り替えの両方に対応しているはずです。

詳細については以下のページから。

ちなみに、今回初めて SourceForge.JP にプロジェクトページを作ってみました。

フォントファイル本体はもちろん、フォント作成に使用しているスクリプト類も（いい加減な出来ですが）ここで公開しています。興味のある方はどうぞ。

*1:デフォルトの漢字グリフはJIS2004例示字形に準拠。

花園明朝OTを更新してPr6Nなフォントにしようか

HanaMin 書体 OpenType

前に作っていた CID-keyed OpenType フォント、花園明朝OT。最終更新版（ver. 0.200）では Adobe-Japan1-4 +α の漢字グリフを収録していたので《花園明朝OT xProN R》と名乗っていた。

現在では、Adobe-Japan1-6 のすべての漢字グリフが GlyphWiki で作成済みになっている*1。ということで、これを元にフォントを作成すれば Pr6N 仕様のものができあがる。更新再開しようかな。

*1:グループ:Adobe-Japan1 - GlyphWiki から参照。

花園明朝OT、Adobe-Japan1-4の漢字グリフをすべて収録

HanaMin

グリフウィキで制作していた Adobe-Japan1-4 の漢字グリフ（9138個）が完成したので、増加分を花園明朝OTに追加し、《花園明朝OT xProN R ver. 0.200》として公開した。

一般のProフォント・ProNフォントと同様に、いろいろな異体字を使うことができる*1。下の画像はその一部。異体字グリフは新しく作成したものが多いので、比較的バランスが整っているはず。どうでしょう？

最新版のグリフ一覧はこちら。収録グリフは全部で14358個。

普通のPro/ProNフォントは第3水準・第4水準・補助漢字のすべてを含んでいるわけではないが、この花園明朝OTは第3水準・第4水準・補助漢字をすべて収録している。ただし Adobe-Japan1-4 外のグリフについては字形のチェックをまだ行っていないため、小塚明朝の字形と異なるグリフも存在している。

今のところ「々〆〇仝」と漢字しか収録していないので、改変可能な他のフォントからアルファベットやら仮名やらを取り込みたいところ。

*1:アプリケーションが対応していれば、の話だけど。

花園明朝OTの簡単なグリフ一覧を作った

HanaMin

のんびり制作中の花園明朝OT。CID+0 から CID+23057 まで（Adobe-Japan1-6 の範囲すべて）グリフを並べて、簡単な一覧を作ってみた。未収録のグリフは、このPDFでは .notdef（CID+0）の四角形に置換されている。

Adobe Reader で表示してみると、やはり Windows のレンダリングよりもかなり綺麗に見える。まるでフォントの質が5割ほど良くなったような(笑)

ちなみに現在は CID+13637〜14282 を制作中。このブロックには JIS X 0208 の旧字体や異体字などが収録されているので、Adobe-Japan1 の漢字の中でも「使える」グリフが多いんじゃないだろうか。今のところこのブロックの未作成グリフは140個で、これを埋めれば Adobe-Japan1-4 の漢字がすべて埋まることになる。