Smer - CSS-triki

Anonim

directionHotel v CSS določa smer toka vsebin v ravni blok elementu. To velja za elemente besedila, vrstice in vrstice. Določa tudi privzeto poravnavo besedila in smer pretoka celic tabele znotraj vrstice tabele.

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

Veljavne vrednosti so:

  • ltr - Privzeto od leve proti desni
  • rtl - Desno na levo
  • inherit - podeduje svojo vrednost iz nadrejenega elementa

Besedilo na tej strani je nastavljeno v privzeti ltrsmeri. Najpogostejši primer uporabe rtlje spletna stran s hebrejskim ali arabskim besedilom. Tu je primer arabščine, nastavljene v rtl:

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

Obstaja tudi atribut HTML za nastavitev smeri:

Lastnost CSS in atribut HTML bosta kaskadno usmerila padajoče elemente. Priporočljivo je, da uporabite atribut HTML, saj bo to delovalo, tudi če CSS ne uspe ali ne vpliva na stran iz kakršnega koli razloga.

Obstaja tudi posebna oznaka HTML, ki jo lahko uporabimo za spreminjanje smeri besedila: dvosmerni element preglasitve. To obstaja, zato obstaja element brez semantike, ki ga lahko uporabimo samo v ta namen. Na primer:

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

Če želite vse to združiti s 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” = “dvosmerno”

Pri ustvarjanju postavitev v svetu pred omrežjem pre-flexbox so ljudje pogosto ustvarjali stolpce med plovci in vrsticami. Ena od prednosti vgradnega bloka, razen odstranjevanja potrebe po čiščenju plovca, je ta, da sprememba lastnosti smeri spremeni tudi postavitev. To ne velja za floats, ki bi jih bilo treba ponastaviti, če spletna stran podpira več jezikov in se jezikovna smer spremeni iz ltr v rtl ali obratno.

Če morate spremeniti smer elementa v vrstici (glede na to, kakšen je njegov element na ravni nadrejenega bloka), boste morali uporabiti element ali pa zagotoviti, da element inline pravilno nastavi lastnost unicode-bidi:

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

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1,3+ Kaj 9,2+ 5,5+ Kaj 3.1+