Irány - CSS-trükkök

Anonim

A directionCSS tulajdonság a blokk szintű elemen belül határozza meg a tartalom áramlásának irányát. Ez vonatkozik a szöveges, az inline és az inline-block elemekre. Beállítja a szöveg alapértelmezett igazítását és azt az irányt is, amelyet a táblázat cellái egy táblázat sorában folytatnak.

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

Az érvényes értékek a következők:

  • ltr - Balról jobbra, az alapértelmezett
  • rtl - Jobbról balra
  • inherit - örökli az értékét a szülő elemtől

Ezen az oldalon a szöveg az alapértelmezett ltrirányba van beállítva . A leggyakoribb használati eset rtla héber vagy arab szöveget tartalmazó weboldalak. Íme egy példa az rtl arab halmazára:

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

Van egy HTML attribútum az irány beállításához is:

A CSS tulajdonság és a HTML attribútum is a leszármazott elemek irányába mutat. Javasoljuk a HTML attribútum használatát, mivel ez akkor is működni fog, ha a CSS meghibásodik, vagy bármilyen okból nem befolyásolja az oldalt.

Van egy speciális HTML-címke is, amely felhasználható a szöveg irányának megváltoztatására: a kétirányú felülírási elem. Ez létezik, így van egy szemantika nélküli elem, amelyet csak erre a célra használhatunk. Például:

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

Mindezek párosítása a CSS-szel ...

*(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” = „kétirányú”

Amikor elrendezéseket hoztak létre a flexbox előtti rács előtti világban, az emberek gyakran az úszók és az inline-blokkok között választottak oszlopok létrehozásához. Az inline blokk egyik előnye, az úszó tisztításának szükségességétől eltekintve, hogy az iránytulajdonság megváltoztatása megfordítja az elrendezést is. Ez nem igaz az úszókra, amelyeket vissza kell állítani, ha egy weboldal több nyelvet támogat, és a nyelv iránya ltr-rtl-re változik, vagy fordítva.

Ha meg kell változtatnia egy inline elem irányát (szemben azzal, ami annak szülőblokk szintű eleme), vagy használnia kell az elemet, vagy meg kell győződnie arról, hogy az inline elem megfelelően állítja be az unicode-bidi tulajdonságot:

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

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
2.0+ 1.3+ Bármi 9.2+ 5.5+ Bármi 3.1+