Web、サーバ、ソフトウェア、バグ・脆弱性 などの情報を何人かで集まって書いていく IT/Web情報系ブログ

【STINGER5】AndroidのChromeで が「・」になってる気がする

投稿日:   最終更新日:2016/02/08  投稿者:ktm@s

全く未検証な話だけど、手持ちのDIGNO DUAL2でこのサイトの表示確認をすると、どうも「 」が「・」として表示されているような気がする。

先日までこうだったようには思わない。
寝起きで条件の確認などもしていないが、Android+Chrome iOS+Safari Windows7+Chrome の環境でだけさっと表示確認し、やはりおかしいということになった。

Android+Chromeで表示した「ビビビッ」

シンプルなhtmlで書かれたページで をいくつか入れてみたが、問題の Android4.2.2 + Chrome40.0.2214.89 環境でも普通に半角スペースが表示された。

なお、本記事は初期投稿時点では原因を探っていない。
「STINGER5で」という前提で解決だけしている。

確認環境による違い

Android4.2.2+Chrome40.0.2214.89

 が「・」になっている。

Android+Chromeで表示した「ビビビッ」

当サイトではカスタマイズしたCSSやプラグインの影響で何かおかしくなっている可能性がある。
そこで、配布サイトの STINGER5 ページを調べた。

こちらもやはり が「・」になっている。

STINGER5公式サイトの表示確認

Windows7 64bit+Chrome40.0.2214.93m

レスポンシブデザインとなっているが、PC・タブレット・スマートフォン用の各サイズで は半角スペースとして表示される。

iPhoneOS7.0.2+Safari9537.53

 は半角スペースとして表示される。

iPhone5+Safariでの表示確認

スポンサーリンク

おかしいのはどこか

検証もしてないのにこんな項目が居るのか?
今後検証して追記する。

テーマがおかしい場合

例えばシンプルなhtmlのページに以下のように書いても同様の現象は起きなかった。

<p>
&nbsp;hogehogehoge&nbsp;piyopiyopiyo
</p>

よって、WordPressやテーマがおかしいとする場合には、どういう条件で発生するのかじっくり検証する必要がある。

Chromeがおかしい場合

PCのChromeでスマートフォン向けの表示で見たとき、同様の現象は確認されていない。

AndroidのChromeがおかしいとする場合には、&nbsp;が使われた別のサイト上で同様の現象を確認する必要がある。

2015/02/15 追記
Chromeがおかしいと言うことで間違いないようだ。

俺の頭がおかしい場合

2015/01/30 追記
投稿から2日経ってやっと記事を見直しているが、俺の頭がおかしい可能性もある。
何せ俺の目にしか見えないので。

そもそも&nbsp;は半角スペースではない

ノーブレークスペース(NBSP)

&nbsp; は半角スペースをレンダリングするが、その為に存在しているわけではない。
実際には、英文の途中などでこのスペースでは改行したくない時に使うものとなっている。

半角スペースを入れるときは&nbsp;だ!と昔どこかで見たことがあるが、厳密には間違っているようだ。

確かに日本語の文章でスペースが入るような時にはどこで改行されても文章に違和感はでない。
よって、そもそも半角スペースを挿入したいが為に&nbsp;を使っている事自体が避けるべき事なのだ。
と言うことを以下の記事が判りやすく説明していた。

&nbsp; は半角スペースではないというお話

(これで解決)ではスペースを入れたいときは?

&ensp;(n の字幅分のスペース)とか、&emsp;(m の字幅分のスペース)を使う。
細い空白には&thinsp;を。

STINGER5の&nbsp;を&ensp;に置換したが、解決した気がする。
単に&nbsp;を半角スペースに置換したり、取っ払ってもよい。

2015/01/30 追記
ただし、STINGER5がおかしいとは思わない。
自分の環境で「・」を消す為にとりあえず置換してみたが、そもそもおかしな使い方はされてないと思うので、上記の置換はやめたほうがいいな。

(恐らく正しい解決)font-family:Helvetica;

2015/02/08 追記
コメントにて良さそうな解決方法を頂いた。

body{ font-family: Helvetica; }
で回避出来ました。
(※bodyにしていますが、該当部分で問題無いと思います)

Android4.1.2や4.4.2でも出ていましたので、
おそらくChrome 40.0.2214.89(現在の最新版?)のバグだと思いますが・・・。

これで直るとなると、やはりChrome側の問題のようだね。
自分の環境でもこれで解決した。

あとがき

&ensp;で解決したが、原因はサッパリわからん。

特に検索をかけてもいないし検証もしていないが、ひとまず「・」になる問題は解決してしまった。
また時間がある時にでも検証したいと思う。

というかぐぐったらとっくの昔に答えがある可能性……。

2015/01/30 追記
無かったことウェーブ する事にした。
何事も何事も無かったことになるのだ。

いずれ、あの時のアレはああだったんだ!となると思うのでこの記事はこのまま晒し首にする。

2015/02/08 追記
コメントで教えて頂いた方法が今のところ一番いい感じに解決しそう。
Chrome側が修正してきそうな気もするのでしばらく静観したい。

2015/02/15 追記
本件はコメントで頂いた font-family: Helvetica; がパッチ的対応としてはベストだろう。
GoogleChrome側がおかしいという事で近いうちに修正されるのではあるまいか。

修正を確認したらこの記事に追記する。

- テーマ , ,

Comment

  1. 中村 より:

    初めまして!

    自分も同じ事が発生して、たどり着きました!

    アンドロイドのバグなんでしょうかね~?・・・

    • ktm@s ktm@s より:

      やはりChromeの問題っぽいですね。
      コメントで良さげな対処方法を教えていただき解決していますので試してみてください。

  2. 名無しさん より:

    はじめまして。

    body{ font-family: Helvetica; }
    で回避出来ました。
    (※bodyにしていますが、該当部分で問題無いと思います)

    Android4.1.2や4.4.2でも出ていましたので、
    おそらくChrome 40.0.2214.89(現在の最新版?)のバグだと思いますが・・・。

    根本の解決にはならないと思いますが、参考までに。

    • ktm@s ktm@s より:

      対処方法を教えていただきありがとうございます。
      Chromeの問題でいずれ修正される事を考えると、暫定ではベストな対処方法な気がします。
      とても参考になりました。

  3. […] 【STINGER5】AndroidのChromeで&nbsp;が「・」になってる気がする […]

  4. […] 参考 【STINGER5】AndroidのChromeで&nbsp;が「・」になってる気がする | ビビビッ […]

  5. […] 【STINGER5】AndroidのChromeで&nbsp;が「・」になってる気がする | ビビビッ […]

Message

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

関連記事

関連記事はありませんでした