Android の Chrome で コピーライト (©) や 円マーク (¥) などが文字化けする (正しく表示できない) 原因と対処法

Android の Chrome では言語コードが正しく指定された HTML文書 において、一部の文字が正しく表示されないことがあります。これは Android の Chrome のバグのようです。理想的な問題解決法は Chrome のバグ修正ですが、すぐに修正されるとは限りません。残念ながら、言語コードの指定をなしにすることがこの問題への対処法ということになります。

Android の Chrome で正しく表示できない文字の一例

以下の文字は Android の Chrome で正しく表示されない恐れがあります。
その場合、ただの四角形 (■) などとして表示されることでしょう。
※一例なので他にもあると思います。

© © コピーライト
㈳ 括弧付きの社
㈪ 括弧付きの月
㈫ 括弧付きの火
㈬ 括弧付きの水
㈭ 括弧付きの木
㈮ 括弧付きの金
㈯ 括弧付きの土
㈰ 括弧付きの日
¢ ¢ セント
£ £ ポンド
¥ ¥ 円マーク
‚ シングルクォート (引用符)
„ ダブルクォート (引用符)
« « ダブルクォート (引用符)
» » ダブルクォート (引用符)
µ µ マイクロ
◊ 菱形
¦ ¦ 縦破線
¬ ¬ 論理否定

文字の指定方法が何であれ正しく表示されない恐れがあります。
例えば、『円マーク』を直接アスキー文字 (¥) で記述しても、
あるいはエンティティ参照 (¥) で記述しても結果は同じです。

実際にどのように表示されるのか、
以下にスクリンーンショットで3例を挙げます。

langAttrBug_PC
上図はパソコン (MacBook Pro、OS X 10.9.5、Google Chrome 41.0.2272.101) での表示です。
全ての文字が意図通りに表示されています。

langAttrBug_Nexus5
上図はスマホ (Nexus 5、Android 4.4.4、Google Chrome 32.0.1700.99) での表示です。
ほとんどが化けていますし、マイクロは表示されていません。

langAttrBug_Nexus9
上図はタブレット (Nexus 9、Android 5.0.1、Google Chrome 38.0.2125.509) での表示です。
ほとんど正しく表示されていますが、マイクロは表示されていません。

なお、Chrome で『PC版サイトを見る』にチェックを
入れても、文字の表示状況はかわりません。

なぜ文字化けするか

Chrome のバグのようです。
以下のように、html要素の lang属性で
言語コードを日本語に設定すると不具合が生じます。
※日本語に限らず漢字圏の言語コードを指定すると不具合を生じる可能性があるようです。


<html lang="ja">

もちろん、上記の記法は正しいものです。
また、言語コードや国コードの記載は
検索エンジンや音声合成に役立つという点で
望ましいものでもあります。

しかしなら、Chrome のバグを考慮すると
上記の記載を取りやめることがそのまま対策となります。

OS は Android 4.0 と 4.4、
Chrome は 32 と 34 で試したところ、
正しい表示は得られませんでした。
パソコン (Windows、Mac) や iOS における
最新の主要ブラウザでは正常に動作します。

Android の Chrome のバグ修正が一番望ましいです。
ですが、いつ修正されるのかが分からないことと、
様々な OS と Chrome のバージョンが利用されていることを考えると
残念ながら正しく言語コードを指定することをやめることが
最も簡単で確実な解決方法になると考えられます。

おまけ: なかなか修正されないバグ

HTML に download属性というものがあります。
例えば、予期しないアクセスの簡易な防止策として、
実際のファイル名 (URI) を ajh8gEhu.pdf
のような無意味な文字列とするとき、
ここで download=”レポート.pdf” と記述することで
ダウンロード時のファイル名を指定できるというものです。

Chrome のバージョンアップ時に download属性がデグレードし、
正常に機能しなくなったときのことです。
不具合そのものは早々に報告されたのですが、
なかなか修正が反映されず、
私などはその存在をすっかり忘れてしまうほどでした。
といいますか、今思い出しました。
もう修正済だと良いのですが……。

バグが意外に長く生き残ることもあります。

根本的にバグが修正されたとしても
その修正版が広く利用されるとは限りません。
携帯電話会社と組み合わせて利用する機器の場合、
諸事情によってバージョンアップできないことがあります。
また、ユーザ側でバージョンアップを見送ることもあります。
バージョンアップで使い勝手がかわる可能性があるため、
これを避けるために旧バージョンを継続利用するからです。

そのような訳で、バグは意外としぶとく生き残ることがあります。

おまけ: 「&nbsb;」が「・」になることもある

フォントの指定によっては Android の Chrome で
「&nbsb;」が「・」になることもあるらしいです。

そんな時、一番良い対処方法は
余白を文字で表すのはやめて CSS で指定することです。
間に合わせ的な対処方法はフォント指定を変更するか、
&nbsb; のかわりに  、 、  を使うことです。

&nbsb; は半角スペースではなく、
一見して同じように見える空白的文字は幾つもあります。
間に合わせ的な対処方法では、いずれにせよ
見た目は多少異なってきますが、お手軽です。

Android版Chromeで「&nbsb;」が「・」になってしまうChromeバグのWordPressでの対策方法
WordPress でこの問題にお困りの方は上記のWebページが参考になります。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*