Developer's Blog

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

2011-06-27_nbsp_emacs.png

 

こんにちはこんにちは! エンジニア川端です。
たまには目で見てわかるネタも披露したいので、今日は HTML の話です。

 

「HTML だと半角スペースは   だよ」

 

というようなお話は未だにあちこちで耳にします。まぁ、私も十数年前はそう思ってたわけですが、「nbsp ってどういう意味よ?」と思って調べ始めたら、いろいろと勉強になりましたよ、と。
最近ふと思い出したので、ちょっとそのお話を。

 

そもそも   の「nbsp」って何? ということなんですが、「Non-Breaking SPace」の省略なんですね。よくわからないですが、英文とかで「ここの空白では改行したくない」という時に使うのだそうです。

 

同じような特殊な「スペース」は他にも「  (n と同じ幅のスペース)」や「  (m と同じ幅のスペース)」等あるようで、実際の見た目がどうなるのか、ちょっと比較してみました。

 

HTML での表記 UTF8 サンプル 説明
文字/文字実体参照 数値文字参照 (Unicode)
10進表記 16進表記 16進表記
|| 空白なし(比較用)
    0x20 | | 普通の半角スペース
      0xC2A0 | | そこでは改行しないスペース
      0xE28082 | | n と同じ幅のスペース
      0xE28083 | | m と同じ幅のスペース
      0xE28089 | | 細い空白
n/a ​ ​ 0xE2808B |​| ゼロ幅スペース
      0xE28080 | | 表意空白(いわゆる全角スペース)

 

いかがでしょう? WEBブラウザにもよりますが、結構実際の見た目も違うように思います。

 

で、冒頭の「半角スペースと  」の件ですが、ちゃんと意識しておかないと「あれ?」と思うことがあります。
「  を半角スペース (0x20) に置き換える」プログラムがあるように、「  を半角スペースに置き換えず、nbsp (0xC2A0) に置き換える」プログラムもありますから、WEB ブラウザのように 0xC2A0 を表示できる場合はいいですけど、表示できないプログラムだと困りますよね。
冒頭の画像は、わが愛するテキステエディタ Emacs だとこんな感じになります、というサンプルでした

 

おまけとして、  を 0xC2A0 に置き換える例を。雰囲気をお楽しみください。

2011-06-27_nbsp_perl.png

 

use HTML::Entities;
use Encode;
use Data::Dumper;
my $text = Encode::decode('utf8', '| | | |');
HTML::Entities::decode_entities($text);
my $encoded = Encode::encode('utf8', $text);
print $text,"\n";
print Dumper $text;
print $encoded,"\n";
exit;

 

あんまし目で見てわかるネタでもなかったですね。見た目にごまかされずにちゃんと内容を考えよう、というお話でした。

 
参考URL:

 

Twitterフェンリルのオフィシャルアカウントをフォローする

Facebook コメント

コメント

MACin脳2011年06月28日 15:28

今日のブクマか。

黄金比出せる web計。 Jsfiddle javascriptエディタ Create a new Fiddle - jsFiddle - Online...

HTMLでの空白文字表示について2015年06月03日 9:39

[…] ※参考サイト ・HTML内で用いる実体参照による「空白(スペース)」の種類。|Webディレクター視点で語るWeb制作・開発Tipsブログ【Labs to Web】 ・All About Web上で使えるスペース(空白文字)いろいろ ・  は半角スペースではないというお話 […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。