Представьте, что текст на вашем сайте отображается не горизонтально, как мы привыкли, а вертикально! Например, заголовок, идущий сверху вниз, или панель кнопок, выстроенных в вертикальный столбец. Такой необычный эффект достигается с помощью мощного, но зачастую недооцененного свойства CSS - writing-mode.

Мы указываем браузеру переориентировать макет, повернув текст выбранного элемента на 90 градусов. Чтобы увидеть это в действии, взгляните на демо ниже: выделите вертикальный заголовок, и курсор наклонится вбок, следуя за новой ориентацией текста.

Волшебство с заголовком происходит благодоря всего лишь одному свойству:

writing-mode: vertical-rl;

Эта строка меняет стандартное горизонтальное направление текста (слева направо) на вертикальное (сверху вниз). Если применить это свойство к элементу html, вся страница изменит ориентацию, включая направление прокрутки. В нашем примере только h1 отображается вертикально, а остальной контент остается в стандартном режиме.

Для чего используют свойство writing-mode?

Есть три причины, почему это свойство полезно, даже если вы работаете преимущественно только с одним языком:

1. Мировое разнообразие: Многие языки, такие как китайский, японский и корейский, используют вертикальное письмо. Знание данного свойства позволяет создавать сайты для таких языков или экспериментировать с новыми стилями.
2. Творческий дизайн: Даже в кириллице это свойство дает простор для креативности. Вы можете повернуть текст или элементы, чтобы сделать интерфейс уникальным и запоминающимся.
3. Основа современных макетов: Понимание свойства writing-mode упрощает работу с Flexbox и CSS Grid. Также отсутствует необходимость лишний раз применять transform: rotate. Максимальная нативность размещения контента - залог успешного сайта.

Согласно отзывам многих разработчиков, после освоения writing-mode такие свойства, как align-* и justify-*, стали интуитивно понятными. Можно продолжать использовать стандартное направление слева направо, как это делалось годами, или открыть новые возможности, где контент располагается в других направлениях.

Обзор свойства CSS writing-mode

Спецификация CSS Writing Modes разработана для поддержки разнообразных систем письма, учитывая их сложность. Эволюция письменности в мире — это запутанный и увлекательный процесс, который нашел отражение в этом стандарте. Объединив системы и виды письма, выделили следующие значения свойства:

writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

Но чтобы разобраться, как они работают, нужно понимать основные принципы построения веб-макетов и систем письма.

Блочное, строчное и символьное направления

В веб-разработке существуют понятия «блочного» и «строчного» элемента. Если вы использовали display: block или display: inline, вы уже сталкивались с этими терминами. В стандартном режиме блоки располагаются вертикально: от верха страницы вниз. Представьте несколько абзацев, выстроенных друг под другом — это блочное направление.

Строчное направление определяет, как текст располагается внутри строки. По умолчанию в вебе это движение слева направо по горизонтали. Представьте, как текст набирается посимвольно, словно на печатной машинке — это строчное направление.

За ориентацию символов отвечает символьное направление. Например, если вы пишете букву «А», ее верх - это точка, образующая угол между двумя длинными отрезками. Обычно верх символов направлен к верху страницы, но в разных языках символы могут быть повернуты по-разному.

Эти три направления формируют систему, лежащую в основе всех веб-макетов.

По умолчанию веб-страницы используют:

• Блочное направление: сверху вниз.
• Строчное направление: слева направо.
• Символьное направление: верх символов смотрит вверх.

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

Четыре системы письма в CSS

Спецификация CSS Writing Modes охватывает все сценарии использования для четырех основных систем письма: латинской, арабской, ханьской (CJK) и монгольской. Каждая из них имеет свои особенности, которые влияют на отображение текста и макета.

Латинская система письма

Латинская система письма доминирует в мире, охватывая около 70% населения планеты. Она используется в языках с латинским алфавитом (английский, испанский, французский, немецкий и др.), а также в языках с другими алфавитами, таких как греческий, кириллический (русский, украинский, болгарский) и брахмические шрифты (деванагари, тайский, тибетский).

• Строчное направление: слева направо (LTR).
• Блочное направление: сверху вниз.
• Символьное направление: верх символов направлен к верхнему краю страницы.

Эта система является стандартной для веба, поэтому CSS не требует дополнительных настроек:

html {
  writing-mode: horizontal-tb;  /* значение по-умолчанию */
}

Хорошей практикой считается указывать язык и направление текста в элементе html.

<html lang="ru" dir="ltr">

Арабская система письма

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

• Строчное направление: справа налево (RTL).
• Блочное направление: сверху вниз.
• Символьное направление: верх символов смотрит вверх.

Сообщить браузеру о направлении текста необходимо в элементе html.

<html lang="ar" dir="rtl">

А вот режим письма будет стандартным, как и у латинской системы.

html {
  writing-mode: horizontal-tb;
}

Это потому, что в обеих системах поток текста горизонтальный, а направление блока — сверху вниз.

Ханьская (CJK) система письма

Ханьская система письма используется в языках CJK (китайский, японский, корейский). Она поддерживает два варианта отображения текста: горизонтальный и вертикальный.

Горизонтальный вариант:

• Строчное направление: слева направо (LTR).
• Блочное направление: сверху вниз.
• Символьное направление: верх символов смотрит вверх.

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

Вертикальный вариант:

• Строчное направление: сверху вниз.
• Блочное направление: справа налево.
• Символьное направление: верх символов смотрит вверх.

Текст читается сверху вниз и начинать его нужно с правого верхнего угла. Этот вариант является традиционным для использующих его культур. Для этого случая значение CSS свойства будет таким:

html {
  writing-mode: vertical-rl;
}

Для японского языка атрибуты html будут следующие:

<html lang="ja" dir="ltr">

Монгольская система письма

Монгольская система письма — это вертикальная система, но с уникальными особенностями, отличающими её от ханьской.

• Строчное направление: сверху вниз.
• Блочное направление: слева направо.
• Символьное направление: верх символов направлен вправо.

Для монгольской системы режим письма будет следующим:

html {
  writing-mode: vertical-lr;
}

<html lang="mn" dir="ltr">

Глядя на примеры, можно обратить внимание, что для одних языков символы поворачиваются согласно направлениям чтения, а для других остаются в исходном виде. Это как раз и связано с символьным направлением. Оно автоматически определяется браузером (в этом нам дополнительно помогает атрибут lang) и согласно письменной системе соответствующе отрисовывается. Для принудительного поворота символов как раз и существуют остальные значения writing-mode.

Все значения и примеры свойства CSS writing-mode

Таблица ниже отображает примеры всех систем письма в сочетании с существующими значениями свойства. Подсвечивающаяся ячейка означает, что это отображение является правильным для данного вида письма.

Также стоит отметить случаи, когда необходимо иметь на странице несколько разных систем письма. Для этого достаточно добавлять атрибут lang не глобально к тегу html, а конкретно к необходимому блоку.

<section lang="en" dir="ltr"> Hello World! </section>
<section lang="ar" dir="rtl"> مرحبا بالعالم! </section>

Регулировать направление текста (LTR или RTL) можно с помощью специального свойства CSS direction:

.box-ltr {
  direction: ltr;
}
.box-rtl {
  direction: rtl;
}