Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété text-orientation définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand writing-mode n'est pas horizontal-tb). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.
| Valeur initiale | mixed |
|---|---|
| Applicabilité | tous les éléments exceptés les groupes de lignes, les lignes, les groupes de colonnes et les colonnes de tableaux |
| Héritée | oui |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeurs avec un mot-clé */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways-left; text-orientation: sideways; text-orientation: use-glyph-orientation; /* Valeurs globales */ text-orientation: inherit; text-orientation: initial; text-orientation: unset;
Valeurs
mixed- Ce mot-clé permet de tourner les caractères de 90° pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement.
upright- Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme ltr (left-to-right ou gauche à droite). La valeur utilisée pour
directionseraltr, quelle que soit celle définie par l'utilisateur. sideways- Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° (vers la droite quand
writing-modevautvertical-rlou vers la gauche quand elle vautvertical-lr). sideways-right- Un alias pour
sidewaysconservé pour des raisons de compatibilité. use-glyph-orientation- Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées
glyph-orientation-verticaletglyph-orientation-horizontal.
Syntaxe formelle
mixed | upright | sideways
Exemples
HTML
<p class="monTexte">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
CSS
.monTexte {
writing-mode: vertical-rl;
text-orientation: sideways;
}
Résultat
Spécification
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Writing Modes Module Level 3 La définition de 'text-orientation' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Support simple | (Oui) -webkit 48.0 (unprefixed) |
41 (41)[1] | Pas de support | (Oui) -webkit | Pas de support |
sideways |
Pas de support | 44 (44)[2] | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Android | Webview Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Support simple | Pas de support | 48.0 (unprefixed) | 48.0 (unprefixed) | 41.0 (41)[1] | Pas de support | Pas de support | Pas de support |
sideways |
Pas de support | Pas de support | Pas de support | 44.0 (44)[2] | Pas de support | Pas de support | Pas de support |
[1] Cette fonctionnalité est disponible dpeuis Gecko 38 via la préférence layout.css.vertical-text.enabled. Cette préférence a été retirée avec Gecko 51 et cette propriété ne peut pas être désactivée depuis cette version.
[2] sideways-right est devenu un alias pour sideways.