絵文字の表示をコトロールする異体字セレクタ / JavaScript

絵文字のデザイン上での利用での問題

Win10絵文字はカラフルなデザイン文字を「フォント」として扱えるので、スクリプトのツールやユーザーCSS（スタイルシート）で、デザイン上で色々と利用できます。例えばアイコン等に「✅ / 🟩」を使えば、デザインに要するコードが簡素化できます。

さて、前ページの「Ameba Search Repeat」で「⏏」（イジェクト）の絵文字を使ってアイコンを作りましたが、Edgeで動作をチェックすると思わぬ表示になり、しばし悪戦苦闘しました。

Chromeでは以下の表示で、簡単にアイコンが出来て満足していました。

ところが Edgeでは下の様な表示で台無しです。黒枠と紺色の背景が付いたWin10絵文字そのままが表示されています。

これを表示するスクリプトのコード部は以下です。

let sw=document.createElement('p');
    sw.innerText='⏏';

「⏏」の文字はWin10絵文字パッドから入力したもので、Chromeでの編集時はモノクロのこのマークになりました。これは都合良く、「border」「background」等を指定したのがChromeのデザインです。この文字が、Edgeではカラー絵文字で表示されてしまったのです。

文字のUnicodeを調べると「\u23CF」で、ChromeとEdgeのブラウザの違いなどで、どちらの表示にもなるらしい。

強制的に旧い絵文字の表示にする

Edgeの表示を改善するには、Win10絵文字（カラー）ではなく、モノクロの旧い絵文字「⏏」を強制的に表示させる必要があります。しかし「font-family」等を弄っても駄目で、ネットを調べたところ、以下のページを見つけました。

　　　Unicode 絵文字にまつわるあれこれ
　　　(絵文字の標準とプログラム上でのハンドリング)

このページのリンクで生絵文字の以下のリストがあります。

　　　emoji_list.txt

この表は、左から「emoji」「emoji_with_TPVS」「emoji_with_EPVS」の3種の文字コードを並べています。

問題の文字の列から、上の部分をコピペして以下のページの文字コードを調査。

　　　Unicode文字ツール

左から順に「\u23CF」「\u23CF\uFE0E」「\u23CF\uFE0F」でした。で、非常に場合分けが複雑で文字によって結果が異なる様ですが、「素のコード」「EPVS付」の場合は「カラー絵文字」になり、真ん中の「TPVS付」の場合に「Text」ここで言うモノクロの旧絵文字になる場合が多い様です。

今回の場合、素の「\u23CF」では、Edgeで「カラー絵文字」になり、Chromeでは

「旧絵文字」ですが、「TPVS付」の「\u23CF\uFE0E」が「旧絵文字」になる可能性が残っているので、文字を指定するコード部を以下の様に改めてみました。

let sw=document.createElement('p');
    sw.innerText='\u23CF\uFE0E';

これがこの場合は正解で、Edgeの表示が Chromeと同じ「旧絵文字」になりました。「\uFE0E」は、このブログを良くご覧になっている方は気付かれたでしょうが、何度もキラー要素として登場する「異体字セレクター」です。

しかしこのセレクターは、単に付け加えたら良いというものでは無く、上記の文字一覧の様なところから、文字コード例を得て、逐一試すしかないと思います。みんなこの絵文字のコントロールで苦労しています。

Esgeは解決と思ったらFirefoxも

何んなのでしょう。 Firefoxでは下の様なデザインになっていました。^^;

このアイコンをデザインするCSSは、スクリプト内で以下の様に指定しています。

#back_blog {
    font-size: 24px;
    padding: 4px;
    margin-left: 20px;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 6px;
    color: #fff;
    background: #2196f3;
    transform: scale( 1.4 , 1 ); }

太字の「transform」を追加すると、Firefoxも Chromeとほぼ同デザインに出来ますが、ユーザーエージェントを調べてFirefoxを別指定にする必要があり、手間なのでボツにしました。