ブラウザ間における絵文字の表示の違いについて

[kazzyfrog]

自分も、絵文字の実装する時に、Noto Emojiがsafariで表示されなくて詰まったので、
ブラウザ間における絵文字の表示の違いについて、メモしていきます！

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

[kazzyfrog]

詰まった不具合

google font のNoto Emojiが、 Chromeでは意図した通り表示されるのに対し、
safariでは、表示されていなかった。

フォントが適応されずに、絵文字が表示されていない状態。。
（iOSの絵文字フォントが適用されているわけでもない。）

[kazzyfrog]

WordPressで一部のNoto EmojiがiOSで表示されない問題をたぶん解決した

上記の記事によると、このように書いてあった。

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

結果、これで解決できた。。！

[kazzyfrog]

調べてみると、
Noto Emojiが、safariでうまく表示されないのは、issueでも報告されていて、まだ修正されていないバグっぽい。。

[kazzyfrog]

異体字セレクタとは？
（chatGPTによると、）

---

SafariでGoogle FontのNoto Emojiが適切に表示されない原因は、絵文字の表示方法に関連しています。具体的には、絵文字の後ろに「️」という異体字セレクタ（VS16: Variation Selector-16）を付けることで表示が改善される理由を説明します。

異体字セレクタとは

異体字セレクタ（Variation Selector）は、Unicode文字に対して特定の表示形式を指定するために使用されます。特に「️」（VS16）は、絵文字をカラーで表示することを指定するために使用されるセレクタです。

原因

異体字セレクタを使うことで、特定のフォントが期待する絵文字の形式を明示的に指示します。これが必要になる理由は以下の通りです：

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

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

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

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

解決策

異体字セレクタを使用して明示的に絵文字の表示を指定することで、フォントの一貫性と表示の正確さを確保することができます。具体的には、絵文字の後ろに「️」を追加することで、SafariでもChromeと同様にカラー絵文字が表示されます。

実装例

Reactで絵文字を適切に表示させるための実装例は以下の通りです：

import React from 'react';

const Emoji = ({ emoji }) => {
  return (
    <span>{emoji}&#xfe0f;</span>
  );
};

const App = () => {
  return (
    <div>
      <p>これは絵文字です: <Emoji emoji="😊" /></p>
    </div>
  );
};

export default App;

このように、絵文字の後に異体字セレクタ「️」を追加することで、Safariでも絵文字が期待通りに表示されるようになります。

まとめ

異体字セレクタ「️」を使用することで、絵文字のカラー表示を明示的に指示でき、ブラウザ間の表示の一貫性を確保できます。Safariにおいて絵文字が適切に表示されない場合、このセレクタを使用することが有効な解決策となります。

---

[kazzyfrog]

多分こんな感じ

• Unicode文字は、抽象的な文字を定め、個々の文字の詳細な字体は区別しない。
• 絵文字の場合は、黒い輪郭のみのバージョンとカラフルなバージョンの2種類の字体が存在している。
  • それぞれ、︎と️で指定することが可能。
• そして、どのように表示するのかを、明示的に指定しないと、ブラウザによってはうまく表示されないことがある
  • 普通の絵文字なら、safari標準の表示方法が適応されるが、今回のように、外部フォントだとうまく表示されないことがある
• なので、絵文字の異体字セレクタを明示的に指定することで解決できる！？

参考：
異体字セレクタ/ wiki
💩って2色あんねん

[pss-aileen]

ちょっとまださっくりとしか見れていませんが、なんとなく把握しました！
ありがとうございます！