La directionpropriété en CSS définit la direction du flux de contenu dans un élément de niveau bloc. Cela s'applique aux éléments text, inline et inline-block. Il définit également l'alignement par défaut du texte et la direction dans laquelle les cellules de tableau circulent dans une ligne de tableau.
.main-content ( direction: rtl; /* Right to Left */ )Les valeurs valides sont:
ltr- De gauche à droite, la valeur par défautrtl- De droite à gaucheinherit- hérite sa valeur de l'élément parent
Le texte de cette page est défini dans la ltrdirection par défaut . Le cas d'utilisation le plus courant à définir rtlconcerne les pages Web contenant du texte en hébreu ou en arabe. Voici un exemple d'arabe défini dans rtl:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Il existe également un attribut HTML pour définir la direction:
La propriété CSS et l'attribut HTML feront en cascade la direction aux éléments descendants. Il est recommandé d'utiliser l'attribut HTML, car cela fonctionnera même si CSS échoue ou n'affecte pas la page pour une raison quelconque.
Il existe également une balise HTML spécifique qui peut être utilisée pour changer la direction du texte: l'élément de remplacement bidirectionnel. Cela existe donc il y a un élément sans sémantique à utiliser uniquement à cette fin. Par exemple:
This text will go left to right. This text will go right to left.Pour associer tout cela avec CSS…
*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )"Bidi" = "bidirectionnel"
Lors de la création de mises en page dans un monde pré-grille pré-flexbox, les gens ont souvent choisi entre les flottants et les blocs en ligne pour créer des colonnes. Un avantage du bloc en ligne, autre que de supprimer le besoin d'effacer le flottant, est que la modification de la propriété direction inverse également la disposition. Ce n'est pas le cas pour les flottants, qui devraient être réinitialisés si une page Web prend en charge plusieurs langues et que le sens de la langue est changé de ltr à rtl ou vice versa.
Si vous devez changer la direction d'un élément en ligne (par rapport à ce que son élément de niveau bloc parent est), vous devrez soit utiliser l'élément, soit vous assurer que l'élément en ligne définit correctement la propriété unicode-bidi:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Tout | 9.2+ | 5.5+ | Tout | 3.1+ |