Направление текста (RTL/LTR)

Библиотека iziToast по умолчанию ориентирована на левостороннее направление текста (LTR, left-to-right), однако предоставляет встроенные механизмы для корректной работы с правосторонними языками (RTL, right-to-left), такими как арабский, иврит или персидский.

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

Базовое свойство rtl

Ключевым параметром для управления направлением текста является опция:

rtl: true

При установке rtl: true уведомление полностью адаптируется под правосторонний интерфейс:

  • текст выравнивается справа налево
  • иконка и кнопки перемещаются в соответствующие позиции
  • анимации учитывают направление

Пример:

iziToast.show({
    title: 'تنبيه',
    message: 'تم حفظ البيانات بنجاح',
    rtl: true
});

Глобальная настройка RTL

Для проектов, где RTL используется повсеместно, удобнее задать направление глобально:

iziToast.settings({
    rtl: true
});

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

Комбинирование RTL и LTR

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

  • глобально задаётся одно направление (например, LTR)
  • для отдельных уведомлений переопределяется rtl

Пример:

iziToast.settings({
    rtl: false
});

iziToast.show({
    title: 'Error',
    message: 'Something went wrong'
});

iziToast.show({
    title: 'خطأ',
    message: 'حدث خطأ ما',
    rtl: true
});

Влияние на элементы уведомления

При включении RTL изменяются следующие компоненты:

1. Заголовок и текст

  • текст выравнивается по правому краю
  • порядок символов корректно отображается

2. Иконка (icon)

  • перемещается в правую часть уведомления

3. Кнопки (buttons)

  • располагаются справа налево
  • порядок кнопок инвертируется

4. Полоса прогресса (progressBar)

  • анимация движется справа налево

RTL и пользовательские кнопки

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

iziToast.show({
    title: 'تأكيد',
    message: 'هل أنت متأكد؟',
    rtl: true,
    buttons: [
        ['<button>نعم</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }],
        ['<button>لا</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast);
        }]
    ]
});

В RTL первая кнопка окажется справа, что соответствует естественному порядку чтения.

Совместимость с CSS

iziToast автоматически добавляет класс:

.iziToast-rtl

Это позволяет дополнительно настраивать внешний вид через CSS:

.iziToast.iziToast-rtl {
    direction: rtl;
    text-align: right;
}

При необходимости можно переопределить поведение отдельных элементов:

.iziToast.iziToast-rtl .iziToast-title {
    font-weight: bold;
}

RTL и позиционирование (position)

Параметр position также взаимодействует с направлением:

position: 'topRight'

При rtl: true визуально “право” становится логическим началом строки. Однако iziToast не изменяет автоматически позицию, поэтому:

  • topRight остаётся в правом верхнем углу
  • разработчик самостоятельно выбирает подходящее расположение

Для RTL-интерфейсов часто используются:

position: 'topLeft'

чтобы уведомления появлялись в “начале” чтения.

RTL и анимации

Анимации в iziToast учитывают направление:

  • входящие анимации (slideIn) адаптируются под RTL
  • выходящие анимации (fadeOut, slideOut) также инвертируются

При использовании кастомных анимаций важно проверять их визуальное соответствие RTL:

transitionIn: 'flipInX',
transitionOut: 'flipOutX'

Интеграция с глобальным направлением страницы

Если страница уже использует:

<html dir="rtl">

то рекомендуется синхронизировать iziToast:

iziToast.settings({
    rtl: document.documentElement.dir === 'rtl'
});

Это позволяет автоматически подстраивать уведомления под текущее направление интерфейса.

Частые ошибки

Игнорирование rtl при многоязычности Уведомления остаются в LTR, даже если интерфейс переключён на арабский язык.

Неправильный порядок кнопок В RTL кнопки визуально меняются местами, что может нарушить UX.

Жёсткие CSS-правила Фиксированные text-align: left или float: left ломают RTL-верстку.

Практическая стратегия использования

1. Определение языка интерфейса

const isRTL = ['ar', 'he', 'fa'].includes(currentLang);

2. Глобальная настройка

iziToast.settings({
    rtl: isRTL
});

3. Локальные переопределения при необходимости

Поддержка смешанного контента

Если внутри одного уведомления используется текст на разных языках:

iziToast.show({
    title: 'Notice / إشعار',
    message: 'File uploaded / تم رفع الملف',
    rtl: true
});

браузер автоматически применяет bidi-алгоритмы, однако для точного контроля можно использовать HTML:

message: '<span dir="ltr">File uploaded</span> / <span dir="rtl">تم رفع الملف</span>'

Влияние на UX

Корректная поддержка RTL:

  • улучшает читаемость
  • соответствует культурным ожиданиям пользователей
  • делает интерфейс профессиональным и локализованным

Игнорирование направления приводит к визуальному диссонансу и снижению удобства использования.

Итоговая схема поведения

Настройка Результат
rtl: false стандартное LTR-отображение
rtl: true полная RTL-адаптация
глобальный rtl применяется ко всем уведомлениям
локальный rtl переопределяет глобальный

Минимальный шаблон RTL-уведомления

iziToast.show({
    title: 'نجاح',
    message: 'تمت العملية بنجاح',
    rtl: true,
    position: 'topLeft',
    timeout: 3000
});
Оглавление