Retning - CSS-tricks

Anonim

Den directionejendom i CSS sætter retningen af indhold flow inden for en blok-niveau element. Dette gælder for tekst-, inline- og inline-block-elementer. Det indstiller også standardjusteringen af ​​tekst og retningen, som tabelceller flyder inden for en tabelrække.

.main-content ( direction: rtl; /* Right to Left */ )

De gyldige værdier er:

  • ltr - Venstre til højre, standard
  • rtl - Højre mod venstre
  • inherit - arver sin værdi fra det overordnede element

Teksten på denne side er indstillet i standardretningen ltr. Den mest almindelige brugssag, der skal indstilles, rtler websider med hebraisk eller arabisk tekst. Her er et eksempel på arabisk angivet i rtl:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

Der er en HTML-attribut til også at indstille retningen:

Både CSS-egenskaben og HTML-attributten vil kaskade retningen til nedstigende elementer. Det anbefales, at du bruger HTML-attributten, da det fungerer, selvom CSS mislykkes eller ikke påvirker siden af ​​en eller anden grund.

Der er også et specifikt HTML-tag, der kan bruges til at ændre retningen af ​​tekst: det tovejs tilsidesatte element. Dette eksisterer, så der er et semantikfrit element, der kun kan bruges til dette formål. For eksempel:

This text will go left to right. This text will go right to left.

For at parre alt dette med 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” = “tovejs”

Når man opretter layouts i en pre-flexbox-pre-grid-verden, vælger folk ofte mellem floats og inline-block for at oprette kolonner. En fordel ved inline-block, bortset fra at fjerne behovet for at rydde float, er, at ændring af retningsegenskaben også vender layoutet. Dette gælder ikke for floats, som skal nulstilles, hvis en webside understøtter flere sprog, og sprogretningen ændres fra ltr til rtl eller omvendt.

Hvis du har brug for at ændre retningen på et indbygget element (mod hvad dets overordnede blokniveauelement er), skal du enten bruge elementet eller sikre, at det indbyggede element indstiller unicode-bidi-egenskaben korrekt:

Some regular text reverse direction text text reverse direction
span(dir) ( unicode-bidi: bidi-override; )

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Nogen 9.2+ 5.5+ Nogen 3.1+