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. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations Ruby.

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.

  • En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant text-transform: uppercase à ar aon tslí, on obtiendra AR AON tSLÍ et non AR AON TSLÍ. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : an t-uisce deviendra AN tUISCE (le trait-d'union sera bien réinséré avec text-transform: lowercase)

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.

Syntaxe

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

/* 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.

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.

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).
full-size-kana
Cette valeur est généralement utilisée pour les annotations Ruby. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.

Syntaxe formelle

none | capitalize | uppercase | lowercase | full-width | full-size-kana

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>

<code>full-size-kana :</code>
<p class="full-size-kana">ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

CSS

p.sans_effet {
  text-transform: none;
}

p.cap {
  text-transform: capitalize;
}

p.majuscules {
  text-transform: uppercase;
}

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

p.full-size-kana {
  text-transform: full-size-kana;
}

Résultat

Accessibilité

De grandes portions de texte utilisant text-transform avec la valeur uppercase peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.

Spécifications

Spécification État Commentaires
CSS Text Module 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. Les mots-clés full-width et full-size-kana sont ajoutés 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.
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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
text-transformChrome Support complet 1
Notes
Support complet 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7
Notes
Support complet 7
Notes
Notes Since Opera 15, the text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Safari Support complet 1
Notes
Support complet 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
WebView Android Support complet 1
Notes
Support complet 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Chrome Android Support complet 18
Notes
Support complet 18
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (nor for the one-colon syntax). See Chromium bug 129669.
Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 1
Notes
Support complet 1
Notes
Notes The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.
Samsung Internet Android Support complet 1.0
capitalizeChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Before Firefox 14, some punctuation characters could interfere with correct capitalization. See bug 731536.
IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Before Firefox 14, some punctuation characters could interfere with correct capitalization. See bug 731536.
Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
Dutch IJ digraphChrome Aucun support NonEdge Aucun support NonFirefox Support complet 14IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 14Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
full-size-kana
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 64IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 64Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
full-width
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 19IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 19Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Greek accented lettersChrome Support complet 34Edge Aucun support NonFirefox Support complet 15IE Aucun support NonOpera Support complet 21Safari Aucun support NonWebView Android Support complet 4.4Chrome Android Support complet 34Firefox Android Support complet 15Opera Android Support complet 21Safari iOS Aucun support NonSamsung Internet Android Support complet 2.0
Σσ or word-final ςChrome Support complet 30Edge Support complet 12Firefox Support complet 14IE Support complet 4Opera Support complet 17Safari Support complet 6WebView Android Support complet 4.4Chrome Android Support complet 30Firefox Android Support complet 14Opera Android Support complet 18Safari iOS Support complet 6Samsung Internet Android Support complet Oui
iİ and ıIChrome Support complet 31Edge Support complet 12Firefox Support complet 14IE Support complet 4Opera Support complet OuiSafari Support complet 8WebView Android Support complet ≤37Chrome Android Support complet 31Firefox Android Support complet 14Opera Android Support complet OuiSafari iOS Support complet 8Samsung Internet Android Support complet Oui
ßSSChrome Support complet 1Edge Support complet 18Firefox Support complet 1IE Aucun support NonOpera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi