Направление текста

Framework поддерживает письмо слева направо (LTR) и справа налево (RTL). Эта глава объясняет, как задавать стороны так, чтобы интерфейс правильно зеркалился без отдельной вёрстки.

Начало и конец вместо левого и правого

При RTL зеркалится не только текст, но и отступы, иконки, меню и навигация. Поэтому для сторон, которые зависят от направления письма, Framework говорит не «слева» и «справа», а «начало» (start) и «конец» (end) строки. В RTL начало находится справа.

Направление задаётся атрибутом dir у документа или у контейнера. Компоненты определяют его по CSS и DOM: данные не переставляются.

<div dir="rtl" class="p-inline-start-4">Начало строки справа</div>

Пример

Пример показывает один и тот же отступ от начала строки в двух направлениях. Сравните положение подписи в двух панелях:

<div dir="ltr" class="bg-surface-container p-2"><div style="padding-inline-start:3rem">Начало строки: слева</div></div>
<div dir="rtl" class="bg-surface-container p-2"><div style="padding-inline-start:3rem">Начало строки: справа</div></div>

Что важно заметить:

• dir не следует из lang. Язык и направление задаются отдельно: странице на арабском или иврите нужны оба атрибута, <html lang="ar" dir="rtl">. Ядро ставит dir на <html>, только если его там нет, и берёт значение из вычисленного CSS-направления, а не из языка. Атрибут lang ядро не ставит никогда: его пишет страница.
• Свои стрелки компонент зеркалит сам (например, стрелки пагинации, меню и хлебных крошек). Иконка, которую передал проект (icon-start, icon-end у кнопки, иконка в разметке), рисуется как есть: для RTL проект выбирает подходящий знак сам или отражает его своим правилом, например [dir="rtl"] .project-next .sf-icon { transform: scaleX(-1); }. Шрифт иконок не зеркалит ни один знак, в том числе arrow_*, chevron_* и keyboard_arrow_*.
• Смена dir во время работы страницы. Стили по [dir="rtl"] и :dir() применяются сразу. Компоненты, которые считают положение скриптом (календарь, всплывающие панели), читают направление при следующем открытии.
• Вынесенные панели. Список sf-dropdown, календарь sf-datepicker, выдвижная панель и подсказка берут направление там, где стоит сам компонент или его триггер (ближайший предок с dir, иначе html), а не там, куда вынесена панель. Поэтому dir на обёртке компонента достаточно: на body его ставить не нужно.

Правила

• Отступы и положение по строке задаются логическими свойствами: padding-inline-start, margin-inline-end, inset-inline-start. Утилиты горизонтальных отступов логические: p-inline-start-N, p-inline-end-N, p-x-N, m-inline-start-N. Физических left/right у них нет.
• Вертикальные стороны (top, bottom) от направления письма не зависят.
• Координаты окна, положение при перетаскивании, геометрия ползунка и код сторонних библиотек остаются физическими: это замер, а не сторона строки.
• Сдвиг translateX, зависящий от направления, требует явной ветки для RTL: замены только свойства положения недостаточно.
• Сборка дописывает перед логическим свойством физический запасной вариант для старых браузеров; логическое объявление остаётся главным.

Имена настроек компонентов

В Smart-компонентах стороны называются так же: icon-start и icon-end у кнопки и бейджа, icon-start и text-end у поля. У выдвижной панели положение задаётся как inline-start или inline-end. Подробно — на страницах компонентов в справочнике.

• Рекомендуется проверять и русскую страницу в зеркальном режиме: так видны места, где случайно использованы физические стороны.

Смотрите также

• Виды значений — значения направлений и выравнивания.
• Как устроено имя утилиты и Значения — синтаксис логических утилит.
• Компоненты и Smart-компоненты — настройки сторон у каждого компонента.
• Язык интерфейса — язык страницы, который задаётся отдельно от направления.