letter-spacingをマークアップする際の注意点

body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。

今までは、

	/*\*/
	letter-spacing: 0.1em;
	/**/

というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグをホーリーハックで防いでいました。

基本的にはこれさえ守っておけば、うまく表示されるはずなのですが、最近作ったブログではコードによっては、うまく表示されませんでした。改行しているはずの箇所が、全く改行されていない。それもWinIE6のみ。てっきり、MacIEさえ気をつけておけばOKというわけではなくて、WinIEにも配慮しなければならないよう。

では、何が問題だったのかと言いますと、br要素による改行なんですね。WinIEには「letter-spacingを指定した要素内で連続したbr要素が無視される」というバグがあり、これにものの見事に引っ掛かっていました。

「でも、なんでそんな改行を入れるわけ？はじめからp要素に対してmarginを指定しておけばいいじゃない」と思われている方、僕もそういうふうにコードは書いていました。ただし、そのブログは僕が運営しているのではなく、pとbr要素の違いを知らない人なのです。

つまり、運営者（僕ではない）は改行をしたいとすると、p要素を書き込むのではなく、エンターキーを何度もタイプする。結果、ブログのシステムによっては、エンターキーをp要素として解釈するのではなく、br要素として解釈する。そして、WinIE6で見事にはまる。そんなことになっていました。

それの対策は結構簡単で、

br {
	letter-spacing: 0;
}

という1行で済みます。WinIE6や5だけに読み込まそうかなとも考えてはいるのですが、br要素の特性を考えると、それは必要ないかなと。

そこで、前述のbody要素と兼ね合わせて、

body {
	/*\*/
	letter-spacing: 0.1em;
	/**/
}

br {
	letter-spacing: 0;
}

という形で読み込ませておけば、エンターキーによる改行をbr要素として解釈してしまうブログシステムでも対応できるわけです。

また、今回の話とは関係ありませんが、letter-spacingを使う際、WinIEには「em単位で指定した字間をbody要素の文字サイズを基準に算出する」というバグもありますので、html要素やbody要素にはfont-sizeを指定しないほうが適切だと思います。この話は、「付録：テキスト関連のプロパティ対応状況 - CSS2リファレンス」にも詳しく書いてあります。