Direction - Propriété CSS
Résumé des caractéristiques de la propriété direction
ltr | rtlltrdirection ne peut pas être animée.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.
Le simulateur applique la propriété direction sur un élément bidirectionnel (balise bdo)
et sur un tableau (balise table).
Sur un élément bdo
direction.Votre navigateur effectue-t-il la substitution des caractères miroir ?
(parenthèses) - [crochets] - <symboles>
Sur une balise |
||||
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
Prise en charge par les navigateurs (compatibilité).
directionNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété direction.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Définition initiale de la propriétédirectiondans la spécification du langage CSS version 2.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Modes d'écriture - Niveau 3
Pas de changement concernant la propriétédirection.02 Décembre 2010Document de travail.
20 Mars 2014Candidat à la recommandation.24 Octobre 2019Proposé à la recommandation.10 Décembre 2019Recommandation. -
Module CSS - Modes d'écriture - Niveau 4
Pas de changement concernant la propriétédirection.07 Décembre 2017Document de travail.24 Mai 2018Candidat à la recommandation.
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.