Unicode9.0 以降の複雑な符号化における letter-spacing トラップ
はじめに
どうも、最近レンタルしたレディプレイヤー１が面白すぎて購入を検討しているけんつです。
最近、Webにおいて圧倒的に面倒な絵文字対応について色々と考えているところなのですが
もろもろ対応していると不可解な現象とその原因がわかったので少しだけまとめます。
問題
Unicode9.0以降で絵文字で肌色が選択できるわけなのですが、あれをWeb上で表示させるときに何故か
以下の様に絵文字が 本体＋スキントーンの形式に分離してしまう問題が発生していた。
しかもスキントーンは色が四角くなって出てきてしまい、初見ではこれが一体何なのかわからなかった。
実際はスキントーン以外でも、国旗や複数人がひとつの絵文字に存在するような場合には同様に分離してしまう箇所がいくつかあった。
そして、なぜか場所によっては正常に表示されている部分もあった。
原因
肌色や複数のコードポイントにまたがって表現される絵文字は以下のような形式を取っている
U+1F466 U+1F3FE
このように結合文字列としてひとつの絵文字を表現しているのだ。
そのため、 letter-spacing が使用されていると本来ひとつの絵文字として表現されているものが
U+1F466 と U+1F3FE に分離してしまうといったものだった。
終わりに
知らんがな。
