text-transform

Exemple interactif

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

text-transform: full-size-kana;

text-transform: math-auto;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      LONDRES. La session de Michaelmas étant récemment terminée, et le Lord
      Chancelier siégeant dans la salle de Lincoln's Inn.
    </p>
    <p lang="el">
      Σ est une lettre grecque et apparaît dans ΟΔΥΣΣΕΥΣ. Θα πάμε στο "Θεϊκό
      φαΐ" ή στη "Νεράιδα"
    </p>
    <p lang="ja">ァィゥェ ォヵㇰヶ</p>
  </div>
</section>

#example-element {
  font-size: 1.2em;
}

La propriété text-transform prend en compte les règles de mappage des majuscules et minuscules spécifiques à chaque langue, telles que les suivantes :

• Dans les langues turques, telles que le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de la Volga (tt) et le bachkir (ba), il existe deux types de i, avec et sans point, ainsi que deux paires de majuscules et minuscules : i/İ et ı/I.
• En allemand (de), le ß devient SS en majuscule.
• En néerlandais (nl), le digramme ij devient IJ, même avec text-transform: capitalize, qui ne met en majuscule que la première lettre d'un mot.
• En grec (el), les voyelles perdent leur accent lorsque le mot entier est en majuscules (ά/Α), à l'exception de l'êta disjonctif (ή/Ή). De plus, les diphtongues dont la première voyelle est accentuée perdent l'accent et reçoivent un tréma sur la deuxième voyelle (άι/ΑΪ).
• En grec (el), le sigma minuscule a deux formes : σ et ς. ς n'est utilisé que lorsque le sigma termine un mot. Lorsqu'on applique text-transform: lowercase à un sigma majuscule (Σ), le navigateur doit choisir la bonne forme minuscule en fonction du contexte.
• En irlandais (ga), certaines lettres préfixées restent en minuscules lorsque la consonne initiale est en majuscule, ainsi, par exemple, text-transform: uppercase transformera ar aon tslí en AR AON tSLÍ et non, comme on pourrait s'y attendre, en AR AON TSLÍ (Firefox uniquement). Dans certains cas, un trait d'union est également supprimé lors de la conversion en majuscules : an t-uisce se transforme en AN tUISCE (et le trait d'union est correctement réinséré par text-transform: lowercase).

La langue est définie par l'attribut HTML lang ou l'attribut XML xml:lang.

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;
text-transform: math-auto;

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

Valeurs

capitalize

Est un mot-clé qui convertit la première lettre de chaque mot en majuscule. Les autres caractères restent inchangés (ils conservent leur casse originale telle qu'écrite dans le texte de l'élément). Une lettre est définie comme un caractère faisant partie des catégories générales Lettre ou Nombre de l'Unicode ; ainsi, toute ponctuation ou symbole au début d'un mot est ignoré.

Attention : Dans de nombreuses langues, il est considéré comme incorrect de mettre en majuscule chaque mot d'une phrase, même dans les titres et les noms. Si vous ne connaissez pas la langue du texte auquel le style sera appliqué, vous devriez éviter d'utiliser capitalize. De plus, capitalize ne crée pas de capitalisation de titre, car il n'applique pas les règles spécifiques à la langue, comme l'omission des articles en anglais.

Note : Le mot-clé capitalize était mal défini dans CSS 1 et CSS 2.1. Cela a entraîné des différences entre les navigateurs dans la manière dont la première lettre était calculée (Firefox considérait - et _ comme des lettres, mais les autres navigateurs ne le faisaient pas. WebKit et Gecko considéraient incorrectement les symboles basés sur les lettres comme ⓐ comme de vraies lettres.) En définissant précisément le comportement correct, CSS Text Level 3 a corrigé ce désordre. La ligne capitalize dans le tableau de compatibilité des navigateurs contient la version à partir de laquelle les différents moteurs ont commencé à prendre en charge ce comportement désormais précisément défini.

uppercase

Est un mot-clé qui convertit tous les caractères en majuscules.

lowercase

Est un mot-clé qui convertit tous les caractères en minuscules.

none

Est un mot-clé qui empêche la modification de la casse de tous les caractères.

full-width

Est un mot-clé qui force l'écriture d'un caractère — principalement des idéogrammes et des scripts latins — à l'intérieur d'un carré, permettant leur alignement dans les scripts est-asiatiques habituels (comme le chinois ou le japonais).

full-size-kana

Utilisé généralement pour le texte d'annotation <ruby>, le mot-clé convertit tous les petits caractères Kana en Kana de taille complète équivalente, pour compenser les problèmes de lisibilité aux petites tailles de police généralement utilisées dans les ruby.

math-auto

Utilisé pour rendre automatiquement le texte en italique mathématique lorsque cela est approprié. Il transforme les lettres latines et grecques, ainsi que quelques autres symboles liés aux mathématiques, en symboles mathématiques italiques ^(angl.) mais uniquement si cela est appliqué à un nœud de texte contenant un seul caractère. Par exemple, « x » deviendra « 𝑥 » (U+1D465), mais « exp » restera « exp ». Il est principalement utilisé pour définir le comportement des éléments <mi> dans MathML. Vous devriez généralement utiliser le balisage MathML qui applique automatiquement le style correct.

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.

• Comprendre le WCAG sur le MDN, explications de la règle 1.4
• Comprendre le WCAG 2.2 du W3C

Définition formelle

Syntaxe formelle

text-transform = 
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto                                           

Exemples

Exemple avec "none"

<p>
  Châine de caractères initiale
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: none;
}
strong {
  float: right;
}

Ça démontre qu'aucune transformation de texte n'est appliquée.

Exemple avec "capitalize" (général)

<p>
  Chaîne de caractères initiale
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Cela démontre la capitalisation du texte.

Exemple avec "capitalize" (ponctuation)

<p>
  Chaîne de caractères initiale
  <strong
    >(ceci) "est" [un] —court— -test- «pour» *la* ¿capitalisation? _css_ ~de~
    ?¡transform!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(ceci) "est" [un] —court— -test- «pour» *la* ¿capitalisation? _css_ ~de~
      ?¡transform!</span
    ></strong
  >
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Ça démontre comment les ponctuations initiales d'un mot sont ignorées. Le mot-clé cible la première lettre, c'est-à-dire le premier caractère Unicode faisant partie de la catégorie générale Lettre ou Nombre.

Exemple avec "capitalize" (Symboles)

<p>
  Chaîne de caractères initiale
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Ça démontre comment les symboles initiaux sont ignorés. Le mot-clé cible la première lettre, c'est-à-dire le premier caractère Unicode faisant partie de la catégorie générale Lettre ou Nombre.

Exemple avec "capitalize" (digraphe néerlandais ij)

<p>
  Chaîne de caractères initiale
  <strong lang="nl">
    Le mot néerlandais&nbsp;: "ijsland" commence par un digraphe.
  </strong>
</p>
<p>
  text-transform: capitalize
  <strong>
    <span lang="nl">
      Le mot néerlandais&nbsp;: "ijsland" commence par un digraphe.
    </span>
  </strong>
</p>

span {
  text-transform: capitalize;
}
strong {
  float: right;
}

Ça démontre comment le digraphe néerlandais ij doit être traité comme une seule lettre.

Exemple avec "uppercase" (général)

<p>
  Chaîne de caractères initiale
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Cela démontre la transformation du texte en majuscules.

Exemple avec "uppercase" (voyelles grecques)

<p>
  Chaîne de caractères initiale
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>

span {
  text-transform: uppercase;
}
strong {
  float: right;
}

Ça démontre comment les voyelles grecques, à l'exception de l'eta disjonctive, ne doivent pas avoir d'accent, et l'accent sur la première voyelle d'une paire de voyelles devient un tréma sur la deuxième voyelle.

Exemple avec "lowercase" (général)

<p>
  Chaîne de caractères initiale
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Ça démontre la transformation du texte en minuscules.

Exemple avec "lowercase" (Σ grec)

<p>
  Chaîne de caractères initiale
  <strong
    >Σ EST UNE LETTRE grecque qui apparaît PLUSIEURS FOIS DANS ΟΔΥΣΣΕΥΣ.</strong
  >
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ EST UNE LETTRE grecque qui apparaît PLUSIEURS FOIS DANS ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Ça démontre comment le caractère grec sigma (Σ) est transformé en sigma minuscule régulier (σ) ou en variante finale de mot (ς), selon le contexte.

Exemple avec "lowercase" (lituanien)

<p>
  Chaîne de caractères initiale
  <strong>Ĩ est une LETTRE lituanienne tout comme J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span lang="lt">Ĩ est une LETTRE lituanienne tout comme J́</span></strong
  >
</p>

span {
  text-transform: lowercase;
}
strong {
  float: right;
}

Ça démontre comment les lettres lituaniennes Ĩ et J́ conservent leur point lorsqu'elles sont transformées en minuscules.

Exemple avec "full-width" (général)

<p>
  Chaîne de caractères initiale
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;&lt;=&gt;?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;&lt;=&gt;?@{|}~</span
    ></strong
  >
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Certains caractères existent en deux formats : largeur normale et pleine largeur, avec des points de code Unicode différents. La version pleine largeur est utilisée pour les mélanger harmonieusement avec les caractères idéographiques asiatiques.

Exemple avec "full-width" (katakana demi-largeur japonais)

<p>
  Chaîne de caractères initiale
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>

span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

Le katakana japonais demi-largeur était utilisé pour représenter le katakana dans des codes de caractères 8 bits. Contrairement aux caractères katakana réguliers (pleine largeur), une lettre avec dakuten (marque de son voisé) est représentée par deux points de code, le corps de la lettre et le dakuten. Le full-width combine ces deux éléments en un seul point de code lors de la conversion de ces caractères en pleine largeur.

Exemple avec "full-size-kana"

<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>

p:nth-of-type(2) {
  text-transform: full-size-kana;
}

Exemple avec "math-auto"

Dans cet exemple, nous utilisons du balisage HTML pur pour créer une formule mathématique :

<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

Nous donnons à chaque élément .math-id la propriété text-transform: math-auto. Cependant, notez que seuls les caractères x deviennent italiques, tandis que sin et cos restent inchangés.

.math-id {
  text-transform: math-auto;
}

Cependant, il est recommandé d'utiliser MathML pour les formules mathématiques, car il fournit un moyen plus robuste et accessible de représenter le contenu mathématique. Voici la même formule utilisant MathML :

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété font-variant