Směr - Triky CSS

Anonim

directionVlastnost CSS určuje směr toku obsahu v rámci bloku úrovni prvek a. To platí pro textové, vložené a vložené blokové prvky. Také nastavuje výchozí zarovnání textu a směr, kterým buňky tabulky proudí v řádku tabulky.

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

Platné hodnoty jsou:

  • ltr - Zleva doprava, výchozí
  • rtl - Zprava doleva
  • inherit - zdědí svou hodnotu od nadřazeného prvku

Text na této stránce je nastaven ve výchozím ltrsměru. Nejběžnějším případem použití je nastavení rtlpro webové stránky s hebrejským nebo arabským textem. Zde je příklad arabštiny v rtl:

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

K dispozici je také atribut HTML pro nastavení směru:

Vlastnost CSS i atribut HTML budou kaskádovitě směřovat k sestupným prvkům. Doporučuje se použít atribut HTML, protože to bude fungovat, i když CSS selže nebo z jakéhokoli důvodu neovlivní stránku.

K dispozici je také konkrétní značka HTML, kterou lze použít ke změně směru textu: prvek obousměrného přepsání. To existuje, takže existuje prvek bez sémantiky, který lze použít právě pro tento účel. Například:

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

Chcete-li toto vše spárovat 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” = “obousměrný”

Při vytváření rozvržení ve světě před mřížkou před flexboxem lidé často volili mezi plováky a vloženým blokem vytváření sloupců. Jednou z výhod vloženého bloku, kromě odstranění nutnosti vyčistit plovák, je to, že změna vlastnosti směru obrátí také rozložení. To neplatí pro plováky, které by musely být resetovány, pokud webová stránka podporuje více jazyků a směr jazyka se změnil z ltr na rtl nebo naopak.

Pokud potřebujete změnit směr vloženého prvku (oproti tomu, co je jeho nadřazený prvek na úrovni bloku), budete muset buď použít prvek, nebo zajistit, aby vložený prvek správně nastavil vlastnost unicode-bidi:

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

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
2,0+ 1,3+ Žádný 9,2+ 5,5+ Žádný 3.1+