Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

text-transform - Propriété CSS

text-transform

Résumé des caractéristiques de la propriété text-transform

Description rapide
Casse du texte (minuscules, majuscules...).
Statut
Standard
S'applique à
Tout élément contenant du texte.
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
none | capitalize | uppercase | lowercase | full-width | full-size-kana
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété text-transform passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: Ancienne norme, obsolète

Statut du document:: Ancienne norme, obsolète

Statut du document:: Ancienne norme, obsolète

Description.

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.

Exemples des possibilités
de text-transform :

Texte normal
Tout en majuscules
Tout en minuscules
Initiales en majuscules

Exemples des possibilités
de font-variant-caps :

Texte normal
Petites capitales
Tout en petites capitales
Minuscules grande taille

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

Syntaxes pour text-transform.

Syntaxe de text-transformSchéma syntaxique de la propriété CSS text-transform (capitalisation des textes). none none capitalize capitalize uppercase uppercase lowercase lowercase full-width full-width full-size-kana full-size-kanatext-transform:;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.

    Texte d'origine

    ExeMple pOur teXt-transForm

    none

    ExeMple pOur teXt-transForm

  • text-transform: uppercase;

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

    Texte d'origine

    Échantillon
    â é è ê ï æ œ ç ß

    uppercase

    Échantillon
    â é è ê ï æ œ ç ß

  • text-transform: lowercase;

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

    Texte d'origine

    Échantillon
    Â Ê Î Ô Û Æ Œ Ç

    lowercase

    Échantillon
    Â Ê Î Ô Û Æ Œ Ç

  • 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.

    Texte d'origine

    ExeMple pOur teXt-transForm

    capitalize

    ExeMple pOur teXt-transForm

  • 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.

    Texte d'origine

    LATIN
    한국어 문자

    full-width

    LATIN
    한국어 문자

  • 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.

    Annotation d'origine

    河内Hénèi
    full-size-kana

    河内Hénèi
  • text-transform: math-auto;

    La valeur math-auto est pour l'instant à l'étude. Elle pourrait se décliner en plusieurs variantes spécifiques à la mise en forme des formules mathématiques, comme par exemple math-italic qui passerait les lettres en italique mais sans changer les opérateurs.

    Exemples :
    Passer en italique les lettres sans changer les opérateurs : x² + y²
    Remplacer les lettres classiques par leur équivalent évidé : 𝕎²
    Remplacer les lettres classiques par leur équivalent scripté : x + y + z

    Mais aucune de ces possibilités ne figurent pour l'instant dans la spécification CSS du W3C (2024).

  • text-transform: initial; text-transform: inherit; text-transform: revert; text-transform: revert-layer; text-transform: unset;

    La valeur initiale est : none.

Exemple d'utilisation pour 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.

On parle de lettrine lorsque la première lettre d'un texte ou d'un paragraphe est dans une taille de caractère nettement supérieure à celle du texte.

Animation de la propriété 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.

Buvez de ce whisky que le patron juge fameux

Simulateur.

text-transform :
Bomfiz parvînt jusqu'à dix whisky-glace (1)

(1) Pangramme anonyme.

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Compatibilité des navigateurs avec la propriété text-transform.
Colonne 2
Prise en charge de la valeur full-width dans la syntaxe de text-transform.
Colonne 3
Prise en charge de la valeur full-width-kana dans la syntaxe de text-transform.
Colonne 4
Prise en charge de la valeur math-auto dans la syntaxe de text-transform.
Colonne 5
Traitement correct des lettres grecques accentuées pendant la transformation du texte.
1
text-transform
2
full-width
3
full-size-kana
4
math-auto
5
Accented
Greek letters
Estimation de la prise en charge en pourcentage du parc actuel.
96%
13%
3%
72%
79%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que text-transform.

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

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Césure des mots.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.