text-transform

La propriété text-transform définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale.

La propriété text-transform gère les différences liées aux langues, par exemple :

  • Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : i/İ et ı/I.

  • En allemand (de), le ß devient SS en majuscule.

  • En néerlandais (nl), le digraphe ij devient IJ, y compris avec text-transform: capitalize qui ne met que la première lettre de chaque mot en majuscule.

  • En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (ά/Α) à l'exception du eta disjonctif (ή/Ή). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (άι/ΑΪ). La lettre sigma a deux formes minuscules : σ et ς. ς est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique text-transform: lowercase à un sigma majuscule (Σ), il doit choisir l'une des deux formes selon le contexte.

D'autres règles ne sont pas prises en compte par les navigateurs, par exemple :

  • En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, si on applique text-transform: uppercase à Meud na h-aplacaid, on obtiendra MEUD NA H-APLACAID, ce qui viole les règles typographiques pour cette langue, où on aurait du avoir MEUD NA h-APLACAID.

La langue d'un document HTML est définie par l'attribut XML xml:lang, qui a la priorité sur l'attribut global lang.

Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, voir le tableau de compatibilité des navigateurs.

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Avec un mot-clé */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Valeurs globales */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Valeurs

capitalize

En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.

uppercase
En utilisant ce mot-clé, tous les caractères seront écrits en capitales.
lowercase
En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.
none
Ce mot-clé empêche les modifications liées à la casse des caractères.
full-width
Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).

Syntaxe formelle

none | capitalize | uppercase | lowercase | full-width

Exemples

HTML

<code>none :</code>
<p class="sans_effet">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</p>

<code>capitalize :</code>
<p class="cap">
  (Voici) “un” –rapide– -test- ⓙkl
</p>

</code> uppercase :</code>
<p class="majuscules">
  Cependant d'Artagnan voulut d'abord se rendre compte de
  la physionomie de l'impertinent qui se moquait de lui.
</p>

<code>full-width :</code>
<p class="mix">
  ABCDEF</br>
  最初に彼を嘲
</p>

CSS

p.sans_effet {
  text-transform: none;
}

p.cap {
  text-transform: capitalize;
}

p.majuscules {
  text-transform: uppercase;
}

p.mix {
  text-transform: full-width
}

Résultat

Spécifications

Spécification État Commentaires
CSS Text Level 4
La définition de 'text-transform' dans cette spécification.
Version de travail Par rapport à CSS Text Level 3
La définition de 'text-transform' dans cette spécification.
, la spécification ajoute le mot-clé full-size-kana et permet au mot-clé full-width d'être utilisé avec un autre mot-clé.
CSS Text Level 3
La définition de 'text-transform' dans cette spécification.
Version de travail Par rapport à CSS Level 2 (Revision 1)
La définition de 'text-transform' dans cette spécification.
, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de capitalize est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Le mot-clé full-width est ajouté afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.
CSS Level 2 (Revision 1)
La définition de 'text-transform' dans cette spécification.
Recommendation Par rapport à CSS Level 1
La définition de 'text-transform' dans cette spécification.
, étend la spécifications aux lettres non latines et aux scripts bicaméraux.
CSS Level 1
La définition de 'text-transform' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 4.0 7.0 1.0
capitalize (version CSS3) ?[1] 14 (14)[1] ? ?[1] ?[1] ?[1]
full-size-kana Pas de support Pas de support ? Pas de support Pas de support Pas de support
full-width Pas de support 19 (19) ? Pas de support Pas de support Pas de support
ßSS ? 1.0 (1.7 ou moins) ? ? ? ?
iİ et ıI Pas de support 14 (14) ? ? ? Pas de support
Digraphe IJ néerlandais Pas de support 14 (14) ? Pas de support Pas de support Pas de support
Lettres grecques accentuées 30 15 (15) ? Pas de support Pas de support Pas de support
Σσ ou ς final 30 14 (14) ? Pas de support Pas de support 6.0
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) (Oui) 6.0 6.0 1.0
capitalize (version CSS3) ?[1] 14.0 (14)[1] ? ?[1] ?[1] ?[1]
full-size-kana Pas de support Pas de support ? Pas de support Pas de support Pas de support
full-width Pas de support 19.0 (19) ? Pas de support Pas de support Pas de support
ßSS ? 1.0 (1) ? ? ? ?
iİ et ıI Pas de support 14.0 (14) ? ? ? Pas de support
Digraphe IJ néerlandais Pas de support 14.0 (14) ? Pas de support Pas de support Pas de support
Lettres grecques accentuées Pas de support Pas de support ? Pas de support Pas de support Pas de support
Σσ ou ς final Pas de support 14.0 (14) ? Pas de support Pas de support Pas de support

[1] Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, sylozof, teoli, FredB, Matouche
 Dernière mise à jour par : SphinxKnight,