英文の先頭だけ大文字で、他は小文字にする場合のCSSでのやり方を質問されて、
text-transform で一発やんけと思ったけど、そうでも無く考えさせられたのでメモ。 (後半ポエム)
text-transform とは
HTMLに記述されている英文の表示を、大文字/小文字を指定するためのCSSプロパティです。
<h1>May the FORCE be with you.</h1>
|CSS|意味|表示|
|:----|:----|:----|:----|
| h1 { text-transform: none; } | 記述そのまま | May the FORCE be with you. |
| h1 { text-transform: uppercase; } | すべて大文字 | MAY THE FORCE BE WITH YOU. |
| h1 { text-transform: lowercase; } | すべて小文字 | may the force be with you. |
| h1 { text-transform: capitalize; } | 単語の先頭だけ大文字 | May The Force Be With You. |
文頭だけ大文字にするには？
text-transform: capitalize; だと、文中の各単語の頭文字が大文字になってしまう。
冒頭の「文の先頭だけ大文字にする」には以下のようにする。
h1 {
text-transform: lowercase; /* 全体を小文字にリセット */
}
h1::first-letter {
text-transform: capitalize; /* 先頭文字だけ大文字化 */
}
まず当該のセレクタ全体に対し、 lowercase で全体を小文字にリセットし、 ::first-letter 疑似要素で先頭だけ capitalize する。
|CSS|意味|表示|
|:----|:----|:----|:----|
| 上記 | 文頭の1文字だけ大文字 | May the force be with you. |
text-transform と ::first-letter は、ほとんどのブラウザでサポートされているが、 IE8以前のIEではCSS2時代のシングルコロンの疑似クラスしか受けつけないので注意。
考察
1. 手法の妥当性
上述の通り text-transform を使用して大文字/小文字表示のある程度のコントロールは効く。
しかしこの手段は「どうしても」という時に使う程度に考えておき、
実際表示されたい様にHTMLにもともと記述するのが本来的であると考える。
※ 例えば、上記の方法だと 「I AM SAM.」 の場合に 「I am sam.」 となってしまい、期待値の 「I am Sam.」が実現できない。
2. セマンティクス(意味性)
次にこの手法がアクセシビリティやセマンティクスの面でHTMLの品質に与える影響を考える。
F2: 達成基準 1.3.1 の失敗例 － 適切なマークアップ又はテキストを用いずに、テキストの見た目の表現の変化を用いて情報を伝えている | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/F2.html
上のページの「失敗例3」では、強調するために span class="yell" などのマークアップをし、text-transform を使用している例があるが、このように強調目的で表現する場合には strong や em など「強調」というセマンティクス(意味性)を持つタグでマークアップする方がHTML５としては本来的だ。
3. アクセシビリティ
次にアクセシビリティの観点でこの手法がいいのかを考えてみた。
コードとして
CSSで文字情報の内容や見た目を操作するもの（例えば ::before 擬似要素に content プロパティでテキストを出力するような方法） は、感覚的にアクセシビリティ的によろしくないのかな、と思い込んでいたが、以下を読む限りそうではなさそう。
C22: テキストの視覚的な表現を制御するために、CSS を使用する | WCAG 2.0 達成方法集
https://waic.jp/docs/WCAG-TECHS/C22.html
※もちろん ↑の content の例は言語に依存したテキスト情報をCSS側にハードコードするという点でメンテナブルではなく、HTML/CSSの棲み分けとしても気持ちがわるい。
（そういう場合は自分だったら content: attr("data-***"); とかで情報をHTML側に集約させるとか？）
可読性として
というかアクセシビリティという点で言えば、「可読性」(読みやすさ) がそもそもの論点か。
大文字の方が読みやすい(例えば略語など)で、局所的に uppercase をかけるというなら妥当かと思うが、
であればもともとHTMLにそのように記述するのがやはり本来的。
音声リーダー対応
強調ないし装飾の目的でHTML上、全てを大文字に記述してしまうと、音声リーダーの読上げが期待値通りにならないという点も紹介されていた。
<span>FORCE</span> <!-- 読上げ "エフオーアールシーイ―" -->
<span>Force</span> <!-- 読上げ "フォース" -->
この問題を回避する場合、CSS側で見た目上 uppercaseにする方法が妥当。
<span style="text-transform:uppercase">Force</span>
↑の方法であれば視覚的に 「FORCE」と表示し、音声リーダーは「フォース」と読んでくれる。
参考
アクセシビリティガイドライン > 39. ユーザーが一般的に理解できる外来語・外国語を除き、外国語を必要以上に用いない... ： 三井住友銀行
http://www.smbc.co.jp/accessibility/guidelines/guideline_39.html
まとめると、特段意味がなく装飾だけの目的で大文字/小文字のCSS操作をする際には、視覚的に読みづらくなってないかを考慮し、する場合は音声リーダのことも考えると良い。というところか。