RTL-языки

Работа с интерфейсами, ориентированными на языки с направлением письма справа налево (RTL — Right-To-Left), требует учета не только перевода текстов, но и полной перестройки визуальной логики компонентов. Flatpickr изначально проектировался как гибкий календарный компонент без жесткой привязки к направлению текста, поэтому поддержка RTL реализуется через сочетание CSS-правил, локалей и тонкой настройки позиционирования попапа.

RTL-языки включают арабский, иврит, урду и ряд других систем письма, где базовое направление контента отличается от латинского LTR. В контексте календаря это затрагивает расположение дней недели, направление навигации по месяцам, позицию стрелок и даже поведение всплывающего календаря относительно поля ввода.

Базовая стратегия включения RTL

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

body[dir="rtl"] .flatpickr-calendar {
  direction: rtl;
}

или более локализованно:

.flatpickr-rtl {
  direction: rtl;
}

Инициализация при этом не требует изменений логики:

flatpickr("#date", {
  locale: "ar"
});

Ключевой момент заключается в том, что изменение направления текста не является достаточным само по себе. Компонент использует абсолютное позиционирование и flex-структуры, поэтому необходимо учитывать визуальную перестановку элементов.

Локализация и RTL через locale

Локали в Flatpickr определяют:

  • названия месяцев
  • дни недели
  • форматы дат
  • первый день недели

Для RTL-языков важно использовать соответствующий набор локалей:

import { Arabic } from "flatpickr/dist/l10n/ar.js";

flatpickr("#date", {
  locale: Arabic
});

Локаль влияет только на текстовую составляющую, но не переключает направление интерфейса автоматически. Это принципиальное отличие от некоторых UI-библиотек, где RTL привязан к locale.

Проблемы позиционирования календаря

Одной из ключевых сложностей RTL является поведение всплывающего календаря. Flatpickr по умолчанию пытается позиционировать календарь относительно input слева направо.

В RTL-страницах возникает конфликт:

  • input визуально справа
  • календарь может открываться слева
  • стрелки навигации остаются LTR-ориентированными

Решение через position:

flatpickr("#date", {
  position: "auto right"
});

или жесткое закрепление:

position: "below right"

В RTL-интерфейсах чаще используется зеркальное позиционирование:

document.documentElement.dir = "rtl";

flatpickr("#date", {
  position: "auto right"
});

Зеркалирование навигации по месяцам

Flatpickr использует стрелки навигации:

  • prevMonthNav
  • nextMonthNav

В RTL логике визуально ожидается их инверсия. Однако библиотека не меняет их автоматически.

Коррекция выполняется через CSS:

.flatpickr-calendar .flatpickr-prev-month {
  right: 0;
  left: auto;
}

.flatpickr-calendar .flatpickr-next-month {
  left: 0;
  right: auto;
}

Дополнительно часто применяется трансформация:

.flatpickr-months {
  flex-direction: row-reverse;
}

Инверсия сетки календаря

Сетка дней недели визуально должна начинаться справа. Flatpickr строит таблицу дней как стандартный grid, поэтому для RTL требуется изменение направления контейнера:

.flatpickr-days {
  direction: rtl;
}

Однако одного direction недостаточно, поскольку порядок элементов DOM остается LTR. Более корректный подход:

.flatpickr-weekdays,
.flatpickr-days {
  display: flex;
  flex-direction: row-reverse;
}

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

Работа с вводом даты в RTL-полях

Input-элемент в RTL-страницах наследует направление текста:

input {
  direction: rtl;
  text-align: right;
}

Flatpickr синхронизируется с input через value, поэтому важно избегать конфликтов форматирования. Например, формат даты:

flatpickr("#date", {
  dateFormat: "Y-m-d"
});

Даже в RTL интерфейсе формат остается LTR-ориентированным, поскольку он используется как техническое представление.

Влияние RTL на пользовательские форматы даты

Flatpickr позволяет задавать кастомные форматы через dateFormat, например:

  • d.m.Y
  • Y/m/d
  • d F Y

В RTL интерфейсах часто возникает желание зеркально отображать формат, однако это считается анти-паттерном. Причина заключается в том, что:

  • числовые форматы не зависят от направления письма
  • локаль отвечает за текстовые элементы, но не за порядок чисел

Правильный подход — оставлять формат неизменным, изменяя только визуальное представление.

Управление иконками и SVG в RTL

Иконки календаря и стрелки часто требуют зеркалирования:

.flatpickr-calendar svg {
  transform: scaleX(-1);
}

или выборочно:

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  transform: scaleX(-1);
}

Однако зеркалирование должно применяться осторожно, чтобы не нарушить семантику стрелок при смене месяцев.

Комбинация RTL и мобильного режима

Flatpickr имеет отдельную логику для мобильных устройств (disableMobile). В RTL-интерфейсах это может привести к несогласованности:

  • нативный input picker использует системный RTL
  • Flatpickr desktop-режим требует ручного RTL

Рекомендуемая стратегия:

flatpickr("#date", {
  disableMobile: true
});

Это обеспечивает единообразное поведение интерфейса независимо от платформы.

Динамическое переключение LTR/RTL

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

function setDirection(dir) {
  document.documentElement.dir = dir;
}

После изменения направления Flatpickr не всегда автоматически перестраивает layout, поэтому требуется переинициализация:

instance.destroy();
instance = flatpickr("#date", {
  locale: currentLocale,
  position: "auto right"
});

Типичные конфликты стилей

При интеграции RTL часто возникают конфликты:

  • смешивание flex-direction и grid-direction
  • наследование direction от body
  • несовпадение позиции календаря и input
  • двойное зеркалирование иконок

Наиболее стабильная конфигурация обычно включает:

body[dir="rtl"] .flatpickr-calendar {
  direction: rtl;
  text-align: right;
}

и минимальное количество трансформаций DOM.

Поведение week numbers в RTL

Если включены номера недель:

weekNumbers: true

в RTL интерфейсе колонка недель может визуально смещаться. Коррекция:

.flatpickr-weekwrapper {
  order: 1;
}

или полное переупорядочивание flex-контейнера календаря.

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

RTL в Flatpickr строится не на одном параметре, а на совокупности слоев:

  • направление документа (dir)
  • локализация текста (locale)
  • CSS-инверсия контейнеров
  • корректировка позиционирования popover
  • контроль иконок и навигации
  • управление переинициализацией при смене языка

Эта модель делает компонент независимым от направления письма, но требует явной настройки на уровне приложения.

Оглавление