text-orientation

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 initialemixed
Applicabilitétous les éléments exceptés les groupes de lignes, les lignes, les groupes de colonnes et les colonnes de tableaux
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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 direction sera ltr, 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-mode vaut vertical-rl ou vers la gauche quand elle vaut vertical-lr).
sideways-right
Un alias pour sideways conservé 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-vertical et glyph-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) -webkit48.0 (sans préfixe)

41 (41) Pas de support (Oui) -webkit Pas de support
sideways Pas de support 44 (44)[1] Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Webview Android Chrome pour Android IE Phone Opera Mobile Safari Mobile
Support simple Pas de support 41.0 (41) 48.0 (sans préfixe) 48.0 (sans préfixe) Pas de support Pas de support Pas de support
sideways Pas de support 44.0 (44)[1] Pas de support Pas de support Pas de support Pas de support Pas de support

[1] sideways-right est devenu un alias pour sideways.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,