9

環境
OS: OSX El Capitan 10.11.6
Safari: 9.1.2 11601.7.7
Chrome: 55.0.2883.95 64-bit
https://codepen.io/technuma/pen/BpBRjZ

<h1>ᙏ̤̫ rabbit ᙏ̤̫</h1>

文字コード: UTF-8
表示したい文字: ᙏ̤̫
上のcodepenをMac

・ safari で開く場合
 正常に見える
画像の説明をここに入力

・ chrome で開く場合
 文字化けする
画像の説明をここに入力

という状態です。

どうしたら解消できますでしょうか。

4
  • 6
    ブラウザの挙動はOSやバージョンによって変化することがありますから、検証したOSやブラウザのバージョンを記載してください。またあなたが期待するものと、それがどう化けているのかがはっきり伝わるように、スクリーンショットも載せていただけるとわかりやすいと思います。
    – unarist
    Commented 2017年1月1日 8:06
  • 1
    僕の環境では再現できず(Chrome/Firefox/Vivaldi on linux),一口に「文字化け」と広く呼ばれるものの中にはエンコーディングが間違ってる(多分本来の)文字化けとか,フォントが対応できてない時の豆腐とか,色々あって問題になっている状況がわからないので,スクリーンショットがあるとだいぶありがたいです.
    – Yosh
    Commented 2017年1月4日 2:24
  • 1
    それぞれ追加しました、ありがとうございます
    – technuma
    Commented 2017年1月4日 15:25
  • なるほど、兎に見えるのですね。私の環境ではまた別の合成のされ方をしているので、豆腐にもならず、兎にもならずです。ちなみに兎の絵文字もあるようです。🐰 🐇
    – mjy
    Commented 2017年1月4日 15:42

2 件の回答 2

18

あなたがタイトル中に含められている文字(本文中のリンクは補助的な情報に止めるようにして、リンク先を見なくても質問が意味を成すようにしてください)は次の3つのUnicodeコード値からなる合成文字です。

U+164F CANADIAN SYLLABICS CARRIER SO

U+0324 COMBINING DIAERESIS BELOW

U+032B COMBINING INVERTED DOUBLE ARCH BELOW

環境依存で読めない場合があることはわかっているのですから、質問の本文中では(せめてソースを確認してくれた人には)文字コードがわかるように記載した方が良かったでしょう。

ᙏ̤̫

&#x164F;&#x0324;&#x032B;

このような非標準の合成文字がどのように描画されるかと言うのは完全に環境依存で、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;
  }
<span class="first">&#x164F;</span><span class="second">&#x00A8;</span><span class="third">&#x23D6;</span>

(もっとうまいやり方はありそうですが、こんなものを記載した意図としては、「ここまではやりたくないよね」なので、こんなもんで。)

要はMacやiOSでは普通に入力・表示できる絵文字の一部がWindowsでは表示できないのと同じ理屈です。同じMacなのにSafariとChromeで動作が異なるのは、HTMLのレンダリングでは通常のテキスト描画エンジン丸々は使えないため、ブラウザだけの独自処理を行っている部分があるせいでしょう。(Chromeでもシステム側にテキスト表示を丸投げしているらしいタイトル部分では正常に表示されていますから。)

環境非依存にしたいのなら、合成文字は使い物にならないと覚えておいた方が良いでしょう。

1
  • 質問内容を編集しました、ありがとうございます 合成文字の解析までやっていただいて感謝しております。 たしかにここまでは実装したくないと感じました...
    – technuma
    Commented 2017年1月4日 15:23
0

何語の文字なのでしょうか? Noto Sans JapaneseHiragino Kaku Gothic ProMeiryoMS PGothic等のフォントが指定されていますが日本語の文字ではないはずです。日本語で質問するよりも適切な言語で質問すべきです。
文字を不適切に図形のように扱うのであれば、それが意図通りに表示されないことは文字化けではなく力不足ということになります。

最近ではWebフォントを自作してみるのように図形をフォント化し、作成したWebフォントをブラウザーに読み込むことで意図した図形を表示することもあります。
The Iconsのようによく使われる図形が既にフォント化され公開されている場合もあります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。