atsukanrockのブログ

Microsoft系技術を中心にぼちぼち更新します

HTMLの空白文字(white space characters)とハイパーリンク(タグ)

はじめに

HTMLの仕様『HTML 4.01 Specification』で、「空白文字」(white space characters)として扱ういくつかの文字が定義されている。空白文字について注意すべき点として、以下が挙げられる。

ブラウザごとの空白文字の表示を調査したので、記録する。

仕様がどうなっているか

空白文字については、『Paragraphs, Lines, and Phrases - 9.1 White space』がその一次情報だが、このページは英語をしっかり読まないと誤解しやすい記述となっている。日本語でわかりやすく記述してあるページとしては、『強調,引用,グループ化,画像などの要素 -- ごく簡単なHTMLの説明』の「HTMLにおける空白の扱い」がある。以下にその記述を引用する。

HTMLにおいては、スペース文字(0x20)、水平タブ(0x09)、行送り(0x0A)、リターン文字(0x0D)、改ページ(0x0c)およびUnicodeの幅なしスペース文字(0x200B)が「空白文字」(white space characters)として定められています。

pre要素を除く全ての要素において、一続きの空白文字はその前後にある「単語」の境界を示すものとして扱われます。ブラウザは、ページを表示するに際してその環境(使用している言語や出力対象メディア)にふさわしい形で「単語境界」を取り扱うように求められています。

単語の境界は、英語などでは通常スペース文字に相当するので、多くのブラウザでは改行やスペースがあるとそれを「1つのスペース文字」に置き換えて表示します。

調査内容

以下を調査する。

(1) ブラウザごとに、どの文字が空白文字として扱われるか

空白文字として扱われるかどうかを調査する文字は、以下に挙げる文字とする。

  • 制御文字(U+0000〜U+001F)
  • 半角スペース(U+0020)
  • ZERO WIDTH SPACE(U+200B)
(2) テキストが空白文字のみのリンクが、表示されるか(押下することができるか)

調査結果

(1) 空白文字のブラウザごとの扱いは以下のとおり(表にしたいけど時間がない!!)

[Win IE 6.0]
(空白文字)ZERO WIDTH SPACE(U+200B)を空白文字として扱わない(図1)。それ以外は空白文字として扱う
(空白文字でない文字)U+0000(NUL:NULL文字)、U+000B(VT:垂直タブ)を空白文字として扱う。それ以外を空白文字として扱わない
[Win IE 7.0]
(空白文字)全てを空白文字として扱う
(空白文字でない文字)Win IE 6.0と同じ
[Win Firefox 3.05]
(空白文字)全てを空白文字として扱う
(空白文字でない文字)IE 6.0と同様の文字に加え、U+001C(FS:フォーム区切り)、U+001D(GS:グループ区切り)、U+001E(RS:レコード区切り)およびU+001F(US:ユニット区切り)を空白文字として扱う。それ以外を空白文字として扱わない
[Win Opera 9.63]
全ての文字について、Win Firefox 3.05と同じ
ただし、U+000B(VT:垂直タブ)を他のブラウザにはない感じで表示する(図2)
[Win Safari 3.1]
全ての文字を、空白文字として扱う(図3)
[Mac Safari 2.0]
全ての文字を、空白文字として扱う(Win Safari 3.1と同じ)

(2) 全てのブラウザで、テキストが空白文字のみのリンクは表示されず、押下できない

キャプチャ

各ブラウザでの表示のうち、特徴的な箇所のキャプチャを添付する。「リンクが表示されず、押下できない」とはどういうことかのイメージとしても、添付している。なお、Win IE 7.0、Win Firefox 3.05については特に特徴的な箇所がないため、添付していない。
20090127215937
図1 Win IE 6.0‥ZERO WIDTH SPACE(U+200B)に未対応
20090127215938
図2 Win Opera 9.63‥U+000B(VT:垂直タブ)の表示がユニーク
20090127215940
図3 Win Safari 3.1(Mac Safari 2.0も同様)‥全ての文字が空白文字として扱われる