Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

カラー絵文字とは

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

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

画像が表示されている

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

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

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

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

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

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

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

CBDT/CBLC: Androidのやつ

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

  • FreeTypeで読み込むためには
    • FT_CONFIG_OPTION_USE_PNGを有効にしてビルドしましょう
    • PNG画像を内部に埋め込んでいる関係でlibpngが必要です
    • FT_Load_GlyphFT_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_GlyphFT_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つで構成されています。

おわりに

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした