Propriété CSS text-transform
Utilisez la propriété text-transform pour contrôler la mise en majuscules du texte d'un élément. Découvrez les valeurs et essayez des exemples.
La propriété CSS text-transform contrôle la mise en majuscules du texte d'un élément — elle peut forcer le texte en MAJUSCULES, en minuscules, ou en Mettre Une Majuscule À Chaque Mot, sans modifier le HTML sous-jacent. Il s'agit d'un changement purement visuel : le texte source reste exactement tel que vous l'avez écrit, de sorte que les lecteurs d'écran, le copier-coller et les soumissions de formulaires voient toujours la casse d'origine.
Cette page couvre toutes les valeurs de text-transform, les pièges de la valeur capitalize, le mappage de casse spécifique à la langue, ainsi que des exemples interactifs pour chaque valeur.
Pourquoi utiliser text-transform plutôt que taper directement les majuscules ?
Garder la casse dans le CSS plutôt que dans le balisage maintient votre contenu propre et flexible :
- Une seule source de vérité. Rédigez les titres et les étiquettes en casse de phrase normale ; laissez le CSS les mettre en majuscules uniquement là où le design l'exige. Modifiez le design ultérieurement en un seul endroit.
- Favorable à la localisation. Les traducteurs modifient un texte lisible, pas des majuscules criantes.
- Accessibilité et SEO. Les moteurs de recherche et les technologies d'assistance lisent le vrai texte, pas les glyphes stylisés. Mettre en majuscules l'étiquette d'un
<button>de cette façon expose toujours un nom accessible en casse normale.
Mappage de casse spécifique à la langue
text-transform suit les règles de casse de la langue du contenu (l'attribut lang), et non une conversion ASCII naïve. Quelques cas notables :
- Langues turciques — le turc (
tr), l'azéri (az), le tatar de Crimée (crh), le tatar de la Volga (tt) et le bachkir (ba) ont des i avec et sans point, ce qui donne deux paires de casse : i/İ et ı/I. - Allemand (
de) — le ß devient SS en majuscules. - Grec (
el) — lorsqu'un mot entier est mis en majuscules, l'accent vocalique est supprimé (ά → Α), sauf pour l'êta disjonctif (ή/Ή).
La prise en charge de ces règles spécifiques à la langue varie selon les navigateurs ; testez si votre audience en dépend.
Les valeurs full-width et full-size-kana sont expérimentales. full-width bénéficie d'une prise en charge partielle par WebKit, tandis que full-size-kana a un support très limité.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.textTransform = "capitalize"; |
Syntaxe
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;La valeur "uppercase"
uppercase convertit chaque caractère en sa forme majuscule — l'usage le plus courant concerne les titres, les boutons et les étiquettes. Dans l'exemple ci-dessous, le texte du paragraphe et du <div> est forcé en majuscules tandis que le HTML conserve sa casse normale :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Résultat
Les valeurs "capitalize" et "lowercase"
capitalize met en majuscule la première lettre de chaque mot et laisse le reste de chaque mot inchangé. Une frontière de « mot » est tout espace, ponctuation ou symbole, de sorte que les guillemets et les traits d'union commencent également de nouveaux mots (par exemple, mother-in-law devient Mother-In-Law). Deux pièges courants :
- Elle ne touche que la première lettre —
iPhoneresteIPhone, et nonIphone, car la casse existante des lettres restantes est préservée. - Un chiffre ne compte pas comme une lettre, donc la première lettre après un nombre n'est pas mise en majuscule.
3rdreste3rd, jamais3Rd.
lowercase est l'opposé de uppercase : elle force tous les caractères en minuscules. Dans l'exemple ci-dessous, le premier <div> utilise capitalize et le second utilise lowercase :
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>La valeur "none"
none est la valeur par défaut — le texte s'affiche exactement tel qu'il est écrit, sans effet de mise en majuscules. On l'utilise principalement pour annuler un text-transform qu'un élément hériterait autrement, puisque la propriété est héritée par défaut.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>La valeur "initial"
initial réinitialise la propriété à sa valeur par défaut définie par le CSS (none), quelle que soit la valeur héritée. L'exemple ci-dessous réinitialise text-transform sur un paragraphe :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Aucun effet de mise en majuscules. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| capitalize | Met en majuscule le premier caractère de chaque mot. | Essayer » |
| uppercase | Met tous les caractères de chaque mot en majuscules. | Essayer » |
| lowercase | Met tous les caractères de chaque mot en minuscules. | Essayer » |
| full-width | Place l'écriture d'un caractère (idéogrammes et scripts latins) dans un carré, permettant de les aligner comme en chinois ou en japonais. | Essayer » |
| full-size-kana | Convertit tous les petits caractères Kana en Kana pleine taille, pour compenser les problèmes de lisibilité aux petites tailles de police généralement utilisées dans les ruby. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite la propriété de l'élément parent. |
Propriétés associées
text-transform est l'un des nombreux outils CSS pour façonner l'apparence du texte. Combinez-la avec ces propriétés associées :
- text-decoration — souligner, surligner ou barrer le texte.
- font-variant — afficher le texte en petites majuscules (une vraie variante typographique, contrairement à des majuscules visuelles).
- letter-spacing et word-spacing — se marie bien avec les titres en majuscules, qui se lisent souvent mieux avec un espacement supplémentaire.
- text-align — contrôler l'alignement horizontal du texte transformé.
- ::first-letter et ::first-line —
text-transforms'applique également à ces pseudo-éléments, utile pour les effets de lettrine.