Для европейских языков характерно чтение слева направо и в таком же порядке на веб-странице располагаются строчные элементы. Но есть ряд языков (иврит, арабский, фарси и др.), где чтение происходит справа налево — для них меняется направление строчной оси и, соответственно, порядок элементов (рис. 1).
Рис. 1. Строчная ось для текста справа налево
Справа налево
Чтобы указать направление письма, к примеру, для арабского текста, в HTML применяется атрибут dir со значением rtl (right to left, справа налево).
<p>Рыжая лисица</p>
<p dir="rtl">ثعلب أحمر</p>
Смена направления письма влияет и на строчные элементы, которые меняют свой порядок отображения. В примере 1 в первом абзаце строчные элементы выводятся слева направо, а во втором абзаце справа налево.
Пример 1. Атрибут dir
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
span {
background: #008eb0; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 5px; /* Расстояние от текста до края */
}
</style>
</head>
<body>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
<p dir="rtl">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
</body>
</html>
Результат данного примера показан на рис. 2. Обратите внимание, что порядок элементов в коде HTML для текста справа налево уже не соответствует порядку их вывода в браузере.
Рис. 2. Направление письма справа налево
Вместо атрибута dir можно использовать стилевое свойство direction, которое выполняет ту же роль (пример 2). При этом спецификация CSS настоятельно рекомендует всегда оставлять dir на случай, если пользователь по какой-либо причине отключил стили.
Пример 2. Использование direction
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
blockquote {
background-color: #d9c2ad; /* Цвет фона */
padding: 1rem; /* Расстояние от текста до края */
}
blockquote[lang="ar"] {
direction: rtl; /* Справа налево */
}
</style>
</head>
<body>
<blockquote>Только упомянешь кота, как он уже бежит.</blockquote>
<blockquote lang="ar">جبنا سيرة القط جاي ينط</blockquote>
</body>
</html>
В данном примере к цитате <blockquote> добавлен атрибут lang с кодом арабского языка. При наличии этого атрибута используется свойство direction со значением rtl (рис. 3).
Рис. 3. Арабский текст
Сверху вниз
В некоторых японских текстах (например, в манге) текст идёт вертикально сверху вниз и справа налево (рис. 4).
Рис. 4. Манга
Во многих языках вертикальное написание текста традиционно применяется на корешках книг (рис. 5).
Рис. 5. Корешки книг
Для изменения направления письма на вертикальное в CSS используется стилевое свойство writing-mode со значением vertical-lr (вертикально слева направо) или vertical-rl (вертикально справа налево). В табл. 1 показаны разные варианты написания одного и того же текста с учётом этого свойства.
Табл. 1. Вертикальный текст
| Обычный текст |
vertical-lr |
vertical-rl |
Словарь
эпитетов |
Словарь
эпитетов |
Словарь
эпитетов |
Свойство writing-mode также меняет направление осей.
vertical-lr
- блочные элементы идут слева направо;
- строчные элементы идут сверху вниз.
vertical-rl
- блочные элементы идут справа налево;
- строчные элементы идут сверху вниз.
На рис. 6 показано направление осей для значения vertical-rl.
Рис. 6. Блочная и строчная оси для вертикального текста
Смена осей приводит и к изменению порядка отображения элементов на веб-странице.
Свойство writing-mode часто используется в комбинации с text-orientation, которое «поворачивает» каждую букву в привычное положение (рис. 7). Большие тексты в таком виде читать неудобно, а для заголовков такая стилизация вполне подходит.
Рис. 7. Вертикальный текст
В примере 3 показано создание заголовка с вертикальным направлением письма.
Пример 3. Использование writing-mode
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поток</title>
<style>
.ja {
background: #d95284; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px; /* Расстояние от текста до края */
writing-mode: vertical-lr; /* Вертикальное написание текста */
text-orientation: upright; /* Вертикальная ориентация */
}
</style>
</head>
<body>
<h2 class="ja">Цветение<br>сакуры</h2>
<p>Цветение сакуры — это волшебное время, когда деревья покрываются
нежными розовыми и белыми цветами, создавая незабываемое зрелище.</p>
</body>
</html>
Итоги
- Направление письма зависит от используемого языка:
- текст на европейских языках пишется и читается слева направо;
- тексты на таких языках как иврит и арабский пишутся и читаются справа налево;
- некоторые японские тексты пишутся и читаются сверху вниз и справа налево.
- Направление письма меняет ориентацию осей и, соответственно, элементов, которые на ней располагаются.
- Для указания направления письма справа налево применяется атрибут dir со значением rtl. Эту же роль выполняет и свойство direction со значением rtl.
- Для указания направления письма сверху вниз используется свойство writing-mode со значением vertical-lr или vertical-rl.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.06.2025