UnicodeのU+0020とU+00A0( )は別物である

全部空白

Unicodeにはスペースが複数ありますが、その中でもU+0020とU+00A0の違いについてです。

HTMLでもよく使われる はU+00A0の方です。両者の違いは見ていただいた方がわかりやすいでしょう。

キーボード全角スペース
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
キーボード半角スペース
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
U+0020 (SPACE)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
U+00A0 /   (NO BREAK SPACE)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 

上記の結果からキーボードで入力されるスペースとUnicodeのU+0020が同じものであることがわかります。U+0020もU+00A0もスペースの幅は同じですが、U+00A0(&#nbsp;)は改行禁止スペースであるため、文字が枠からはみ出てしまいます。

 を使うと、見た目では単語は区切られていますが、実際には単語を区切ってはおらず、むしろ単語と同化するため折り返しが発生しません。

「スペースは入れたいけど折り返しはダメ」と言ったときに使うといいでしょう。例えばヘッダータイトルやサイドメニューのタイトル、フッターのコピーライト部分などに。

U+0020を文字で呼び出す場合は または で呼び出せます。CSSのcontentで使う場合はcontent:"\0020"と書きます。

Unicodeで呼び出せる空白

Unicodeを使うと色々な空白を呼び出すことが出来ます(使うかどうかと聞かれると微妙だけど)。まぁこんなのあるよ程度に覚えておいてもいいのではないでしょうか。最後のU+200Bと空白無しは少し文字数が多くなっています。

U+2002 /   (EN SPACE / n幅空白)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+2003 /   (EM SPACE / m幅空白)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+3000 (IDEOGRAPHIC SPACE / 全角空白)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+2004 (1/3 SPACE)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+2005 (1/4 SPACE)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+2009 /   (THIN SPACE / 狭い空白)
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
U+200B (NEGATIVE SPACE / ゼロ幅空白)
a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​a​
NO SPACE
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

​はゼロ幅なので見た目ではわかりませんが、スペースなので途中改行が許可されています。

日本語で試してみたところ変化が無いようですが、英数字の場合は<wbr>と近い動作をするかもしれません。

&#x200B;は<wbr>の代替えとして使用出来るのかとか考えてみた

結論から言うとNGです。

<wbr>はNN独自の要素でした。<br>の「改行する場所」とは異なり、「改行しても良い場所」というもので必ずそこで改行されるわけではありませんが、「変なところで改行されるよりはココで改行して欲しい」という改行候補になるものです。

※文字が「はみ出て困る!」という場合はCSSのword-wrapプロパティを使用します。

以下で&#x200B;の有無による変化を見てみます。a〜9までを2回繰り返し、1回目の終わりに&#x200B;を入れてみます(word-break:normal)。

&#x200B;ありの場合
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789​abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789​

&#x200B;なしの場合
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

<wbr>を使用した場合
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

一応、効果はあるようです(ブラウザによって表示が異なるかも)。

ただし、&#x200B;を使用すれば当然幅のない(見えない)空白が入ります。9とaをコピペしてみると間にソレがあることがわかります(テキストエディタでは半角スペースになる)。

URLでも当然同じようなことが起こりますのでURLが誤って伝わることになります。以下は同じURLに見えますが、片方はパスの前に&#x200B;が入っていますので実際には異なるURLです。

&#x200B;がある場合
http://mattintosh.blog.so-net.ne.jp/​unicode_u0020_u00a0

&#x200B;がない場合
http://mattintosh.blog.so-net.ne.jp/unicode_u0020_u00a0

このように、URLやメールアドレスでは使用しない方がいいでしょう。「見えないソレ」に翻弄されるかもしれません。手打ち専用のパスやスパム対策としては使えるかもしれません。

ちなみに<wbr>はHTML4.0.1では取り入れられていなかったのですが、HTML5で採用されるそうです。


以下を参考にさせていただきました。

Trackback