В directionимота в CSS определя посоката на потока на съдържанието в рамките на блоков елемент ниво. Това се отнася за текстови, вградени и вградени блокови елементи. Той също така задава подравняването на текста по подразбиране и посоката, в която клетките на таблицата се движат в реда на таблицата.
.main-content ( direction: rtl; /* Right to Left */ )Валидните стойности са:
ltr- Отляво надясно, по подразбиранеrtl- От дясно на лявоinherit- наследява стойността си от родителския елемент
Текстът на тази страница е зададен в ltrпосоката по подразбиране . Най-често срещаният случай за използване rtlе за уеб страници с иврит или арабски текст. Ето пример за арабски набор в rtl:
هيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Има и HTML атрибут за задаване на посоката:
И CSS свойството, и HTML атрибутът ще каскадират посоката към низходящи елементи. Препоръчително е да използвате атрибута HTML, тъй като това ще работи дори ако CSS се провали или не повлияе на страницата по някаква причина.
Съществува и специфичен HTML таг, който може да се използва за промяна на посоката на текста: двупосочен елемент за замяна. Това съществува, така че има елемент без семантика, който да се използва само за тази цел. Например:
This text will go left to right. This text will go right to left.За да сдвоите всичко това с 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” = “двупосочен”
Когато създават оформления в света преди мрежата pre-flexbox, хората често избират между плувки и вграден блок, за да създават колони. Едно от предимствата на вградения блок, освен премахването на необходимостта от изчистване на поплавъка, е, че промяната на свойството посока обръща и оформлението. Това не е вярно за поплавъци, които ще трябва да бъдат нулирани, ако дадена уеб страница поддържа множество езици и посоката на езика е променена от ltr на rtl или обратно.
Ако трябва да промените посоката на вградения елемент (спрямо това, което е неговият елемент на ниво родителски блок), или ще трябва да използвате елемента, или да се уверите, че вграденият елемент задава свойството unicode-bidi правилно:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Всякакви | 9.2+ | 5,5+ | Всякакви | 3.1+ |