• 作成:

linux上のfirefoxでNoto Color Emojiを使う

  • Linuxでもカラー絵文字は普通に表示できる
  • さまざまなフォントが利用できる
  • Noto Color Emojiを使うときはビットマップを取り除かないようにする

追記

firefox 53からNoto Color Emojiを使うとサイズが異常に巨大化するようになりました. 今の最新版のfirefoxでは組み込みの絵文字が利用できます. 指定するのはやめておきましょう.

背景

FreeTypeがcolor emojiに対応していたことは知っていた. しかし, 私がそれを知ったのは数年前で, その時点では安定版にはマージされていなかったので, Symbolaで済ましていた. 当時はまだwindowsなどもカラー絵文字に対応しておらず, 絵文字があまり利用されていなかったことも放置した理由の1つである.

しかし, このwebサイトに絵文字をアイコン用に使ったのをきっかけに調べなおしたところ, とっくにlinuxでもcolor emojiが普通に表示できるようになっていたことがわかった.

そこで, 私の環境もいい加減カラー絵文字に対応させることにした.

参考

Noto Color Emojiを使おうとしたがfirefoxで表示されなかった

Google Noto Fontsは絵文字がなくても多言語の表示を行うためにインストールしておく必要があるのだから, notoが使えるならそれで済ましておこうと考えた.

また、Noto の絵文字フォントには Android などで使われている Noto Color Emoji もありますが、一般的な Linux のデスクトップ環境では色付きの絵文字フォントをモノクロでしかレンダリングできません。

Linux とかでも Unicode 絵文字を表示するためのフォント - Qiita

とあるが, firefoxやchromiumなどのブラウザは一般的でない方法を使っているため, カラー絵文字も表示できるはずだと考えた.

テスト用にemojione-color-font/full-demoを使い, Noto Color Emojiをfirefoxの開発者ツールで指定した所, 何も表示されなかった. しかし, chromiumで試してみたら, 正常に表示された.

Segoe UI Emojiを使えば表示できる

このことをtwitterでつぶやいたら, あらっきぃ氏から助言を貰った.

助言通りSegoe UI Emojiを使ってみた所, firefoxでも表示された.

fontconfigを修正してNoto Color Emojiを使う

なぜNoto Color Emojiがfirefoxで使えないのか気になったので調査してみた. 既にmozillaのbugzillaに報告されていた.

John, note that Noto Color Emoji is bitmap-only, so won't be considered scalable by fontconfig; but it's pretty sad if we're losing the ability to support this on Linux. :(

1170478 – implement support for Google color emoji fonts under Linux

Noto Color Emojiはビットマップフォントらしい. それを見て思い出したが, 私は数年前にビットマップが埋め込まれたフォントをまともに表示するために, fontconfigに以下の設定をしていた.

<edit name="embeddedbitmap" mode="assign"><bool>false</bool></edit>

ビットマップ削除設定のせいで, ビットマップが取り除かれて表示されなかったということがわかった. ビットマップ削除設定を削除したら, firefoxでも正常に表示された.

今はビットマップを含んだフォントは使われないように設定してあるので, ビットマップ削除設定は削除しても問題がない.

Segoe UI Emojiはパッケージマネージャで管理できないので, 私はNoto Color Emojiを使うことにする.

ちなみに, fontconfigにNoto Color Emojiを優先させるには以下のように書く.

  <alias>
    <family>monospace</family>
    <prefer>
      <family>Ricty</family>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>

fontconfigの設定を書かないと, 白黒バージョンのEmojiが使われることがある.