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.

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;

La propriété text-orientation peut valoir l'un des mots-clés suivants.

Valeurs

mixed
Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.
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° dans le sens des aiguilles d'une montre.
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.

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é
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 48
Support complet 48
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge ? Firefox Support complet 41
Support complet 41
Aucun support 38 — 51
Désactivée
Désactivée From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Aucun support NonWebView Android Support complet 48
Support complet 48
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 48
Support complet 48
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile ? Firefox Android Support complet 41
Support complet 41
Aucun support 38 — 51
Désactivée
Désactivée From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet 5.0
Support complet 5.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
sidewaysChrome Aucun support NonEdge ? Firefox Support complet 44
Notes
Support complet 44
Notes
Notes sideways-right has become an alias of sideways.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Support complet 44
Notes
Support complet 44
Notes
Notes sideways-right has become an alias of sideways.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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