Propriété CSS text-transform
La propriété text-transform permet de rendre le texte en majuscules, en minuscules ou avec chaque mot commençant par une majuscule.
Certaines règles de mise en casse spécifiques à chaque langue sont prises en compte par cette propriété. Examinons-en quelques-unes :
- Dans les langues turques, comme le turc (tr), l'azéri (az), le tatare de Crimée (crh), le tatare de la Volga (tt) et le bachkir (ba), il existe deux types de « i », avec et sans point, et les deux associations de casse suivantes : i/İ et ı/I.
- En allemand (de), le ß devient SS en majuscules.
- En grec (el), lorsque tout le mot est en majuscules (ά/Α), l'accent vocalique est perdu, à l'exception de l'êta disjonctive (ή/Ή).
La prise en charge par les navigateurs des cas spécifiques à chaque langue peut varier.
WARNING
Les valeurs full-width et full-size-kana sont expérimentales. full-width bénéficie d'un support partiel sur WebKit, tandis que full-size-kana est très peu supportée.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.textTransform = "capitalize"; |
Syntaxe
Syntaxe de la propriété CSS text-transform
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Exemple de la propriété text-transform avec la valeur "uppercase" :
Exemple de la propriété CSS text-transform avec la valeur uppercase
<!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
La valeur "capitalize"
La valeur capitalize de la propriété text-transform met en majuscule les mots contenus entre guillemets simples ou doubles, ainsi que la première lettre qui suit un trait d'union. La première lettre suivant un chiffre ne sera pas mise en majuscule. Par exemple, les dates telles que « January 3th, 2019 » ne deviendront pas « January 3Th, 2019 ». Cette valeur ne met en majuscule que la première lettre de chaque mot, les autres lettres restent inchangées.
Dans l'exemple ci-dessous, nous avons utilisé la valeur capitalize pour la première phrase et la valeur lowercase pour la seconde :
Exemple de la propriété text-transform avec les valeurs "capitalize" et "lowercase" :
Exemple de la propriété CSS text-transform avec les valeurs capitalize et 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>Exemple de la propriété text-transform avec la valeur "none" :
Exemple de la propriété text-transform avec la valeur "none" :
<!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>Exemple de la propriété text-transform avec la valeur "initial" :
Exemple de la propriété text-transform avec la valeur "initial" :
<!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 casse. Il s'agit de la valeur par défaut de cette propriété. | Essayer » |
| capitalize | Met la première lettre de chaque mot en majuscule. | 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 un alignement en chinois ou en japonais. | Essayer » |
| full-size-kana | Convertit tous les caractères Kana petits en Kana de taille normale, pour compenser les problèmes de lisibilité aux petites tailles de police typiquement utilisées dans les annotations ruby. | Essayer » |
| initial | Définit la propriété sur sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Comment faire pour que chaque mot d'un texte commence par une lettre majuscule ?