読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

text-transformから見るブラウザのレンダリングの違い

Web標準

実際のコーディングではほとんど役立つことはないと思いますが、text-transformを用いていると、UAの違いというのが浮き彫りになったりします。


例えば、XHTML 1.0 Strictで次のようなコードを書いたとします。

<ul>
	<li>google com</li>
	<li>グーグル.com</li>	
	<li>google.com</li>
	<li>google .com</li>	
</ul>
 * {
	margin: 0;
	padding: 0;
}
ul {
	width: 10em;
	margin: 1em 0 0 1em;
	padding: 0 0 0 2em;	
	border: 1px solid #FF6600;
}
ul li {
	text-transform: capitalize;
}

ローカルナビゲーションにありうるようなコードですが、これを各UAで表示させるとこんな感じになります。


Win Firefox 2.0.0.4

Win Opera 9.02

Win IE 7

Win Safari 3.0(試験ですけど)


注目してほしいのは、「com」の部分。ここが大文字になるかどうかが違います。FirefoxOperaは一番上のものだけ「c」が大文字に、IEとSafariは全て「c」が大文字になっています。


仕様書を確認してみる


CSS2.1の仕様書では、text-transform: capitalize;を次のように説明しています。

Puts the first character of each word in uppercase; other characters are unaffected.

「各単語の最初の一文字を大文字に変換する。ほかの文字は影響されない」とのこと。そのため、一番上の「google com」の文字列に関しては、各UAにおいて最初の単語である「g」と次の単語である「c」が大文字に変換されています。ただ、事をややしこしくさせるのが、「.」の存在。


上記UAの表示を見比べてみて思うのは、どうやらFirefoxOperaに関しては「.」を1つの文字として捉えているようなので、例えば、

  • google.com」においては、1つの単語として認識するので、「g」のみが大文字。
  • google .com」においては、「.com」の「.」を1つの単語として認識しているため、「c」は最初の一文字とはならない。

というようなレンダリングかなと思います。


逆に、IEとSafariにおいては「.」を1つの文字として捉えず「半角スペース」と同じような扱いとするため、

  • google.com」においては、2つの単語として認識するので、「g」と「c」が大文字。
  • google .com」においては、「.」をスペースとして認識し、結局半角スペースを2つ作るような形として扱われるため(要は半角スペースの1つは無視する)、「g」と「c」が大文字。

というような状態かなと思います。


そして、各UA共に日本語の取扱いに関しては、仕様書による、

Conforming user agents may consider the value of 'text-transform' to be 'none' for writing scripts for which there is no transform.

という記述から、無視している状態なのかなと思います。


このあたりの詳細に関しては仕様書によると、「RFC2070やRFC3066を参考に」ということが書かれていて、日本語の訳文を読んでみてもさっぱり分からない。そのため、一応原文と訳文へのリンクだけ置いておきますので、もしご興味あったり、詳しい方がいたら、教えてください。


こんな感じで、あまり実践には役立ちませんが、text-transformのことでした。