Text-transform - Propriété CSS

Schéma de la syntaxe de text-transform.

Description de la propriété text-transform.

La propriété text-transform force la casse des caractères, c'est à dire provoque un affichage en majuscules ou en minuscules, quelque soit la façon dont le texte est écrit dans le document (le fichier HTML).

En principe, les opérations de copier-coller récupèrent le texte tel qu'il est écrit dans le document original, en considérant que text-transform n'agit que sur la mise en forme, et ne modifie pas le texte lui-même. Cependant certains navigateurs, comme Chrome effectuent le copier-coller avec le texte mis en forme.

Voir aussi la propriété font-variant-caps qui offre des fonctionnalités complémentaires, mais dépendantes des possibilités de la police de caractères utilisée.

Lettres capitales et lettres majuscules.

Les puristes distinguent les capitales et les majuscules, en considérant que les majuscules sont imposées par les règles orthographiques de la langue (en français la première lettre d'une phrase est en majuscule, de même que l'initiale des noms propres), tandis que les capitales sont un choix typographique qui n'obéit à aucune règle générale.
Suivant cette distinction, les majuscules doivent obligatoirement figurer dans le document original (html). Seules les capitales peuvent être gérées par text-transform.

Particularité des langues.

Le changement de casse comporte de nombreuses particularités dépendantes de la langue du texte. Il est donc très important que le document (HTML ou autre) comporte l'information de la langue utilisée. En HTML, ce sera l'attribut lang.

Voici quelques unes des particularités relatives au changement de casse, mais il y en a beaucoup d'autres :

• En langue allemande, le caractère minuscule unique ß devient deux caractères en majuscule : SS.
• En néerlandais, les deux lettres ij sont considérées comme un seul caractère. Si elles se trouvent au début d'un mot, text-transform:capitalize les passe toutes les deux en majuscules.
• Dans la plupart des langues latines, les caractères minuscules accentués ont leur équivalent en majuscule, également accentués. La langue grecque a des règles plus compliquées

Valeurs pour text-transform.

• text-transform: none;

  Valeur par défaut. La casse des caractères n'est pas modifiée : ils s'affichent tels qu'ils sont écrits dans le code HTML.

  ExeMple pOur teXt-transForm

  Texte d'origine

  ExeMple pOur teXt-transForm

  text-transform:none;
• text-transform: uppercase;

  Tous les caractères sont affichés en majuscules.

  Échantillon
  â é è ê ï æ œ ç ß

  Texte d'origine

  Échantillon
  â é è ê ï æ œ ç ß

  text-transform:uppercase;
• text-transform: lowercase;

  Tous les caractères sont affichés en minuscules.

  Échantillon
  Â Ê Î Ô Û Æ Œ Ç

  Texte d'origine

  Échantillon
  Â Ê Î Ô Û Æ Œ Ç

  text-transform:lowercase;
• text-transform: capitalize;

  Le premier caractère de chaque mot est converti en majuscule, les autres caractères sont inchangés.

  On note sur l'exemple ci-contre que le caractère qui suit un tiret n'est pas en majuscule : le tiret n'est pas considéré comme un séparateur de mots. Néanmoins, ceci peut être différent d'un navigateur à l'autre.

  Les balises inline telles que a, abbr, etc. ne doivent pas être considérées comme un début ou une fin de mot.

  ExeMple pOur teXt-transForm

  Texte d'origine

  ExeMple pOur teXt-transForm

  text-transform:capitalize;
• text-transform: full-width;

  Les caractères sont remplacés par leur forme "pleine largeur". Si cette forme n'existe pas, le caractère est inchangé. Appliquée sur des caractères latins, full-width a pour effet d'aligner (à peu près) les caractères latins sur les idéogrammes CJK.

  Cette valeur est cumulable avec capitalize, uppercase et lowercase. Le navigateur traite en premier les changements de casse, quelque soit l'ordre dans lequel les valeurs sont indiquées.

  LATIN
  한국어 문자

  Texte d'origine

  LATIN
  한국어 문자

  text-transform:full-width;
• text-transform: full-size-kana;

  Les caractères kana minuscules sont remplacés par leur forme "pleine largeur". Cette valeur est généralement utilisée pour les notations du type "Ruby" pour améliorer la lisibilité des petits caractères généralement employés dans les annotation Ruby. Pour avoir plus d'infos sur les annotations Ruby.

  Cette valeur est cumulable avec capitalize, uppercase et lowercase. Le navigateur traite en premier les changements de casse, quelque soit l'ordre dans lequel les valeurs sont indiquées.

  河内Hénèi

  Texte d'origine

  河内Hénèi

  text-transform:full-size-kana;
• text-transform: math-auto; ⚠

  La valeur math-auto est encore peu reconnue par les navigateurs. Elle s'applique aux formules mathématiques décrites en MathML. Pour l'instant elle passe en italiques les identifiants (balises mi) avec une seule lettre (généralement les variables).

  Remarque 1 : Il ne s'agit pas du même italique que celui qui est obtenu avec la propriété font-style, avec text-transform les caractères sont remplacés par leur équivalent en italique (caractères depuis le code hexadécimal 1D3F3 jusqu'au code 1D345).

  Remarque 2 : dans les formules mathématiques, text-transform est déjà positionné sur math-auto. Cependant text-transform:math-auto peut cependant être utile si l'option a été désactivée précédemment.

  Sur l'exemple ci-dessous on voit que le mot cos n'a pas été changé, alors que x a été changé en italique.

  $A^2+B^2=C^2$
  $\cos \left(x\right)=0.707$

  text-transform:none;

  $A^2+B^2=C^2$
  $\cos \left(x\right)=0.707$

  text-transform:math-auto;
• text-transform: initial; (none) text-transform: inherit; text-transform: revert; text-transform: revertLayer; text-transform: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété text-transform.

En typographie il est fréquent d'inscrire la première ligne des paragraphes en majuscules, particulièrement dans le cas d'utilisation de lettrines. Il n'est pas possible de réaliser cela dans le code source en inscrivant le texte directement en majuscules, car on ne connaît pas à priori la longueur de la ligne.

Exemple d'animation de text-transform.

Comme toutes les propriétés qui attendent des valeurs non numériques, text-transform passe d'une valeur à l'autre sans transition, de façon brutale. Pour inclure toutes les valeurs possibles dans une animation, il faut les énumérer une par une, comme nous l'avons fait dans cet exemple.

Exemple interactif avec la propriété text-transform.

(1) Pangramme anonyme.

Compatibilité des navigateurs avec text-transform.

Remarques :

(1) La propriété text-transform ne fonctionne pas avec le pseudo élément ::first-line.

1

Propriété
text-transform

2

Valeur
full-width

3

Valeur
full-size-kana

4

Valeur
math-auto

5

Lettres grecques
accentuées

Estimation de la prise en charge globale.

96%

16%

165%

77%

78%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

1

Edge

Opéra

1

Safari

1

Safari sur IOS

1

Androïd Brower

1

Chrome pour Androïd

1

Firefox pour Androïd

Samsung Internet

1

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété text-transform.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Première définition de la propriété text-transform, dans la version 1 du langage CSS.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Acceptation de la valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Texte - Niveau 3

  Ajout des valeurs full-width et full-size-kana.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Ajout de la valeur math-auto.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet des manipulations de texte.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété text-transform fait partie du module CSS Text Module. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :