連続する半角スペース

　今年12月に上演されるmiel（ミエル）の公演タイトルは
「こ こ  ち   り」
で、文字の間に半角スペースが１個２個３個入っています。ところがこれをホームページ上で普通に表示しようとすると、元のファイル上ではちゃんと
「こ こ  ち   り」
になっているにも関わらず、ブラウザ上では
「こ こ ち り」
と、半角スペースが１個ずつになって表示されてしまいます。この現象は、「連続する半角スペースは最初のひとつしか認識されない」というHTMLの仕様が原因です。このような仕様になっている理由は知りません。

　連続する半角スペースを表示させるには、文字参照を使います。文字参照の意味については下記を参照してください。
Wikipedia : 文字参照

　半角スペースの文字参照は です。これはノーブレークスペースのことなので厳密には違うものですが、表示上は同じと思っても問題ありません。そこで、ファイル上に
「こ こ  ち   り」
と記述するのではなく
「こ こ  ち   り」
と記述しておけば、ブラウザ上で正しく表示されるはずです。HTMLを直接編集する場合や、多くのブログやSNSではこれで大丈夫と思われます。私がHTMLを書いている東京の小劇場スケジュールや、Seesaaブログ（このブログ）、mixiでは大丈夫でした。

　しかし、うまくいかない場合もありました。よりによってそれは、CoRichでした。CoRichでは、 と入力しても半角スペースにはならず、そのまま表示されてしまいます。

　 が半角スペースに変換される場合に「 」という文字列そのものを表示させたい場合はどうすればいいでしょう？　文字参照は必ず「&」で始まって「;」で終わるので、最初の「&」自体を文字参照で表現してやると、全体は文字参照とは扱われずそのまま表示されます。「&」を表す文字参照は「&」です。ややこしいですが、
「 」
と表示したい場合は、
「 」
と記述しておけば良いのです。

　CoRichでうまくいかない理由がここにあります。ユーザーがサイト上で「 」と入力した場合、Seesaaブログやmixiはそのままの形で出力するのでブラウザ上で文字参照として解釈されます。ところがCoRichは親切にも自動的に「 」に変換してしまうのです。

　文字参照を考慮した上で入力された通りに表示するのですから、それこそが正しい仕様とも言えますが、残念ながら半角スペースは半角スペースのままで、 に変換してくれるわけではありません。だから連続する半角スペースはひとつにまとめられてしまいます。そのため、現状では
「こ こ  ち   り」
を正しくCoRich上で表示させる方法が見つかりませんでした。

　ちなみにmixiの場合、マークアップに使われる「<」と「>」はそれぞれ「&lt;」と「&gt;」に変換されますが、「&」はそのままで変換されません。CoRichでは「<」「>」の他、「&」と「"」もそれぞれ「&amp;」と「&quot;」に変換されるようです。これらに加えて半角スペースを&nbsp;に変換してくれれば解決するので、これはCoRichのプログラマの対応を期待したいと思います。

　もっと厄介なのがTwitterで、ブラウザで表示した場合とクライアントで表示した場合では同じツイートが違う表示になってしまいます。これを解決するのは相当難しそうですが、できれば改善してほしいものです。

　余談ですが、このエントリのソースはすごいことになってます(^^;;

Comments

演劇系ではめずらしい話題なので、コメントさせていただきます。

これは公演データベース中で、過剰な文字参照変換が動いているように思います。誤動作しないよう、徹底的に「&」「"」を変換するよう書かれているのでしょう。Myメニューの自己紹介のような公演データベースと違う項目では、半角スペースの文字参照は有効でした。

正しくはありませんが、見た目だけなら全角スペースを組み合わせるのはどうですか。

半角スペース2個　→　全角スペース1個
半角スペース3個　→　全角スペース1個＋半角スペース1個

Posted by 荻野達也 at 2010年11月03日 17:45