9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

un-T factory! XAAdvent Calendar 2017

Day 7

Android版ChromeでHTML特殊文字が正常に表示されない場合の解決策

Last updated at Posted at 2017-12-07

un-T factory! XA Advent Calendar 7日目の記事です。

現象

Webページ上で著作権記号(©)や商標記号(®, ™)を表示させようとした際、Android版Google Chromeにおいて

  • colorfont-weight などのCSSプロパティが無効になる
  • 絵文字として表示されてしまう

など、意図した表示結果にならない場合があります。

qiita_shouchida_171207.png
(著作権記号のみ、CSSのcolor指定が無効になっている状態)

発生条件

検証を進めた結果、どうやら下記の条件が重なった場合にこの現象が発生するようです。

条件1. <html> 要素の lang 属性に ja が指定されている。

HTML
<html lang="ja">

条件2. テキスト領域に有効な font-family が指定されていない(sans-serif などキーワード指定のみの場合もNG)。

解決策

インターネット上では「html 要素の lang 属性を en にすれば良い」といった解説記事が散見されましたが、そうすると「そのページ全体が英語の文書である」と宣言することになってしまい、ブラウザの挙動などに影響が出る可能性がありそうです。

lang 属性は html 要素以外にも指定可能なので、以下のように特殊文字の部分だけを lang="en" と指定し直すことで表示不具合を回避できます。

HTML
<span lang="en">&copy;</span>

最も手っ取り早いのは「有効な font-family を指定する」ことですが、CSSの変更権限がないなど何らかの事情でそれが出来ない場合には上記の対応が無難ではないかと思います。

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?