Noto EmojiがiOSで表示されない問題を調査する【異体字セレクタ】

普段何気なく使っている絵文字は、意外と奥が深いです。

今回は、Google fontの Noto Emojiを利用した際、safariでは意図した通りに表示されない不具合に遭遇したので、そこで調べたことをまとめました。

時間の節約になれば、嬉しいです！

結論

結論を先に言うと、
絵文字の後に「️」を追加すれば、ブラウザ間での表示の違いを解消できました！

前提

先日、下記のサイトにて、Webサイトのデザイン（アイコン的）に、絵文字を使用しました。
https://first-contributions-ja.github.io/

Appleの絵文字は、デザインやアイコンとしての使用は、厳密には禁止されています。
なので、オープンソースで配布されている「Google fontの Noto Emoji」を利用しました。

Next.jsを利用しているので、next/font から、簡単にGoogle fontを導入することができます！

発生した問題

Google Chromeで確認した場合、絵文字には適切にNoto Emojiのフォントが適用されて表示されていました。
しかし、safariでは絵文字自体が表示されなくなるという問題に遭遇しました。

解決策

ブラウザ間における絵文字の表示の違いについては、下記の記事が参考になりました！
https://qiita.com/mei331/items/204c669444e446eedd7b

️はどうやら『異体字セレクタ』というやつらしい。これをつけてあげることで、iOSでもちゃんとどの文字なのかが分かるようだ（たぶん？）

上記にある通り、
絵文字の後ろに「️」という異体字セレクタをつけることで解決できました！

異体字セレクタとは？

異体字セレクタ（Variation Selector）は、
Unicode文字に対して特定の表示形式を指定するために使用されます。

そもそも、Unicode文字は、抽象的な文字を定め、個々の文字の詳細な字体については区別しません。

絵文字の場合は、黒い輪郭のみのバージョンとカラフルなバージョンの2種類の字体が存在しており、
それぞれ、︎と️という異体字セレクタで指定することが可能です。

解説

なので、異体字セレクタを使うことで、
特定のフォントが期待する絵文字の形式を明示的に指示します。

これが必要になる理由は、以下の通り：

1. フォントの実装の違い:

   • Google Chromeはデフォルトで多くの絵文字をカラーで表示し、異体字セレクタがなくても適切なフォントを選択することが多いです。
   • Safariはフォントの選択と絵文字の表示に関してより厳密で、異体字セレクタがないとモノクロ表示や違うフォントが選択される可能性があります。

2. フォントの優先順位:

   • フォントの指定方法やブラウザのフォールバックメカニズムによって、異なるフォントが選択されることがあります。異体字セレクタがない場合、Safariはカラー絵文字用のフォント（例えばNoto Emoji）ではなく、システムのデフォルトフォントを使用することがあります。

まとめ

異体字セレクタ「️」を使用することで、絵文字のカラー表示を明示的に指示でき、ブラウザ間の表示の一貫性を確保できた。。！

逆に、どのように表示するのかを明示的に指定しないと、今回のケースのようにブラウザによってはうまく表示されないことがある。

ちなみに、調べてみたら、
Noto Emojiが、safariでうまく表示されないのは、GitHub上のissueでも報告されていて、執筆時点（5/29）では、まだ修正されていないバグっぽいです。。

おわりに

最後まで読んでいただき、ありがとうございます😎

下記の開発中に、調べたことの記録のような記事ですが、
少しでも参考になれば、嬉しいです！

https://first-contributions-ja.github.io/

また、よかったらこちらのサイトも、チェックしてみてください！
好きな絵文字を入力して、初めてのOSSコントリビューションを体験できます！

Happy Hacking !

参考

https://ja.wikipedia.org/wiki/異体字セレクタ
https://zenn.dev/hiro/articles/60da49241bc525