text-transform

Updated / Published

text-transformプロパティはアルファベットのように大文字と小文字がある言語の場合に、小文字を大文字に、大文字を小文字に変換して表示します。

この機能は音声出力環境へ配慮するために定義されました。見出しなどテキストを全て大文字で書いてしまうことがありますが、音声出力環境ではすべて大文字で書かれた単語を一文字ずつ読み上げてしまうことがあります。そこでソースでの記述に関わらず、単語の大文字・小文字の外見を制御できれば、制作者は大文字・小文字の見た目にこだわることなく、適切な音声で読み上げられる（表現される）ように配慮できます。

値
  • none
  • capitalize
  • uppercase
  • lowercase
  • inherit
初期値
none
適用対象
すべての要素
継承
する
メディア
visual

text-transformプロパティの値

text-transformプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none
効果なし
capitalize
各単語の一文字目だけを大文字に変換して表示
uppercase
すべてを大文字に変化して表示
lowercase
すべてを小文字に変換して表示

なお、アルファベットであれば、半角英字・全角英字のどちらでも大文字・小文字に変換できます。日本語のように大文字・小文字の区別がない言語に "capitalize", "uppercase", "lowercase" のいずれかが指定された場合、UA はその指定を "none" として認識し、無効化します。

text-transformプロパティの実装状況

IE
◯
Firefox
◯
Opera
◯
Chrome
◯
Safari
◯
iOS
◯
Android
◯

サンプル

.none           { text-transform : none ; }
.capitalize   { text-transform : capitalize ; }
.uppercase  { text-transform : uppercase ; }
.lowercase  { text-transform : lowercase ; }