Direction - Propriété CSS

direction

Résumé des caractéristiques de la propriété direction

Description rapide
Définit le sens d'écriture (de gauche à droite ou de droite à gauche).
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
ltr | rtl
Pourcentages
Ne s'appliquent pas.
Valeur initiale
ltr
Héritée par défaut
Oui.
Type d'animation
Not animable : la propriété direction ne peut pas être animée.
Module W3C
Module CSS - Modes d'écriture
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)
Statut du document: REC (recommandation)

Description.

Appliquée à un élément du type bdo, la propriété direction définit le sens d'écriture pour le texte :

  • De gauche à droite : langue européennes.
  • De droite à gauche : langues arabes ou hébreu.

Appliquée sur une balise table, la propriété direction définit l'ordre d'affichage des cellules dans la ligne. Dans ce cas la direction du texte à l'intérieur des cellules n'est pas modifiée).

Remarque : il est déconseillé d'utiliser cette propriété pour gérer le sens d'écriture sur un document HTML, car HTML propose déjà une balise spécifique à ce travail : bdo dir="ltr" dont l'attribut dir permet de changer le sens d'écriture.
En effet, CSS est dédié à la mise en forme du contenu. Or ici il ne s'agit pas seulement de formater un texte, mais de le rendre compréhensible ou pas. En utilisant la propriété direction, si la feuille de styles n'est pas disponible, on ne perd pas seulement la mise en page mais aussi la signification du contenu.

Syntaxes pour direction.

  • direction: ltr;

    Valeur par défaut. Le texte s'écrit de gauche à droite (langues européennes).

  • direction: rtl;

    Le texte s'écrit de droite à gauche (langues arabes).

Valeurs communes :

direction: initial (ltr) direction: inherit direction: revert direction: revertLayer direction: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Le texte bidirectionnel - Tutoriel.

La balise HTML bdo et l'attribut dir.

Voici la syntaxe de la balise HTML bdo. Elle doit comporter l'attribut dir avec l'une des valeurs rtl ou ltr. Ce sont les mêmes valeurs qui sont acceptées par la propriété direction.

bdo dir="rtl"Texte écrit de droite à gauche/bdo

Ce qui donne le résultat suivant : Texte écrit de droite à gauche

La balise bdo étant une balise inline, il est possible de changer le sens d'écriture au sein d'une même ligne de texte, comme on le voit dans notre exemple ci-dessus.

L'attribut dir indique la direction d'écriture, et peut prendre les valeurs suivantes :

  • ltr : de droite à gauche (Left To Right), comme pour les langues européennes.
  • rtl : de gauche à droite (Left To Right), comme pour les langues arabes ou l'hébreu.
  • auto : la direction du texte est déterminée par un algorithme connu sous le nom UBA (Algorithme Bidirectionnel Unicode), mais plus souvent appelé "algorithme bidi".

Notez que l'attribut dir ou la propriété direction doivent de toute façon être appliquées à un élément du type bdo car les autres balises HTML n'activent pas le traitement bidirectionnel du texte. Sur un paragraphe par exemple (p), le texte se trouve simplement aligné à droite mais n'est pas écrit de droite à gauche.

p style="direction:rtl" Sur un paragraphe, ça ne marche pas /p p style="direction:rtl" bdoEn insérant une balise bdo ça marche/bdo /p

Sur un paragraphe p, ça ne marche pas
En insérant une balise bdo ça marche

La propriété CSS unicode-bidi.

Il y a cependant un moyen d'utiliser direction sur n'importe quel élément HTML en lui associant la propriété unicode-bidi. Cette dernière peut en effet activer le traitement bidirectionnel du texte. On voit que c'est finalement plus simple de gérer cela avec la balise bdo.

p style="direction:rtl; unicode-bidi:bidi-override" Sur un paragraphe p, en utilisant à la fois direction et unicode-bidi, on peut obtenir un fonctionnement correct. /p

Sur un paragraphe p, en utilisant à la fois direction et unicode-bidi, on peut obtenir un fonctionnement correct.

Les autres propriétés CSS relatives au sens d'écriture.

Pouvoir choisir le sens d'écriture s'est rapidement avéré insuffisant lorsqu'il a été question des écritures asiatiques, mongole, et quelques autres.

D'autres propriétés CSS sont nécessaires : en particulier la propriété writing-mode qui permet d'activer l'écriture verticale, utilisée dans les langues asiatiques. Citons aussi la propriété text-orientation, qui définit l'orientation de chacun des caractères.

Reportez-vous à la page sur la propriété writing-mode pour des explications complémentaires sur le sens et la direction d'écriture en fonction des langues.

Les caractères miroir.

Certains caractères fonctionnement par paires. Il y en a une multitude : les parenthèses, les accolades, les signes supérieur et inférieur, de très nombreux symboles mathématiques, etc. Inverser le sens d'écriture peut nécessiter de remplacer certains caractères par leur caractère miroir.

Exemple 1. Le texte : Départ >>> Arrivée
Devient eévirrA >>> trapéD après changement du sens d'écriture.
On voit que les chevrons, qui pointaient initialement depuis le départ vers l'arrivée, pointent à l'envers après l'inversion, depuis l'arrivée vers le départ.

Exemple 2 :les parenthèse, accolades ou crochets.
Le texte CSS (Cascading Style Sheets)
Devient )steehS elytS gnidacsaC( SSC
Après changement du sens d'écriture, les parenthèses paraissent inversées.

Exemple 3. Les expressions mathématiques.
Le problème est encore plus ennuyeux dans le cas d'une expression mathématique. En effet x > y devient faux si on inverse le sens d'écriture car on obtient y > x.

Pour éviter ce problème, le jeu de caractères UTF comporte les informations nécessaires pour permettre le remplacement de certains caractères par le caractère miroir lorsque le sens d'écriture est changé. x > y devient alors y < x ce qui reste conforme à la première expression (le signe supérieur a été remplacé par le signe inférieur).
Suivant la même logique, les parenthèses, accolades ou crochets sont permutés pour que l'écriture reste logique.

Animation de la propriété direction.

La propriété direction ne peut pas être animée.

Simulateur avec la propriété direction.

Le simulateur applique la propriété direction sur un élément bidirectionnel (balise bdo) et sur un tableau (balise table).

direction :

Sur un élément bdo

Ce texte est inclus dans un élément HTML bdo, ce qui lui permet d'être sensible nativement à la propriété direction.
Votre navigateur effectue-t-il la substitution des caractères miroir ?
(parenthèses) - [crochets] - <symboles>

Sur une balise table
12345
678910

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Prise en charge par les navigateurs de la direction d'écriture en fonction de la langue (ltr pour les langues latines et rtl pour les langues arabes par exemple). Et prise en charge de la propriété direction.
1
Propriété
direction
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Historique de la propriété direction.

Au sujet des écritures non latines.

La prise en charge des modes d'écriture internationaux, incluant les écritures verticales (CJK), et le sens d'écriture de droite à gauche (l'arabe par exemple) est décrite dans la spécification CSS Writing Modes. La propriété direction fait partie de ce module, ainsi que les suivantes :

Propriétés :

✗
glyph-orientation-vertical
Définit l'orientation des caractères dans le cas d'une écriture verticale.
text-combine-upright
Définit l'orientation de groupes de caractères, dans le cas d'une écriture verticale.
text-orientation
Définit l'orientation des caractères dans le cas d'une écriture dans le sens vertical.
unicode-bidi
Gestion des possibilités d'écriture bidirectionnelle de Unicode.
writing-mode
Définit le sens et direction d'écriture (horizontale ou verticale).