Landed COLR/CPAL support to render Microsoft's color glyph format

2014/5/28版のNighlyからMicrosoftが提案しているカラーグリフフォーマットをサポートしたので (問題なければFirefox 32に含まれる)、その技術的な話を書こうかと。

Firefoxにおける文字ラスタライザは複数存在する。

• DirectWrite over Moz2D or Cairo (Windows)
• Windows GDI over Skia/Moz2D or Cairo (Windows)
• CoreGraphics over Moz2D or Cairo (OSX)
• FreeType over Cairo/Moz2D or Skia/Moz2D or Cairo (Linux, Android and Gonk/Firefox OS)

ただし、現在のFirefoxにおいては、ほとんどの描画をMoz2Dから行うので、純粋にCairoだけ描画されるパターンってのは通常では少ない。しいてあげればプリンタへの印刷だけ。

Firefoxでは文字をそのまま描画しているわけじゃなく、各ラスタライザはOpenTypeフォーマットのタグを解析して文字コードではなくグリフIDベースで描画しているため、そのまま文字列渡してOSのAPIで描画しているわけではない。また各種プラットフォーム用にラスタライザがいろいろ存在するため、CoreGraphicsのラスタライザであればApple形式のカラー絵文字が描画出来たり、FreeTypeのラスタライザであればAndroid形式のカラー絵文字の描画ができたりするなど、差異は存在している。

モダンブラウザではOpenTypeの機能をCSSからコントロールすることができる。 通常のOSの描画APIだけではCSSの規格で書かれていることが実現できないので、グリフレンダリングについてはより低レベルのAPIを利用している。低レベルAPIで描画が行われるので、各プラットフォーム間でほとんど表示できる機能が同じになっているのだけど、各ラスタライザの違いによってどうしても吸収できない差異に関しては若干存在はしている。

Color Glyph

今回サポートしたMicrosoftが提案しているカラー絵文字が使えるカラーグリフフォーマットというのはmpeg-OTspecに提案されているもので、投票次第になるけどおそらくISO規格として次のOpenTypeの規格に含まれるものになる予定。仕様書はmpeg-OTspecに登録すればダウンロード可能なので、誰でも入手は可能である。

また、他のフォーマット、AppleやAndroid 4.4+のフォーマットってのは単純に画像ファイル (PNG) をOpenTypeのあるテーブルに入れてそれを表示するって形式。画像ファイル持ってる場合は単純に作成可能なフォーマットだ。ただベクターフォントではないから、解像度が高いものを持つ必要がある。

また、ベクターフォントな形式としてSVG in OpenTypeってのもある。AdobeとMozillaが推している規格でFirefoxですでに利用可能になっている。これはOpenTypeのSVGテーブルにSVGを入れる形式になっていて文字としてSVGを表示できる。まさにSVG Font的なものだ。昔Acid3 Testに組み込まれていたSVG FontはおそらくSVG2で忘れ去られると思うよ。

今回のMicrosoftフォーマットはちょっと違うアイデアを利用してて、COLRテーブルとCPALテーブルの追加によってカラーグリフを提供しているということ。当然ベクターフォントである。

OpenTypeフォントってのは、CMAPテーブルで文字が一つのグリフIDにマッピングされててそのグリフIDで文字を示してる。今回のフォーマットはそのグリフIDに複数のグリフIDを割り当てて、しかも各グリフIDに色の情報を追加する仕組みになっっている。実際には、COLRテーブルには、元々のグリフIDに複数のグリフIDを割り当てられる仕組みを持っていて (BaseGlyphRecord)、またその複数のグリフIDには色を割り当てることができる (LayerRecord)。



こんな感じで一つの文字を表すのに複数のテーブルを使って文字を構成する。

このフォント形式はWindows 8.1からサポートされているのだけど重要なのはDirectWriteでしか扱えない仕組みになってる。なので従来のGDI形式の描画方式を使ったアプリケーションでは扱えない。 Windowsアプリケーションでカラー絵文字を扱いたかったらDirectWriteで描画しろってのがMicrosotの答えだ。

Render COLR/CPAL on Gecko

そろそろカラー絵文字のサポートを入れようかと考えた時、Firefoxの場合もDirectWriteラスタライザのみのサポートにしようかと考えていたのだが、結果としてOpenTypeフォントを解析すれば全プラットフォームのサポートできるんじゃない？って話になって全プラットフォームサポート可能な方向性で実装することになった。

また、描画テストを追加するためにダウンロードフォントでもこの形式をサポートするようにしている。

ダウンロードフォント利用する場合、FirefoxやChromeではotsと呼ぶサニタイザライブラリを利用している。otsはフォントデータを解析して、フォントファイルが正しいフォントかどうかをチェックして、知らないOpenTypeタグの削除したりする。ots用のサニタイザを書いてもよかったんだけど、Firefox側にサニタイザを別途用意することでフォントファイルの正確性をチェックしてる。WindowsのDirectWrite API (IDWriteFontFile::Analyze)でも同様のサニタイズをやってたりする。otsのサニタイザに関してはバグはファイルしておいたし、Google的にもやる方向で動くみたい。

なお、otsでAndroid形式のカラー絵文字のタグをサポートしてないから、FirefoxやChromeのAndroid版でダウンロードフォントでカラー絵文字が使えないって話もあるけどね！

まとめ

Firefoxではダウンロードフォントも同様にSVG in OpenTypeとMicrosoft's Color Glyphをサポートした。しかも全プラットフォームで利用可能になっている。なにか問題を発見したらbugzillaに報告してね！