Зачем нужны логические свойства: интернационализация

Традиционный CSS использует физические направления: top, right, bottom, left. Для языков с направлением слева направо (LTR), например английского, это удобно, но такой подход нарушается в языках с направлением справа налево (RTL), например арабском и иврите, а также в системах письма с вертикальным направлением, например в традиционном японском.

Сравним:

• Физические: top, right, bottom, left — фиксированы относительно экрана
• Логические: block-start, block-end, inline-start, inline-end — зависят от режима письма

В каждой системе письма есть:

• Блочная ось: направление, в котором располагаются блоки текста (вертикальное в LTR/RTL, горизонтальное при вертикальном письме)
• Строчная ось: направление, в котором текст идёт внутри строки (горизонтальное в LTR/RTL, вертикальное при вертикальном письме)

В LTR (английский): inline-start = left, inline-end = right. В RTL (арабский): inline-start = right, inline-end = left. Логические свойства автоматически адаптируются без медиазапросов и JavaScript.

Для сайта, созданного с использованием физических свойств, потребуется отдельная таблица стилей с переопределениями для RTL или переопределения каждого свойства margin, padding, border, position и выравнивания текста, которое должно измениться на противоположное. Это вдвое увеличивает объём работ по сопровождению.

Если задано writing-mode: vertical-rl (вертикальное письмо, например в японском или корейском), блочная ось становится горизонтальной, а строчная — вертикальной. Логические свойства адаптируются автоматически.

Все основные браузеры поддерживают логические свойства. Спецификация CSS теперь рекомендует использовать логические свойства для любого свойства, связанного с направлением, которое может измениться из-за режима письма или направления текста.

Одна кодовая база с правильно применёнными логическими свойствами поддерживает LTR, RTL и вертикальное письмо без дублирования. CSS просто следует значениям direction и writing-mode корневого элемента.

Задавайте направление письма в HTML, а не только в CSS:

Не нужно сразу переписывать весь CSS. Начните использовать логические свойства в новых компонентах. Со временем заменяйте физические свойства в компонентах, относящихся к областям, чувствительным к интернационализации.

Свойство CSS direction (ltr или rtl) влияет на направление строчного потока. Оно работает вместе с writing-mode и задаёт полный контекст системы письма элемента.

Логические свойства CSS используют блочную и строчную модель вместо физических top/right/bottom/left. Благодаря этому одна таблица стилей работает для LTR, RTL и систем письма с вертикальным направлением. Свойства direction и writing-mode задают контекст, к которому логические свойства адаптируются автоматически.