Un menu en majuscules, un titre de section avec seulement l'initiale en capitale, un libellé toujours en minuscules quoi qu'on tape dedans : ce sont des choix purement visuels, qui ne devraient jamais dépendre de la façon dont un rédacteur a tapé son texte. C'est exactement le rôle de text-transform.
Cette propriété change l'apparence de la casse d'un texte sans toucher à une seule lettre du contenu réel stocké dans le HTML. La distinction paraît technique, mais elle a des conséquences concrètes sur l'accessibilité et sur la facilité à faire évoluer un site plus tard.
Définition
text-transform modifie l'affichage d'un texte en majuscules, en minuscules, ou avec uniquement la première lettre de chaque mot en capitale, sans jamais modifier le texte réellement présent dans le document.
nav a {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}| Valeur | Effet |
|---|---|
uppercase | Affiche tout le texte en majuscules |
lowercase | Affiche tout le texte en minuscules |
capitalize | Met une majuscule à la première lettre de chaque mot |
none | Aucune transformation, la casse du HTML est conservée |
Un exemple concret : un menu de navigation
Un cas très courant consiste à écrire les libellés de menu normalement dans le HTML, en minuscules avec une majuscule au début si besoin, puis à laisser CSS gérer l'affichage en majuscules pour un rendu plus formel.
nav a {
text-transform: uppercase;
letter-spacing: 0.06em;
}Ce letter-spacing et word-spacing ajouté n'est pas un hasard : les lettres capitales, plus denses visuellement, gagnent presque toujours à être légèrement écartées lorsqu'elles sont produites par une transformation CSS plutôt que tapées directement en majuscules.
Pourquoi ne pas taper directement en majuscules
Il serait plus simple, en apparence, d'écrire directement « ACCUEIL » dans le HTML plutôt que de passer par text-transform: uppercase;. C'est pourtant une mauvaise habitude, pour deux raisons concrètes.
Certains lecteurs d'écran traitent un mot entièrement en majuscules comme un sigle et l'épellent lettre par lettre au lieu de le lire normalement, ce qui rend un menu de navigation incompréhensible à l'oreille. Séparer le contenu, toujours écrit avec sa casse naturelle, de sa présentation, gérée en CSS, évite ce problème et permet aussi de changer le rendu visuel plus tard sans toucher au texte source.
Le second avantage est purement pratique : si la décision de design change et que les majuscules ne sont plus souhaitées, il suffit de modifier une ligne de CSS, text-transform: none;, plutôt que de retaper chaque libellé partout où il apparaît dans le code.
Le cas particulier de capitalize
capitalize met une majuscule au début de chaque mot, y compris les petits mots comme « et » ou « le » qui ne prennent normalement pas de majuscule en début de phrase courante. Sur un titre où chaque mot doit être capitalisé, l'effet convient parfaitement ; sur une phrase normale où seul le premier mot devrait porter une majuscule, le rendu peut sembler étrange, proche d'un titre anglophone.
Questions fréquentes
text-transform modifie-t-il le texte que l'on peut copier-coller ?
Non, copier un texte transformé par CSS colle le texte original tel qu'il est écrit dans le HTML, sans la transformation visuelle. C'est justement la preuve que text-transform n'agit que sur l'affichage, jamais sur le contenu réel.
Pourquoi mon texte en majuscules paraît-il trop serré ?
Les lettres capitales occupent naturellement plus de largeur et laissent moins de blanc entre elles que des minuscules. C'est pour cette raison qu'un léger letter-spacing et word-spacing accompagne presque toujours un text-transform: uppercase; sur un libellé.
text-transform: capitalize gère-t-il les accents et les apostrophes ?
Le comportement peut varier légèrement d'un navigateur à l'autre sur des cas comme les mots commençant par une apostrophe, mais globalement les accents sont bien gérés et la première lettre réelle du mot reçoit sa majuscule, accentuée si nécessaire.
Faut-il utiliser text-transform ou écrire directement le bon texte en base de données ?
Chaque fois que la casse est un choix purement visuel, comme un menu en majuscules pour toutes les langues du site, text-transform est préférable, parce qu'il s'applique uniformément sans dépendre de la façon dont chaque contenu a été saisi en amont, parfois par des personnes différentes.