text-transform - Propriété CSS
Résumé des caractéristiques de la propriété text-transform
none
| capitalize
| uppercase
| lowercase
| full-width
| full-size-kana
none
text-transform
passe d'une valeur à l'autre sans transition.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 normalTout en majuscules
Tout en minuscules
Initiales en majuscules
Exemples des possibilités
de font-variant-caps
:
Texte normalPetites 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
.
- 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'origineExeMple 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'origineExeMple 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
etlowercase
. Le navigateur traite en premier les changements de casse, quelque soit l'ordre dans lequel les valeurs sont indiquées.Texte d'origineLATIN
한국어 문자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
etlowercase
. Le navigateur traite en premier les changements de casse, quelque soit l'ordre dans lequel les valeurs sont indiquées.Annotation d'origine河内 full-size-kana
河内 - 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 exemplemath-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 + zMais 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.
Simulateur.
(1) Pangramme anonyme.
Prise en charge par les navigateurs (compatibilité).
text-transform
.
full-width
dans la syntaxe de text-transform
.
full-width-kana
dans la syntaxe de text-transform
.
math-auto
dans la syntaxe de text-transform
.
text-transform
full-width
full-size-kana
math-auto
Greek letters
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.