RTL-языки

Поддержка языков с направлением письма справа налево (RTL — right-to-left) в интерфейсных компонентах требует согласованной работы HTML, CSS и JavaScript-логики. В контексте Slim Select основная задача заключается не только в визуальном развороте элементов, но и в сохранении корректного поведения поиска, выбора и навигации.

RTL-режим критичен для языков арабского, иврита, персидского и ряда других, где базовое направление текста влияет на восприятие интерфейса. Ошибки в реализации приводят к нарушению логики взаимодействия: курсор, иконки, отступы и выравнивание начинают противоречить привычному пользовательскому опыту.

Базовая активация RTL через HTML и CSS

Slim Select не требует отдельного режима RTL внутри JavaScript-инициализации, поскольку направление наследуется из контекста документа.

Основной механизм:

<html dir="rtl">

или точечно:

<div class="form-group" dir="rtl">
  <select id="select"></select>
</div>

CSS-уровень автоматически влияет на:

направление текста;
выравнивание содержимого;
порядок визуального расположения inline-элементов.

Slim Select, будучи построенным поверх стандартного <select>, подхватывает эти правила через DOM-структуру.

Поведение контейнера Slim Select в RTL

После инициализации Slim Select формирует собственную разметку:

контейнер селекта;
область отображения выбранных значений;
выпадающий список;
поле поиска (если включено).

В RTL-режиме изменяется ключевая логика отображения:

текст выравнивается по правому краю;
иконки (стрелка раскрытия, крестик удаления) смещаются влево;
padding и margin интерпретируются в зеркальном порядке;
порядок визуальных элементов внутри flex-контейнеров инвертируется.

Критически важно учитывать, что Slim Select не «перестраивает» DOM-структуру, а полагается на CSS-модель рендеринга.

Поисковое поле и RTL-выравнивание

Если включён режим поиска (search: true), появляется input-элемент внутри dropdown.

В RTL-режиме возникают типовые требования:

текст вводится справа налево;
курсор стартует с правой стороны поля;
placeholder должен быть выровнен по правому краю;
автодополнение сохраняет направление ввода.

Поведение зависит от свойства direction в CSS:

.ss-search input {
  direction: rtl;
  text-align: right;
}

Без явного задания text-align возможны ситуации, когда текст RTL вводится корректно, но визуальное выравнивание остаётся слева, что создаёт конфликт восприятия.

Отображение выбранных значений (multi-select)

В режиме множественного выбора Slim Select отображает выбранные элементы в виде «чипов» (tags).

В RTL-интерфейсах требуется зеркальная логика:

чипы располагаются справа налево;
кнопка удаления (×) должна находиться слева внутри чипа;
порядок добавления визуально идёт справа налево;
перенос строк начинается с правого края.

Типичная CSS-адаптация:

.ss-values {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.ss-value {
  flex-direction: row-reverse;
}

Такая конфигурация обеспечивает соответствие языковой модели и визуального поведения.

Выпадающий список и позиционирование

Dropdown в Slim Select позиционируется относительно контейнера. В RTL-режиме важны следующие аспекты:

выравнивание списка по правому краю;
корректное отображение ширины при динамическом контенте;
предотвращение смещения стрелки раскрытия.

CSS-правка:

.ss-content {
  right: 0;
  left: auto;
  text-align: right;
}

При использовании абсолютного позиционирования особенно важно избегать одновременного задания left и right, поскольку это может приводить к конфликтам вычисления ширины.

Иконки и визуальные индикаторы

Slim Select использует стандартные UI-индикаторы:

стрелка раскрытия;
иконка удаления выбранного значения;
индикаторы загрузки (если подключаются кастомно).

В RTL-интерфейсе требуется зеркалирование:

стрелка раскрытия должна указывать в противоположную сторону или сохранять направление, но перемещаться слева;
крестик удаления должен находиться в начале строки (визуально слева);
любые inline-SVG должны учитывать transform: scaleX(-1) при необходимости.

Пример:

.ss-arrow {
  transform: scaleX(-1);
}

Однако применение трансформации зависит от дизайна: иногда достаточно только изменения позиции через flex.

Поддержка динамического переключения направления

В интерфейсах, где язык может меняться без перезагрузки страницы, требуется динамическая реакция Slim Select.

Изменение dir на корневом элементе автоматически влияет на компонент, но возможны артефакты:

кешированные размеры dropdown;
некорректное позиционирование после открытия;
сохранённые inline-стили.

В таких случаях требуется пересчёт состояния компонента через повторное открытие/закрытие или пересоздание экземпляра Slim Select.

Ключевой принцип: Slim Select не имеет встроенного API «setDirection», поэтому управление осуществляется через DOM.

Интеграция RTL с кастомными шаблонами

Slim Select позволяет кастомизировать отображение опций через шаблоны. В RTL-режиме шаблоны должны учитывать:

порядок текста и иконок;
выравнивание контейнеров;
направление числовых или смешанных данных.

Типичная ошибка — жестко заданные margin-left и margin-right, не учитывающие направление документа.

Корректный подход:

использовать логические свойства CSS (margin-inline-start, margin-inline-end);
избегать фиксированных направлений;
опираться на text-align: start/end.

Пример:

.ss-option {
  padding-inline-start: 12px;
  padding-inline-end: 12px;
}

Работа с placeholder и состоянием пустого выбора

Placeholder в RTL должен:

отображаться справа;
не смещаться при фокусе;
сохранять направление текста.

.ss-placeholder {
  text-align: right;
}

Особое внимание требуется состоянию «нет выбора», так как Slim Select может отображать fallback-текст, который наследует стили контейнера.

Скроллинг и поведение списка опций

Dropdown Slim Select использует прокрутку при большом количестве элементов.

В RTL-режиме:

визуально сохраняется правое выравнивание текста;
скроллбар обычно остаётся справа (в большинстве браузеров);
длинные строки должны обрезаться с учётом direction: rtl.

Рекомендуемая конфигурация:

.ss-list {
  direction: rtl;
}

При смешанном содержимом (RTL + LTR, например числа или URL) необходимо контролировать вложенные spans с unicode-bidi: plaintext.

Смешанные языки (RTL + LTR) в одном списке

Наиболее сложный сценарий — комбинированный текст:

арабский текст + английские термины;
названия с числами;
идентификаторы и коды.

Проблема возникает из-за алгоритма двунаправленного текста (bidi). Без корректных правил возможны:

инверсия символов;
неправильный порядок чисел;
«разрыв» слов.

Решение:

.ss-option {
  unicode-bidi: plaintext;
}

или локально:

<span dir="auto"></span>

Ограничения Slim Select в RTL-режиме

При работе с RTL важно учитывать архитектурные ограничения:

отсутствие встроенного RTL-конфига на уровне JavaScript API;
полная зависимость от CSS и dir;
необходимость ручной корректировки сложных UI-элементов;
возможные несовпадения между браузерами при рендеринге flex в row-reverse.

Особенно заметны расхождения при:

анимациях раскрытия dropdown;
позиционировании при overflow контейнеров;
фиксированной ширине родительских блоков.

Поведение анимаций и трансформаций

Slim Select использует плавное раскрытие списка. В RTL-интерфейсах анимации могут визуально конфликтовать с направлением:

раскрытие «вниз» остаётся неизменным;
горизонтальные сдвиги требуют зеркалирования;
fade + translate эффекты могут выглядеть смещёнными.

Корректировка:

.ss-content {
  transform-origin: top right;
}

Это обеспечивает естественное «раскрытие» из правой части контейнера.

Итоговая модель RTL-интеграции

Slim Select в RTL-среде функционирует как CSS-ориентированный компонент, где ключевая роль принадлежит:

атрибуту dir;
логическим CSS-свойствам;
контролю flex-направлений;
управлению bidi-текстом.

JavaScript-слой остаётся неизменным, а вся адаптация реализуется через корректную настройку контекста документа и переопределение стилей.