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

Ant Design (AntD) предоставляет встроенные механизмы для работы с интерфейсами, поддерживающими направление текста справа налево (Right-to-Left, RTL). Это особенно важно при создании приложений для языков, таких как арабский, иврит или персидский, где стандартное направление слева направо (LTR) не подходит. Правильная настройка RTL обеспечивает корректное отображение компонентов, верстки, иконок и взаимодействий.

Включение RTL на уровне проекта

Для глобального применения RTL необходимо использовать ConfigProvider. Этот компонент оборачивает всё приложение и передаёт настройки для всех дочерних компонентов.

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, Button } from 'antd';
import 'antd/dist/antd.css';

const App = () => (
  <ConfigProvider direction="rtl">
    <Button type="primary">Кнопка RTL</Button>
  </ConfigProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Ключевые моменты:

  • Свойство direction может принимать значения 'ltr' и 'rtl'.
  • Все компоненты AntD автоматически подстраиваются под выбранное направление.
  • Поддержка RTL включает корректное расположение текста, отступов, иконок и элементов навигации.

Локальная настройка компонентов

Хотя глобальное управление через ConfigProvider является стандартным, иногда требуется включить RTL только для отдельных компонентов. Для этого можно обернуть нужный компонент отдельным ConfigProvider.

Пример:

import { ConfigProvider, Menu } from 'antd';

const MyMenu = () => (
  <ConfigProvider direction="rtl">
    <Menu mode="horizontal">
      <Menu.Item key="1">Главная</Menu.Item>
      <Menu.Item key="2">О нас</Menu.Item>
      <Menu.Item key="3">Контакты</Menu.Item>
    </Menu>
  </ConfigProvider>
);

Особенности локального RTL:

  • Локальный ConfigProvider переопределяет глобальные настройки только для дочерних компонентов.
  • Это удобно для мульти-языковых интерфейсов, где часть страницы остаётся LTR, а другая — RTL.

Корректное отображение иконок

AntD использует библиотеку @ant-design/icons для отображения SVG-иконок. При переключении на RTL важно учитывать направление стрелок и навигационных элементов.

Пример настройки стрелки:

import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Button, ConfigProvider } from 'antd';

const NavigationButtons = () => (
  <ConfigProvider direction="rtl">
    <Button icon={<RightOutlined />}>Назад</Button>
    <Button icon={<LeftOutlined />}>Вперёд</Button>
  </ConfigProvider>
);

Замечания:

  • При включенном RTL стрелки автоматически меняются местами в некоторых компонентах (например, Carousel).
  • Для ручного контроля иконки могут быть заменены или инвертированы через CSS или через соответствующие SVG.

RTL и сетка (Grid)

AntD Grid (Row и Col) корректно работает с RTL без дополнительных изменений. Основные правила:

  • Свойства offset, pull, push автоматически адаптируются под направление текста.
  • Горизонтальное выравнивание (justify="start" | "end" | "center") корректно отражает направление.

Пример:

import { Row, Col, ConfigProvider } from 'antd';

const GridExample = () => (
  <ConfigProvider direction="rtl">
    <Row justify="end" gutter={16}>
      <Col span={8}>Левая колонка</Col>
      <Col span={8}>Правая колонка</Col>
    </Row>
  </ConfigProvider>
);

Стили и кастомизация

AntD предоставляет возможность кастомизировать RTL через LESS-переменные или CSS. Основные подходы:

  1. Использование глобального CSS:
body[dir="rtl"] {
  direction: rtl;
}
  1. LESS-переменные для темы:
@import "~antd/dist/antd.less";
@direction: rtl;
  1. Смешанные подходы: глобальный ConfigProvider + локальные CSS-коррекции для нестандартных компонентов.

Компоненты с особенностями RTL

Некоторые компоненты требуют дополнительного внимания при переходе на RTL:

  • Carousel – стрелки меняют направление, индикаторы остаются прежними.
  • Pagination – порядок страниц автоматически адаптируется, но кастомные кнопки могут требовать CSS-инверсию.
  • Slider – ползунок и прогресс меняют направление, но обработка значений остаётся корректной.
  • Drawer и Layout.Sider – направление выезжающих панелей корректируется автоматически через placement.

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

AntD позволяет менять направление текста динамически через состояние React. Пример:

import React, { useState } from 'react';
import { ConfigProvider, Button } from 'antd';

const DynamicRTL = () => {
  const [rtl, setRtl] = useState(false);

  return (
    <ConfigProvider direction={rtl ? "rtl" : "ltr"}>
      <Button onCl ick={() => setRtl(!rtl)}>Переключить направление</Button>
      <p>Текст будет адаптироваться под выбранное направление.</p>
    </ConfigProvider>
  );
};

Особенности:

  • Все компоненты внутри ConfigProvider автоматически пересчитывают отступы и выравнивание.
  • Для сложных интерфейсов с множеством вложенных компонентов динамическое переключение может потребовать дополнительной проверки CSS и кастомных стилей.

Итоговое поведение

Использование ConfigProvider с direction="rtl" обеспечивает:

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

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

Оглавление