De directioneigenschap in CSS bepaalt de richting van de inhoudsstroom binnen een element op blokniveau. Dit geldt voor tekst-, inline- en inline-blokelementen. Het stelt ook de standaarduitlijning van tekst in en de richting waarin tabelcellen binnen een tabelrij stromen.
.main-content ( direction: rtl; /* Right to Left */ )De geldige waarden zijn:
ltr- Van links naar rechts, de standaardinstellingrtl- Rechts naar linksinherit- erft zijn waarde van het bovenliggende element
De tekst op deze pagina is ingesteld in de standaardrichting ltr. Het meest voorkomende gebruiksscenario rtlis voor webpagina's met Hebreeuwse of Arabische tekst. Hier is een voorbeeld van een Arabische set in rtl:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Er is ook een HTML-kenmerk om de richting in te stellen:
Zowel de CSS-eigenschap als het HTML-attribuut zullen de richting trapsgewijs naar onderliggende elementen leiden. Het wordt aanbevolen om het HTML-attribuut te gebruiken, omdat dat ook werkt als CSS mislukt of de pagina om welke reden dan ook niet beïnvloedt.
Er is ook een specifieke HTML-tag die kan worden gebruikt om de richting van tekst te veranderen: het bidirectionele override-element. Dit bestaat dus er is een semantiekvrij element om alleen voor dit doel te gebruiken. Bijvoorbeeld:
This text will go left to right. This text will go right to left.Om dit allemaal te koppelen aan 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" = "bidirectioneel"
Bij het maken van lay-outs in een pre-flexbox pre-grid-wereld, kozen mensen vaak tussen floats en inline-block om kolommen te maken. Een voordeel van inline-block, behalve het verwijderen van de noodzaak om de float leeg te maken, is dat het veranderen van de eigenschap direction ook de lay-out omkeert. Dit geldt niet voor floats, die moeten worden gereset als een webpagina meerdere talen ondersteunt en de taalrichting verandert van ltr naar rtl of vice versa.
Als u de richting van een inline-element moet wijzigen (ten opzichte van het bovenliggende blokniveau-element), moet u het element gebruiken of ervoor zorgen dat het inline-element de eigenschap unicode-bidi correct instelt:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Ieder | 9.2+ | 5.5+ | Ieder | 3.1+ |