«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


В русском языке, как и в большинстве других, написание и чтение текста происходит слева направо.

А вот, например, арабский язык и иврит устроены иначе - в них чтение происходит справа налево.

Так как быть, при использовании в одном документе разных по написанию языков?

В CSS при помощи свойств direction и unicode-bidi есть возможность задавать необходимое направление написания текста в зависимости от используемого языка.



Свойство direction

Свойство direction указывает направление написания текста:

- значение по умолчанию ltr соответствует привычному для нас направлению написания текста - слева направо;

- значение rtl соответствует направлению справа налево. Но при этом само направление написания текста не изменяется, а только происходит смещение текста вправо, а также перемещение конечных символов строки в ее начало.

Фрагмент кода

<p> Текст отображен в привычном для нас виде!!! </p>
<p style="direction
:rtl;"> Текст смещен вправо. Конечные символы строки расположены в ее начале!!! </p>

Результат

Текст отображен в привычном для нас виде!!!

Текст смещен вправо. Конечные символы строки расположены в ее начале!!!

Свойство unicode-bidi

Свойство unicode-bidi при значении embed следует правилам, установленным свойством direction, а при значении bidi-override кроме этого еще и располагает текст в указанном направлении.

Свойства direction и unicode-bidi применимы ко всем элементам.

Фрагмент кода

<p style="direction:rtl; unicode-bidi:embed;"> Конечные символы строки расположены в ее начале!!! </p>
<p style="direction:
rtl; unicode-bidi:bidi-override;"> Направление написания текста изменено в противоположную сторону!!! </p>

Результат

Конечные символы строки расположены в ее начале!!!

Направление написания текста изменено в противоположную сторону!!!

Подведем итог: таким образом свойство direction лишь указывает направление написания текста, а свойство unicode-bidi непосредственно располагает текст в нужном направлении.


CSS по шагам

Все cвойства CSS