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 :

CSS - Propriété text-transform

Description.

La propriété text-transform force la casse des caractères, c'est à dire provoque une affichage en majuscules, en minuscules, ou affiche seulement les initiales en majuscules.

Voir aussi la propriété font-variant-caps qui offre des possibilités similaires.

Syntaxes pour text-transform.

  • text-transform: none;
    Exemple pour 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.

  • text-transform: uppercase;
    Exemple pour text-transform: uppercase

    Les caractères sont affichés en majuscules.

  • text-transform: lowercase;
    Exemple pour text-transform: lowercase

    Les caractères sont affichés en minuscules.

  • text-transform: capitalize;
    Exemple pour 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.

  • text-transform: full-width;
    Exemple pour 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é. L'objectif est d'aligner (à peu près) les caractères latins sur les idéogrammes chinois.

  • text-transform: full-size-kana;
    Exemple pour text-transform: full-size-kana

    Les caractères kana minuscules sont remplacés par leur forme "pleine largeur". Cette valeur peut être utilisée pour les notations du type "ruby".

  • text-transform: lowercase full-width;
    Exemple pour text-transform avec des valeurs combinées

    Les valeurs full-width et full-size-kana sont cumulables avec les autres. La navigateur traite en premier les changements de casse, quelque soit l'ordre dans lequel les valeurs sont indiquées.

  • text-transform: initial;

    La valeur initiale est none.

  • text-transform: unset; text-transform: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-family : Définit le nom de la police de caractères.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.