Suund - CSS-trikid

Anonim

directionCSS-is olev omadus määrab sisuvoo suuna plokitaseme elemendis. See kehtib teksti-, teksti- ja tekstiploki elementide kohta. See määrab ka teksti vaikesuunamise ja suuna, mida tabelirakud tabelireas liigutavad.

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

Kehtivad väärtused on:

  • ltr - Vasakult paremale, vaikimisi
  • rtl - paremalt vasakule
  • inherit - pärib oma väärtuse vanemelemendilt

Selle lehe tekst on seatud vaikesuunas ltr. Kõige tavalisem on juhtumiks rtlheebrea või araabiakeelse tekstiga veebilehtede kasutamine. Siin on näide araabia seadetest rtl:

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

Suuna määramiseks on ka HTML-atribuut:

Nii CSS-i omadus kui ka HTML-atribuut kaskaadivad suuna järeltulevatele elementidele. Soovitatav on kasutada HTML-atribuuti, kuna see töötab ka siis, kui CSS ebaõnnestub või ei mõjuta lehte mingil põhjusel.

Samuti on olemas konkreetne HTML-märgend, mida saab kasutada teksti suuna muutmiseks: kahesuunaline alistamise element. See on olemas, seega on selleks otstarbeks kasutatav semantikavaba element. Näiteks:

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

Selle kõige sidumiseks CSS-iga ...

*(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” = “kahesuunaline”

Paigutuste loomisel flexboxi-eelses ruudustiku-eelses maailmas valisid inimesed veergude loomiseks sageli ujukite ja inline-blocki vahel. Inline-blocki üks eelis peale ujuki puhastamise vajaduse eemaldamise on see, et suunaomaduse muutmine muudab ka paigutuse. See ei kehti ujukite puhul, mis tuleb lähtestada, kui veebileht toetab mitut keelt ja keele suund ltr-lt rtl-le või vastupidi on muudetud.

Kui peate muutma tekstisisese elemendi suunda (võrreldes selle vanema ploki taseme elemendiga), peate kas kasutama elementi või tagama, et tekstisisene element määrab atribuudi unicode-bidi õigesti:

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

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
2.0+ 1,3+ Ükskõik 9,2+ 5,5+ Ükskõik 3.1+