Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Type de valeur
Valeur prédéfinie
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 animatable : 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 proposé pour la 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" donte 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).

  • direction: initial; direction: inherit; direction: revert; direction: revert-layer; direction: unset;

    La valeur initiale est : ltr.

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.

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é).

1
direction
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que direction.

Les spécifications CSS éditées par le W3C sont organisées en modules. direction fait partie du Module CSS - Modes d'écriture (CSS Writing Modes). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit l'orientation de groupes de caractères, dans le cas d'une écriture verticale.
Définit l'orientation des caractères dans le cas d'une écriture dans le sens vertical.
Gestion des possibilités d'écriture bidirectionnelle de Unicode.
Sens et direction d'écriture (horizontale ou verticale).