directionWłaściwość CSS wyznacza kierunek przepływu zawartości w elemencie blokowym. Dotyczy to elementów tekstowych, inline i inline-block. Ustawia również domyślne wyrównanie tekstu i kierunek przepływu komórek tabeli w wierszu tabeli.
.main-content ( direction: rtl; /* Right to Left */ )Prawidłowe wartości to:
ltr- Domyślnie od lewej do prawejrtl- Od prawej do lewejinherit- dziedziczy swoją wartość z elementu nadrzędnego
Tekst na tej stronie jest ustawiony w domyślnym ltrkierunku. Najczęściej ustawiany przypadek użycia rtldotyczy stron internetowych z tekstem hebrajskim lub arabskim. Oto przykład arabskiego ustawionego w rtl:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Istnieje również atrybut HTML do ustawiania kierunku:
Zarówno właściwość CSS, jak i atrybut HTML będą kaskadować kierunek do elementów podrzędnych. Zaleca się użycie atrybutu HTML, ponieważ zadziała on nawet wtedy, gdy CSS zawiedzie lub nie wpłynie na stronę z jakiegokolwiek powodu.
Istnieje również specjalny znacznik HTML, którego można użyć do zmiany kierunku tekstu: dwukierunkowy element przesłonięcia. Istnieje, więc istnieje element wolny od semantyki, którego można użyć tylko do tego celu. Na przykład:
This text will go left to right. This text will go right to left.Aby sparować to wszystko z 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” = „dwukierunkowy”
Tworząc układy w świecie sprzed siatki flexbox, ludzie często wybierali między elementami pływającymi a blokami inline, aby tworzyć kolumny. Jedną zaletą inline-block, inną niż usunięcie potrzeby czyszczenia pływaka, jest to, że zmiana właściwości kierunku powoduje również odwrócenie układu. Nie dotyczy to elementów zmiennoprzecinkowych, które należałoby zresetować, jeśli strona internetowa obsługuje wiele języków, a kierunek języka został zmieniony z ltr na rtl lub odwrotnie.
Jeśli chcesz zmienić kierunek elementu wbudowanego (względem tego, jaki jest jego element nadrzędny na poziomie bloku), musisz albo użyć tego elementu, albo upewnić się, że element wbudowany prawidłowo ustawia właściwość unicode-bidi:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Każdy | 9.2+ | 5.5+ | Każdy | 3.1+ |