一部の絵文字が白黒の記号と表示される場合があります。
カラーの絵文字と思いきや白黒。
Text("\u2B06\u27A1\u2B07\u2B05\u2195")
直接コードに絵文字埋め込むと意図通りに表示される。
// ブラウザ上でもうまく表示されないものがある。
Text("⬆️➡️⬇️⬅️↕️")
コードはわかりやすく Android Jetpack Compose にしています。
IDEのエディター上からコード内に直接絵文字を書くことができる感じもありますが、編集時にイラッとすること多いので直接書きたくありません。
これは、デバイスやOSやアプリが使用しているフォントだけに依るものなのでしょうか。
私の端末では、白黒とカラー両方の矢印を見たような気がする。
➡️ 調べてみる
この記事。
👉 Emoji displayed as monochrome symbol? 🤔 The Unicode variation selector
まとめると以下。
一部の記号は、意図しない白黒、またはカラー絵文字として表示される。
Unicode Variation Selector を使うとある程度制御できる。
Unicode Variation Selector を使用しない場合はシステム次第。
絵文字ピッカーには Unicode Variation Selector が含まれないものもある。
Mac の絵文字ピッカーや Emojipedia は Unicode Variation Selector が含まれています。
Unicode Variation Selector には U+FE0E (VS15)と U+FE0F(VS16) が定義されている。
VS15 を追加すると白黒テキスト、VS16 はカラー絵文字が表示されます。
ここに挙げられている、Macの絵文字ピッカー (Control + Command + Space) でみると以下。右クリックで文字情報見れます。
⬆️
up arrow
Unicode: U+2B06 U+FE0F, UTF-8: E2 AC 86 EF B8 8F
⬇️
down arrow
Unicode: U+2B07 U+FE0F, UTF-8: E2 AC 87 EF B8 8F
➡️
right arrow
Unicode: U+27A1 U+FE0F, UTF-8: E2 9E A1 EF B8 8F
⬅️
left arrow
Unicode: U+2B05 U+FE0F, UTF-8: E2 AC 85 EF B8 8F
↕️
up-down arrow
Unicode: U+2195 U+FE0F, UTF-8: E2 86 95 EF B8 8F
⬆︎
UPWARDS BLACK ARROW
Unicode: U+2B06 U+FE0E, UTF-8: E2 AC 86 EF B8 8E
⬇︎
DOWNWARDS BLACK ARROW
Unicode: U+2B07 U+FE0E, UTF-8: E2 AC 87 EF B8 8E
➡︎
BLACK RIGHTWARDS ARROW
Unicode: U+27A1 U+FE0E, UTF-8: E2 9E A1 EF B8 8E
⬅︎
LEFTWARDS BLACK ARROW
Unicode: U+2B05 U+FE0E, UTF-8: E2 AC 85 EF B8 8E
⬍
UP DOWN BLACK ARROW
Unicode: U+2B0D, UTF-8: E2 AC 8D
同様に、以下からコピーした絵文字も Variation Selector きちんと入ってます。
👉 📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍
入ってないツールや絵文字サイトもありますので注意です。
➡️ 試してみる
String がどうなってるか拡張関数を作っておきます。
これを使って詳細見てみます。
"⬆➡⬇⬅↕".printUnicodeEscapeSequences()
"⬆︎➡︎⬇︎⬅︎↕︎".printUnicodeEscapeSequences()
"⬆️➡️⬇️⬅️↕️".printUnicodeEscapeSequences()
"⬆️".printUnicodeEscapeSequences()
"➡️".printUnicodeEscapeSequences()
"⬇️".printUnicodeEscapeSequences()
"⬅️".printUnicodeEscapeSequences()
"↕️".printUnicodeEscapeSequences()
結果。
⬆➡⬇⬅↕
\u2B06\u27A1\u2B07\u2B05\u2195
⬆︎➡︎⬇︎⬅︎↕︎
\u2B06\uFE0E\u27A1\uFE0E\u2B07\uFE0E\u2B05\uFE0E\u2195\uFE0E
⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F
⬆️
\u2B06\uFE0F
➡️
\u27A1\uFE0F
⬇️
\u2B07\uFE0F
⬅️
\u2B05\uFE0F
↕️
\u2195\uFE0F
➡️ まとめ
異体字セレクタ (いたいじセレクタ、英: Variation Selectors) は、Unicode および ISO/IEC 10646 (UCS) における、文字の字体をより詳細に指定するためのセレクタ (選択子) である。
矢印の場合カラー絵文字をある程度強制したい場合の Kotlin 文字列 Unicode 記述は、
「Unicode Variation Selector の \uFE0F (VS16) を文字シンボルの後につける。」
⬆️➡️⬇️⬅️↕️
\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F
Jetpack Compose で書くと以下。
Text("\u2B06\uFE0F\u27A1\uFE0F\u2B07\uFE0F\u2B05\uFE0F\u2195\uFE0F")
逆に、白黒にしたい場合は、\uFE0E (VS15) をつければよい。
別に、layout.xml だろうが strings.xml だろうが同じ。
あと、ちなみに、いつも話題に上がる国旗とか。
🇯🇵
\uD83C\uDDEF\uD83C\uDDF5
👨👩👧👧
\uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC67\u200D\uD83D\uDC67
なげえ。
