Direcție - CSS-Tricks

Anonim

directionProprietatea în CSS stabilește direcția fluxului de conținut într - un element de nivel bloc. Acest lucru se aplică textului, elementelor inline și elementelor de blocare inline. De asemenea, setează alinierea implicită a textului și direcția pe care celulele de tabel le curg într-un rând de tabel.

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

Valorile valide sunt:

  • ltr - De la stânga la dreapta, implicit
  • rtl - De la dreapta la stanga
  • inherit - își moștenește valoarea de la elementul părinte

Textul de pe această pagină este setat în ltrdirecția implicită . Cel mai frecvent caz de utilizare setat rtleste pentru paginile web cu text ebraic sau arab. Iată un exemplu de arabă setată în rtl:

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

Există și un atribut HTML pentru setarea direcției:

Atât proprietatea CSS, cât și atributul HTML vor cascada direcția către elementele descendente. Este recomandat să utilizați atributul HTML, deoarece acesta va funcționa chiar dacă CSS nu reușește sau nu afectează pagina din orice motiv.

Există, de asemenea, o etichetă HTML specifică care poate fi utilizată pentru schimbarea direcției textului: elementul de suprascriere bidirecțională. Acest lucru există, deci există un element fără semantică pentru a fi folosit doar în acest scop. De exemplu:

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

Pentru a asocia toate acestea cu 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” = „bidirecțional”

Atunci când creează machete într-o lume pre-grilă pre-flexbox, oamenii au ales adesea între flotante și blocuri inline pentru a crea coloane. Un avantaj al blocării în linie, altul decât eliminarea necesității de a șterge plutitorul, este că schimbarea proprietății de direcție inversează și aspectul. Acest lucru nu este valabil pentru floats, care ar trebui să fie resetate dacă o pagină web acceptă mai multe limbi și direcția limbii s-a schimbat de la ltr la rtl sau invers.

Dacă trebuie să schimbați direcția unui element inline (în raport cu elementul său de nivel de bloc părinte), fie va trebui să utilizați elementul, fie să vă asigurați că elementul inline setează proprietatea unicode-bidi în mod corespunzător:

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

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
2.0+ 1.3+ Orice 9.2+ 5.5+ Orice 3.1+