質問: 環境 OS: OSX El Capitan 10.11.6 Safari: 9.1.2 11601.7.7 Chrome: 55.0.2883.95 64-bit ``` ᙏ̤̫ rabbit ᙏ̤̫ ``` 文字コード: UTF-8 表示したい文字: ᙏ̤̫ 上のcodepenをMac ・ safari で開く場合 正常に見える !画像の説明をここに入力 ・ chrome で開く場合 文字化けする !画像の説明をここに入力 という状態です。 どうしたら解消できますでしょうか。
回答: あなたがタイトル中に含められている文字(本文中のリンクは補助的な情報に止めるようにして、リンク先を見なくても質問が意味を成すようにしてください)は次の3つのUnicodeコード値からなる合成文字です。 > > U+164F CANADIAN SYLLABICS CARRIER SO > > > U+0324 COMBINING DIAERESIS BELOW > > > U+032B COMBINING INVERTED DOUBLE ARCH BELOW > > > 環境依存で読めない場合があることはわかっているのですから、質問の本文中では(せめてソースを確認してくれた人には)文字コードがわかるように記載した方が良かったでしょう。 ᙏ̤̫ ↑ `ᙏ̤̫` このような非標準の合成文字がどのように描画されるかと言うのは完全に環境依存で、Mac版のChromeのように豆腐が3つ並ぶ場合もあるでしょうし、合成されずに3つの字型が横に並ぶこともあるかもしれません。 どうしても、3つの文字を使って絵文字風の文字を(環境非依存に)表示したいのであれば、合成文字を使わずに別々の文字として記載した上で、CSS等を使って意図的に重ね合わせないといけないでしょう。 ``` span.first { display: inline-block; position: relative; top: 0; left: 0; width: 1.2em; height: 1.5em; text-align: center; vertical-align: baseline; } span.second { display: inline-block; position: relative; top: 0.8em; margin-left: -1.2em; width: 1.2em; text-align: center; vertical-align: baseline; } span.third { display: inline-block; position: relative; font-size: 50%; margin-left: -2.4em; top: 1em; width: 2.4em; text-align: center; vertical-align: baseline; } ``` ``` ᙏ ̈⏖ ``` (もっとうまいやり方はありそうですが、こんなものを記載した意図としては、「ここまではやりたくないよね」なので、こんなもんで。) 要はMacやiOSでは普通に入力・表示できる絵文字の一部がWindowsでは表示できないのと同じ理屈です。同じMacなのにSafariとChromeで動作が異なるのは、HTMLのレンダリングでは通常のテキスト描画エンジン丸々は使えないため、ブラウザだけの独自処理を行っている部分があるせいでしょう。(Chromeでもシステム側にテキスト表示を丸投げしているらしいタイトル部分では正常に表示されていますから。) **環境非依存にしたいのなら、合成文字は使い物にならない**と覚えておいた方が良いでしょう。