Поддержка LTR и RTLlink

SIMAI Framework использует одно и то же дерево DOM и набор компонентов для направлений слева направо (ltr) и справа налево (rtl). Направление задаёт приложение, а отступы, границы и размещение относительно потока описываются логическими сторонами.

Задайте направление документаlink

Указывайте dir на корневом элементе вместе с языком страницы:

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

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

Явный dir имеет приоритет и не перезаписывается Loader. Если атрибут отсутствует, Loader определяет вычисленное направление корневого элемента и добавляет ltr или rtl. Для предсказуемого первого рендера всё равно рекомендуется задавать атрибут в исходной HTML-разметке.

Для фрагмента с другим направлением используйте вложенный dir:

<p dir="rtl">
  رقم الطلب <span dir="ltr">LTR-2026</span>
</p>

Логические стороныlink

Логические свойства зависят от направления текста:

Логическая сторона	`dir="ltr"`	`dir="rtl"`
`inline-start`	слева	справа
`inline-end`	справа	слева
`block-start`	сверху	сверху
`block-end`	снизу	снизу

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

.notice {
  margin-inline-start: 1rem;
  padding-inline: 1rem;
  border-inline-start: 0.25rem solid var(--sf-primary);
  text-align: start;
}

.actions {
  inset-inline-end: 0;
}

В утилитах SIMAI Framework применяйте семантические классы m-inline-start-*, m-inline-end-*, p-inline-start-*, p-inline-end-*, inline-start-* и inline-end-*.

<aside class="p-inline-start-4 p-inline-end-2 border-inline-start">
  Содержимое панели
</aside>

Компоненты и Smart-компонентыlink

Для направленно-зависимого размещения выбирайте семантические значения:

inline-start — начало строки;
inline-end — конец строки.

Например, боковая панель или модальное окно с position="inline-end" автоматически меняет физическую сторону при переключении dir. Для текста прогресса используйте text-position="inline-end".

Физические значения left и right остаются доступными для существующего кода и случаев, где нужна именно сторона экрана, а не сторона потока.

Когда нужны физические координатыlink

Не заменяйте left и right механически, если значение описывает:

координату указателя или перетаскивания;
геометрию range/slider;
позицию относительно viewport;
API сторонней библиотеки с физическими координатами.

Анимации с translateX() тоже не становятся RTL-безопасными автоматически. Если направление движения зависит от потока, добавьте явную ветку :dir(rtl).

.drawer {
  transform: translateX(-100%);
}

.drawer:dir(rtl) {
  transform: translateX(100%);
}

Совместимость сборкиlink

Сборщик SIMAI Framework добавляет направленно-зависимые физические fallback- декларации и сохраняет исходное логическое свойство после них. Современный браузер применяет логическое свойство, а совместимый fallback остаётся для старого окружения.

Не исправляйте ui или ui-smart вручную. Источником истины является ui-loader/src, а дистрибуции обновляются только воспроизводимой сборкой ui-builder.

Проверка интерфейсаlink

Проверьте один и тот же DOM в обоих направлениях:

Переключите корневой dir между ltr и rtl.
Убедитесь, что логические отступы, границы, меню и панели зеркалятся.
Проверьте формы, таблицы, модальные окна и Smart-компоненты.
Проверьте клавиатуру, порядок фокуса, Escape и состояния ошибок.
Убедитесь, что физические координаты и смешанный текст не зеркалятся ошибочно.

Открыть пример RTL-утилиты в SIMAI Framework Playground. Страница примера сама использует dir="rtl" и показывает базовые направленно-зависимые случаи: текст, логические отступы, порядок flex и inline-start/inline-end.

Успешная проверка одной страницы не означает готовность любого компонента. Готовность релиза подтверждается матрицей компонентов для конкретной согласованной сборки.