Retning - CSS-triks

Anonim

Den directionegenskap i CSS angir retningen av innholdet strømning i en blokk-nivå element. Dette gjelder tekst-, inline- og inline-block-elementer. Den angir også standardjusteringen av tekst og retningen som tabellceller flyter i en tabellrad.

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

De gyldige verdiene er:

  • ltr - Venstre til høyre, standard
  • rtl - Høyre til venstre
  • inherit - arver verdien fra det overordnede elementet

Teksten på denne siden er satt i standardretningen ltr. Den vanligste brukssaken å angi rtler for websider med hebraisk eller arabisk tekst. Her er et eksempel på arabisk satt i rtl:

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

Det er et HTML-attributt for å sette retningen også:

Både CSS-egenskapen og HTML-attributtet vil kaste retningen til nedstigende elementer. Det anbefales at du bruker HTML-attributtet, da det fungerer selv om CSS mislykkes eller ikke påvirker siden av en eller annen grunn.

Det er også en spesifikk HTML-tag som kan brukes til å endre retningen på teksten: det toveis overstyringselementet. Dette eksisterer, så det er et semantikkfritt element å bruke bare for dette formålet. For eksempel:

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

For å koble 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” = “toveis”

Når du lager layouter i en pre-flexbox-pre-grid-verden, velger folk ofte mellom floats og inline-block for å lage kolonner. En fordel med inline-block, annet enn å fjerne behovet for å fjerne flottøren, er at endring av retningsegenskapen også reverserer oppsettet. Dette gjelder ikke flyter, som må tilbakestilles hvis en webside støtter flere språk og språkretningen endres fra ltr til rtl eller omvendt.

Hvis du trenger å endre retningen på et innebygd element (mot hva det overordnede blokknivåelementet er), må du enten bruke elementet eller sørge for at det innebygde elementet setter unicode-bidi-egenskapen riktig:

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

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
2.0+ 1.3+ Noen 9.2+ 5.5+ Noen 3.1+