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 :

CSS - Propriété direction

Description.

La propriété direction définit le sens d'écriture pour le texte : européen (de gauche à droite), arable ou hébreu (de droite à gauche).

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. 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. Si la feuille de styles n'est pas disponible, on ne perd pas seulement la mise en page mais aussi la signification du contenu.

Le texte bidirectionnel - Tutoriel.

L'attribut dir.

L'attribut dir peut être ajouté à n'importe quelle balise HTML. Il 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".

La balise bdo.

Voici la syntaxe de la balise 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

 

Notez que la propriété direction doit de toute façon être appliquée à 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 p, ça ne marche pas /p bdo style="direction:rtl" Sur une balise bdo ça marche /bdo

Sur un paragraphe p, ça ne marche pas
Sur une balise bdo ça marche

 

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.

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: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur applique la propriété direction sur un élément bdo. Ce qui permet de se dispenser d'utiliser unicode-bidi.

direction :
L'alphabet arabe est un système d'écriture qui comporte initialement 28 lettres et s'écrit horizontalement de droite à gauche.
الأبجدية العربية هي نظام كتابة يحتوي في البداية على 28 حرفًا ويتم كتابته أفقيًا من اليمين إلى اليسار.

Voir aussi...

Langues non latines : arabes, chinoises, japonaises ou coréennes - Propriétés.

  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • line-break : Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
  • unicode-bidi : Gestion des possibilités d'écriture bidirectionnelle de Unicode.
  • writing-mode : Sens et direction d'écriture (horizontale ou verticale).

Blocs de texte - Propriétés.