Text-orientation - Propriété CSS

Schéma de la syntaxe de text-orientation.

Description de la propriété text-orientation.

text-orientation définit l'orientation des caractères dans le cas d'un texte écrit verticalement, c'est à dire les blocs dont la propriété writing-mode à la valeur vertical-lr ou vertical-rl.

text-orientation est sans effet sur les éléments dont la direction d'écriture est horizontale.

Reportez-vous à la page sur les modes d'écriture pour des explications détaillées sur les modes d'écriture en fonction des langues. Consultez également la propriété text-combine-upright.

Valeurs pour text-orientation.

• text-orientation: mixed;

  L'orientation des caractères dépend de la langue de l'élément :

  Si les caractères correspondent à une langue qui s'écrit normalement dans le sens horizontal, les caractères seront tournés de 90° dans le sens horaire, de façon que, en penchant la tête sur la droite, le lecteur retrouve une écriture normale.

  Si par contre les caractères correspondent à une langue qui s'écrit normalement dans le sens vertical, les caractères sont affichés avec leur orientation habituelle.

  Texte vertical
  
  竖排文本
• text-orientation: upright;

  Les caractères sont affichés dans leur orientation habituelle. Cette valeur facilite la lecture des caractères pour les langues qui s'écrivent normalement dans le sens horizontal, mais que, pour des raisons de mise en page, on souhaite afficher verticalement.

  Texte vertical
  
  竖排文本
• text-orientation: sideways;

  Les caractères sont affichés tournés de 90° dans le sens horaire. Quelque soit la langue, la composition du texte correspond à une écriture horizontale ayant subi une rotation de 90°.

  Texte vertical
  
  竖排文本
• text-orientation: sideways-right; ✗

  Cette valeur n'est plus standardisée, bien que encore reconnue par les navigateurs. Elle est équivalente à sideways. Il est donc recommandé d'utiliser plutôt cette dernière.

• text-orientation: initial; (mixed) text-orientation: inherit; text-orientation: revert; text-orientation: revertLayer; text-orientation: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de text-orientation.

La propriété text-orientation ne peut pas être animée.

Accéder à la propriété text-orientation par programme.

Changement de la valeur de text-orientation avec Javascript.

En Javascript, voici comment modifier la valeur de text-orientation. On voit que Javascript propose une syntaxe avec la notation typique de CSS, kebab-case, et une autre syntaxe avec la notation en camel-case.

let el = document.getElementById('id'); el.style['text-orientation'] = 'upright'; // ou let el = document.getElementById('id'); el.style.textOrientation = 'upright';

Récupération de la valeur de text-orientation avec Javascript.

Pour que ce code fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['text-orientation']; // ou let el = document.getElementById('id'); let value = el.style.textOrientation;

Récupération de la valeur calculée de text-orientation.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. A défaut, la valeur calculée est la valeur initiale (mixed dans le cas de text-orientation.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('text-orientation');

Changement de la valeur de text-orientation avec JQuery.


$('#id').css('text-orientation', 'upright');
// ou
$('#id').css('textOrientation', 'upright');


Récupération de la valeur calculée de text-orientation avec JQuery.

let value = $('#id').css('text-orientation');

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété text-orientation et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée, mais dans le cas de text-orientation les deux valeurs seront identiques.

Exemple interactif avec la propriété text-orientation.

Comme annoncé plus tôt, le simulateur est sans effet sur les langues dont l'écriture est horizontale, c'est à dire les langues latines et la langue arabe.

Compatibilité des navigateurs avec text-orientation.

La propriété text-orientation est correctement prise en charge par les navigateurs actuels. La valeur sideways qui a longtemps posé des problèmes, est maintenant bien reconnue également.

1

Propriété
text-orientation

2

Valeur
sideways

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété text-orientation.

• Module CSS - Modes d'écriture - Niveau 3

  Concernant text-orientation. Première définition de la propriété text-orientation.
  

  02 Décembre 2010

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  24 Octobre 2019

  Proposé à la recommandation.

  

  10 Décembre 2019

  Recommandation.

• Module CSS - Modes d'écriture - Niveau 4

  Concernant text-orientation. Pas de changement concernant la propriété text-orientation.
  

  07 Décembre 2017

  Document de travail.

  

  24 Mai 2018

  Candidat à la recommandation.

  

  

Voir aussi, concernant les modes d'écriture.

La spécification concernant les modes d'écriture est dénommée Module CSS - Modes d'écriture. Elle regroupe tout ce qui concerne l'écriture bidirectionnelle, et la gestion fine des écritures verticales (CJK). La propriété text-orientation est décrite dans ce module, ainsi que les propriétés ci-dessous :

Propriétés :