RTL поддержка

Fresh — современный фреймворк для разработки веб-приложений на JavaScript с акцентом на скорость и минимализм. Одним из важных аспектов глобальной разработки является поддержка интерфейсов с правосторонней ориентацией текста (Right-to-Left, RTL). Это особенно актуально для языков, таких как арабский, иврит или фарси. Fresh предоставляет возможности интеграции RTL на уровне компонентов и стилей.

Настройка RTL на уровне документа

В HTML-документе направление текста задаётся атрибутом dir. Для включения поддержки RTL необходимо выставить его значение в rtl:

<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>Пример RTL</title>
  </head>
  <body>
    <div class="container">
      <p>هذا نص باللغة العربية</p>
    </div>
  </body>
</html>

Fresh, работая с Deno и JSX, позволяет устанавливать атрибут dir динамически через серверные рендеринг-компоненты (SSR):

/** @jsx h */
import { h } from "preact";

export default function App({ rtl }: { rtl: boolean }) {
  return (
    <html lang={rtl ? "ar" : "en"} dir={rtl ? "rtl" : "ltr"}>
      <head>
        <meta charSet="UTF-8" />
        <title>Пример Fresh RTL</title>
      </head>
      <body>
        <main>
          <p>{rtl ? "مرحبا بالعالم" : "Hello World"}</p>
        </main>
      </body>
    </html>
  );
}

Стилизация для RTL

CSS поддерживает атрибут direction и псевдоклассы [dir="rtl"] для специфичной стилизации элементов:

body {
  font-family: "Arial", sans-serif;
  direction: ltr;
}

[dir="rtl"] body {
  direction: rtl;
}

.container {
  text-align: left;
}

[dir="rtl"] .container {
  text-align: right;
  padding-left: 0;
  padding-right: 1rem;
}

Использование [dir="rtl"] позволяет создавать универсальные компоненты, которые автоматически меняют своё поведение при смене направления текста, не требуя дублирования кода.

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

Fresh поддерживает серверный рендеринг, но переключение направления текста на клиенте требует управления состоянием. Для этого применяются реактивные подходы Preact:

import { useState } from "preact/hooks";

export default function ToggleDirection() {
  const [rtl, setRtl] = useState(false);

  return (
    <div dir={rtl ? "rtl" : "ltr"}>
      <button onCl ick={() => setRtl(!rtl)}>
        Переключить на {rtl ? "LTR" : "RTL"}
      </button>
      <p>
        {rtl
          ? "نص تجريبي للغة العربية"
          : "Sample text in English"}
      </p>
    </div>
  );
}

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

Учет сторонних CSS-библиотек

При интеграции сторонних библиотек, таких как Tailwind CSS или Bootstrap, необходимо убедиться, что они корректно обрабатывают RTL. Tailwind, например, поддерживает плагин tailwind-rtl, который автоматически инвертирует margin, padding и float при использовании [dir="rtl"]:

// tailwind.config.js
module.exports = {
  content: ["./components/**/*.tsx", "./routes/**/*.tsx"],
  plugins: [require("tailwind-rtl")],
};

Обработка компонентов с абсолютным позиционированием

Для элементов с абсолютным позиционированием важно учитывать инверсию координат. Свойства left и right необходимо задавать через условные классы или CSS-переменные:

.card {
  position: absolute;
  left: 1rem;
}

[dir="rtl"] .card {
  left: auto;
  right: 1rem;
}

Это предотвращает смещение элементов при переключении направления текста и обеспечивает корректное отображение всех интерфейсных блоков.

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

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

import { createContext } from "preact";

export const DirectionContext = createContext<{
  rtl: boolean;
  toggle: () => void;
}>({ rtl: false, toggle: () => {} });

Компоненты получают текущий контекст и автоматически адаптируются под нужное направление текста, обеспечивая единообразие во всём приложении.

Особенности типографики и визуальных компонентов

При разработке RTL-интерфейсов следует учитывать:

  • Выравнивание текста: заголовки, параграфы, списки должны менять text-align.
  • Иконки и стрелки: визуальные указатели меняют направление для соответствия локализации.
  • Формы и таблицы: порядок столбцов и полей меняется при переключении на RTL.

Fresh, работая через JSX и Preact, позволяет строить компоненты с адаптивной логикой, избегая дублирования разметки и упрощая поддержку многоязычных интерфейсов.

Оглавление