文字コード “0xC2 0xA0” の罠

WordPressのテーマをプチカスタマイズするには「追加CSS」が便利ってことで、嬉々としてコード書いてたんだけど、なぜだかうまくいくときと、いかないときがあって、情報を整理していくとこんな奇怪な結論に至った。

    text-transform: none;  →  OK
    text-transform: none;  →  NG

なんじゃこりゃ?どこが違うん?わけわからん!
でも、何かが違うんよね?違いがあるとしたら、スペース?
えっと、バイナリエディタが必要!?(あら久しぶり! うん十年ぶり?)
いやエディットの必要はないか、見られりゃいいんだ。

最近使い始めたテキストエディタ「Visual Studio Code」にバイナリデータ読むための拡張機能があったので、それ使って調べてみた。結果は以下の通り。

上下それぞれの行頭にあるのは半角スペース4つ、のつもりが、NGのパターンでは違うものが紛れ込んでた。

0x20 0x20 0x20 0x20
0x20 0xC2 0xA0 0x20 0xC2 0xA0

“0x20″は普通の半角スペース、”0xC2 0xA0″は「ノーブレークスペース」と呼ばれるものらしい。

ノーブレークスペース – Wikipedia

そもそもオレはそんなややこしいもの入れてくれと頼んだ覚えはない。
Chromeのデベロッパーツールで表示させた該当CSSコードを、SafariのWordPressカスタマイズ画面にコピペして、該当パラメータの値を修正しただけ。試しにChrome上で同じことやったらちゃんとうまくいく。ってことは、

Safari!! お前か!?

この動画はその証拠。半角スペース2つまではそのまま。3つ続けると、真ん中の半角スペースを勝手にノーブレークスペースに変換しやがる。罠だ!これは罠だ!!何故 Safari はこんないらんことをしよるのか?理由が知りたい。

結論:WordPressのカスタマイズはChromeで。

コメントを残す