強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Firefox OS Emojis を使ってみた

Firefox

きっかけ

以前、この様な記事を書きました。

Mozilla が Firefox OS 向けの絵文字をオープンソースで公開 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20151014/1444840502

そこに以下の様なコメントを頂きました。

> カラー情報を持てないのでしょうがないですが白黒表示です。

FirefoxEmoji.ttf の中を見てみると、カラー情報が入った COLR テーブルと CPAL テーブルが含まれているようです。
Firefox や Windows など、COLR/CPAL テーブルに対応した環境であれば、
FirefoxEmoji.ttf でカラー表示ができるかと思います。

そのコメントで紹介されていたサイトがこちら。

won't fix: Landed COLR/CPAL support to render Microsoft's color glyph format
http://wontfix.blogspot.jp/2014/05/landed-colrcpal-support-to-render.html

OpenType の拡張でカラー絵文字にも対応が進められているとの記事でした。

ここで自分は「ん？でもコレってOpenTypeフォントの話だよな同梱されているファイルの拡張子は .otf じゃなくて .ttf なのでTrueTypeフォントだから未対応って事に成らない？」と思いつつももう少し情報を収集してみた所、こちらを発見。

OpenTypeフォントの拡張子って？ - Windows系OS | 教えて！goo
http://oshiete.goo.ne.jp/qa/1070671.html

Windows だとOpenTypeフォントでも .otf じゃなくて、 .ttf を使うものが有ると記載されていました。

こちらの記事などによると PostScript Type1 をベースに作られたOpenTypeフォントの場合には拡張子が .otf 。 TrueType をベースとするフォントの場合には拡張子に .ttf か .ttc が使われるそうです。

OpenTypeとは｜OTF｜OpenType Font - 意味/解説/説明/定義 ： IT用語辞典
http://e-words.jp/w/OpenType.html

という事でこの情報に加えて GitHub のソースコードに同梱されているサンプルを確認するとカラー絵文字を使ってるHTMLファイルのサンプルを見つけ以下の結論に。
・同梱されているフォントの拡張子は .ttf だけどOpenTypeフォント
・どうやらブラウザ上でこのカラー絵文字が使えそうだ

検証

サンプルのHTMLファイルを参考に以下の様なHTMLファイルを作成。トランプのジョーカーの絵文字を Firefox OS Emojis の絵文字(左側)を使っているもの OS 標準の絵文字(右側)を使ったものを表示するサンプルです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<style>
body {
  padding: 0.5em;
}
@font-face {
  font-family: "FirefoxEmoji";
  src: url('FirefoxEmoji.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#contens {
  width: 100%;
  height: 120px;
}
.emoji {
  float: left;
  font-style: normal;
  font-weight: normal;
  font-size: 100px;
}
.firefox_emoji {
  -moz-osx-font-smoothing: grayscale;
  font-family: "FirefoxEmoji";
}
</style>
	<title>Firefox Emoji</title>
</head>
<body>
<h2>Firefox Emoji</h2>
<div id="contens">
  <div class="emoji firefox_emoji">&#127183;</div>
  <div class="emoji">&#127183;</div>
</div>
</body>
</html>

.ttf ファイルも同じ階層に置き、ファイル構成はこの様に成っています。

実際の動作はこちらで確認できます。

検証結果

キャプチャ画像を貼っていた事でも分かる様にこちらの方法で問題無く、 Mac 上の Firefox では問題無く、動作しました。

しかし、 Chrome や Safari で表示した場合(いずれも Mac で確認)には OpenType の拡張での描画では無く、 TrueType の情報での描画に成りました。これらのブラウザでは COLR/CPAL の情報を使ったレンダリングには未対応みたいです。

【Chrome】

【Safari】

後、iOS版の Safari でも試してみました。

iOS版でも未対応。
加えて、 iOS だと絵文字のサイズが変更されないみたいですね。

頂いたコメントに添付されていたURLのサイトにも記載がありましたが Windows は COLR/CPAL に対応してるみたいなので Edge でも正しく描画されました。 OS 側にはカラー絵文字が含まれているフォントが無いみたいでそちらのレンダリング結果は寂しい感じに…

おまけ

Mac の Font Book にフォントを追加して確認した情報を貼っておきます。他のOpenTypeフォントだと「種類」のところに OpenType TrueType と2つ並んでるけど Firefox OS Emojis のフォントだと TrueType だけでした。うーん、フォントにはあまり詳しくないけどこれで合ってるのかなぁ？ ヘッダ情報の記載ミス？