Перейти к содержанию

unicode-bidi

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

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

Демо

Режимы письма

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
/* Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;

Значения

normal
Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода.
embed
Переопределяет параметры текста, располагая его, как указано в свойстве direction.
bidi-override
Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction.

Значение по-умолчанию:

1
unicode-bidi: normal;

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>unicode-bidi</title>
    <style>
      .rtl p {
        unicode-bidi: bidi-override; /* Меняются характеристики текста */
        direction: rtl; /* Текст пишется справа налево */
      }
    </style>
  </head>
  <body>
    <div class="rtl">
      <p>А роза упала на лапу Азора.</p>
      <p>У лип Леша нашел пилу.</p>
      <p>И городу дорог огород у дороги.</p>
      <p>Уж я веники не вяжу.</p>
      <p>Аргентина манит негра.</p>
      <p>
        Он дивен, палиндром — и ни морд, ни лап не видно.
      </p>
      <p>
        Но невидим архангел, мороз узором лег на храм и
        дивен он.
      </p>
      <p>Леша на полке клопа нашел.</p>
      <p>Я не стар брат Сеня.</p>
    </div>
  </body>
</html>

Комментарии