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+ |