Правосторонние языки и RTL поддержка

Mithril — лёгкий и современный JavaScript-фреймворк для построения одностраничных приложений (SPA). Он предоставляет мощные средства для управления виртуальным DOM, маршрутизацией и асинхронными запросами, одновременно оставаясь минималистичным по синтаксису. Поддержка языков с правосторонним письмом (RTL, Right-to-Left) — важный аспект при разработке интерфейсов для арабского, ивритского и других RTL-языков. Рассмотрим ключевые подходы и практические техники интеграции RTL в приложения на Mithril.

Настройка направления текста через атрибут dir

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

  • ltr — слева направо (по умолчанию),
  • rtl — справа налево,
  • auto — браузер определяет направление по первым символам текста.

В Mithril атрибуты передаются напрямую в виртуальный DOM:

import m from "mithril";

const App = {
    view: () =>
        m("div", { dir: "rtl" },
            m("h1", "مرحبا بالعالم"),
            m("p", "هذا نص باللغة العربية مع دعم RTL")
        )
};

m.mount(document.body, App);

Ключевой момент: установка dir="rtl" на корневом контейнере приложения позволяет корректно отрисовывать все вложенные элементы.

Динамическое переключение направлений

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

import m from "mithril";

let currentDir = "ltr";

const toggleDir = () => {
    currentDir = currentDir === "ltr" ? "rtl" : "ltr";
};

const App = {
    view: () =>
        m("div", { dir: currentDir },
            m("button", { onclick: toggleDir }, "Переключить направление"),
            m("p", currentDir === "rtl" ? "مرحبا بالعالم" : "Hello World")
        )
};

m.mount(document.body, App);

Вывод: виртуальный DOM Mithril автоматически обновляет атрибут dir, обеспечивая мгновенную смену направления текста без ручного управления DOM.

Стилизация элементов для RTL

Для полноценной поддержки RTL необходимо учитывать не только направление текста, но и расположение блоков, маргинов, паддингов и выравнивание:

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

.ltr {
    text-align: left;
    direction: ltr;
}

.container {
    padding: 16px;
    margin: 8px;
}

В компоненте можно динамически назначать CSS-классы:

m("div", { class: currentDir === "rtl" ? "rtl container" : "ltr container" },
    m("p", "Текст с поддержкой направления")
)

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

Интеграция с маршрутами

Mithril поддерживает маршрутизацию через m.route. Для многоязычных приложений с RTL полезно задавать направление текста на уровне маршрута:

import m from "mithril";

const routes = {
    "/": { component: Home, dir: "ltr" },
    "/ar": { component: Home, dir: "rtl" }
};

const Home = {
    view: ({ attrs }) =>
        m("div", { dir: attrs.dir },
            m("h1", attrs.dir === "rtl" ? "مرحبا بالعالم" : "Hello World")
        )
};

m.route(document.body, "/", routes);

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

Обработка компонентов третьих сторон

При интеграции библиотек и UI-компонентов, которые не поддерживают RTL из коробки, необходимо использовать CSS-трюки:

  • transform: scaleX(-1) — зеркалирование элементов.
  • Замена иконок и SVG на RTL-версии.
  • Динамическая перестройка flex-контейнеров: flex-direction: row-reverse.

Пример для компонента с кнопками:

m("div", { style: { display: "flex", flexDirection: currentDir === "rtl" ? "row-reverse" : "row" } },
    m("button", "Кнопка 1"),
    m("button", "Кнопка 2")
)

Поддержка смешанных направлений

Иногда внутри RTL-текста встречаются вставки LTR (например, URL, номера, латиница). Для корректного отображения используют вложенные элементы с dir="ltr":

m("p", { dir: "rtl" },
    "موقعنا على الإنترنت: ",
    m("span", { dir: "ltr" }, "https://example.com")
)

Принцип: комбинированные направления требуют явного указания атрибута dir для всех вложенных блоков с противоположным направлением.

Выводы по архитектуре

  • dir и CSS — основные инструменты для управления RTL.
  • В Mithril направление текста можно менять динамически, используя реактивные состояния.
  • Для комплексных интерфейсов рекомендуется заранее планировать архитектуру стилей для LTR и RTL.
  • Комбинация атрибутов, классов и inline-стилей позволяет добиться универсальной поддержки различных языков без переписывания логики компонентов.

Mithril обеспечивает минималистичную, но гибкую основу для построения RTL-интерфейсов, где направление текста и расположение элементов управляются через виртуальный DOM и реактивное обновление атрибутов.

Оглавление