実際のコーディングではほとんど役立つことはないと思いますが、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」の部分。ここが大文字になるかどうかが違います。FirefoxとOperaは一番上のものだけ「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の表示を見比べてみて思うのは、どうやらFirefoxとOperaに関しては「.」を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を参考に」
ということが書かれていて、日本語の訳文を読んでみてもさっぱり分からない。そのため、一応原文と訳文へのリンクだけ置いておきますので、もしご興味あったり、詳しい方がいたら、教えてください。
- RFC2070: Internationalization of the Hypertext Markup Language（訳文）
- RFC3066: Tags for the Identification of Languages（訳文）
こんな感じで、あまり実践には役立ちませんが、text-transformのことでした。
