Smer - Triky CSS

Anonim

directionVlastnosť CSS určuje smer toku obsahu v rámci bloku úrovni prvok a. To platí pre textové, vložené a blokované prvky. Nastavuje tiež predvolené zarovnanie textu a smer, ktorým bunky bunky prúdia v rámci riadku tabuľky.

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

Platné hodnoty sú:

  • ltr - Zľava doprava, predvolené nastavenie
  • rtl - Zprava doľava
  • inherit - dedí svoju hodnotu od nadradeného prvku

Text na tejto stránke je nastavený v predvolenom ltrsmere. Najbežnejším prípadom použitia rtlje nastavenie pre webové stránky s hebrejským alebo arabským textom. Tu je príklad arabčiny v RTL:

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

Existuje aj atribút HTML pre nastavenie smeru:

Vlastnosť CSS aj atribút HTML budú kaskádovo smerovať k potomkom. Odporúča sa použiť atribút HTML, pretože ten bude fungovať, aj keď CSS zlyhá alebo z akéhokoľvek dôvodu neovplyvní stránku.

Existuje aj špecifická značka HTML, ktorú je možné použiť na zmenu smeru textu: prvok obojsmerného prepísania. Toto existuje, takže existuje iba prvok bez sémantiky, ktorý sa dá použiť práve na tento účel. Napríklad:

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

Spárovať to všetko 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” = “obojsmerný”

Pri vytváraní rozloženia vo svete pred mriežkou pred flexboxom si ľudia často vybrali stĺpce pomocou plavákov a vloženého bloku. Jednou z výhod vloženého blokovania, okrem odstránenia potreby vyčistiť plavák, je to, že zmena vlastnosti smeru zmení aj rozloženie. To neplatí pre plaváky, ktoré by bolo potrebné resetovať, ak webová stránka podporuje viac jazykov a smer jazyka sa zmenil z ltr na rtl alebo naopak.

Ak potrebujete zmeniť smer vloženého prvku (v porovnaní s jeho nadradeným prvkom na úrovni bloku), budete musieť tento prvok použiť alebo zabezpečiť, aby vložený prvok správne nastavil vlastnosť unicode-bidi:

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

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
2,0+ 1,3+ akýkoľvek 9,2+ 5,5+ akýkoľvek 3,1+