カラー絵文字〜OpenTypeフォントの仕様を中心に〜

カラー絵文字とは

ここでカラー絵文字と言っているのは、🗻や🗾などのように、環境によってはプレーンテキストであるにもかかわらずカラフルに表示される文字のことです。

カラー絵文字が表示される二つの方法

画像が表示されている

サイトやアプリケーションによっては定義された文字列が対応する画像に差し替えられて、さも文字であるかのように表示されるものがあります。
こちらの話には全く興味がないので、これ以上は省きます。

フォントがカラフルな文字を持っている

数年前まではプレーンテキストには色という概念が存在しませんでした。
そこに色の概念が入り込みました。
これは、フォントの中にそうした情報を含めることができるようになったためです。

もちろん、カラー絵文字が表示されるからと言って、プレーンテキストの方が大きく変わったわけではありません。
なのでそうしたフォントがない環境では絵文字はこれまで通りモノクロで表示されますし、カラー絵文字に対応していないアプリケーションも白黒のままです。
（もちろん互換性という単語を知らないAppleの世界では対応アプリケーションという概念がそもそもありません）

カラー絵文字フォントのための4つの仕様

フォントファイルには仕様があります。
簡単なお話はOpenTypeの仕様入門 (前編・中編・後編) で少し話しました。
カラー絵文字フォントも私が把握している範囲は全てOpenTypeフォントになっています。

もちろん、カラー絵文字のための仕様は昔からあったわけではなく、最近追加されたものとなります。
そして、大きく分けて4つの仕様があります。

CBDT/CBLC: Androidのやつ

Noto Color Emojiなどで使われている仕様です。
画像です。
「ＭＳ 明朝」「ＭＳ ゴシック」などにはビットマップフォントが埋め込まれていますが、あれのカラー版です。
CBDTにはPNG画像とそのグリフの送り幅などの情報が入っています。
CBLCには各グリフのデータがCBDTのどこにあるかの情報が書かれています。
基本的には昔からあるビットマップフォント用のテーブルであるEBDT/EBLCと同様の構造です。

• FreeTypeで読み込むためには
  • FT_CONFIG_OPTION_USE_PNGを有効にしてビルドしましょう
  • PNG画像を内部に埋め込んでいる関係でlibpngが必要です
  • FT_Load_GlyphでFT_LOAD_COLORを使います

COLR/CPAL: Windowsのやつ

Segoe UI Emojiなどで使われている仕様です。
アウトライングリフです。
CPALには色情報が羅列されていて、その色番号がCOLRから参照されます。
COLRはカラー絵文字を描画するための情報が書かれています。
カラー絵文字は色のついたグリフを同じ場所に重ねていくことで表現されます。
色にはアルファチャンネルを設定することもできます。
つまりCOLRはGIDから(GID,色番号)の順序付きリストへの写像です。

• FreeTypeで描画するためには
  • COLR/CPALテーブルを取得してパースしましょう
  • 指定された順番で指定されたグリフを指定された色で重ねていくだけ
    • 簡単ですね

sbix: Appleのやつ

Apple Color Emojiなどで使われている仕様です。邪悪なやつです。
仕様上は画像です。
仕様はここにあります。
仕様のようなものはここにあります。

基本的にはただのPNG画像を突っ込んだよっていう雑なやつです。
仕様上はJPEGとTIFFも使えます。
仕様のようなもの上ではPDFも使えます（楽しそう💀）。さらに、仕様のようなもの上は、画像の上に通常のグリフを描画させることもできます（graphicType: mask）。maskを使うとグリフによって画像の表示位置が変わった記憶があります（楽しい💀）。今見たらPDFとmaskは未来の拡張のためにって書かれてたので安心しました。

• FreeTypeで読み込むためには（PNG画像）
  • FT_CONFIG_OPTION_USE_PNGを有効にしてビルドしましょう
  • PNG画像を内部に埋め込んでいる関係でlibpngが必要です
  • FT_Load_GlyphでFT_LOAD_COLORを使います

SVG␣

源ノ角ゴシック Code JPなどで使われている仕様です。
SVGです。
Scalable Vector Graphicsです。
仕様を見ると次のように説明されています。

OpenType fonts with either TrueType or CFF outlines may also contain an optional 'SVG ' table, which allows some or all glyphs in the font to be defined with color, gradients, or animation.

おや？　animationという単語が見えますね？
見えてしまいましたね。
つまり、そういうことです。
Firefoxが対応しています（表示例：https://people-mozilla.org/~jkew/opentype-svg/soccer.html）。

静止画に関して言えばDirectWriteとPhotoshopも描画してくれるらしいです。
TATEditorでの対応は1年以上先の話になると思います。
（こっちよりはVariable Font対応を優先します）

フォント描画の実装

伝え聞くところによると、まともにカラー絵文字混じりのテキストを描画してくれそうなのはWindowsのDirectWriteだけのような気がします。
TATEditorではグリフの置換を含まないSVG以外のカラー絵文字に対応しています。
SVG対応にはしばらくかかりそうですが、👨‍👩‍👧‍👦などのカラー絵文字にはアプリ版を作ったら手をつけたいです。
有名な話ですが👨‍👩‍👧‍👦はコードポイント7つで構成されています。

おわりに

今日はカラー絵文字フォントの仕様の話を簡単にまとめました。

ところで複数のカラー絵文字が収録されている場合の正しい挙動を私は知らないのですが、どこかに書かれてるのでしょうか？