RTL поддержка

RTL (Right-to-Left) поддержка критична для приложений, ориентированных на языки с письмом справа налево, таких как арабский, иврит, персидский. В контексте SkateJS это означает не только визуальное отображение, но и корректное поведение компонентов, их взаимодействие и управление стилями.

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

SkateJS позволяет динамически управлять атрибутами DOM, что упрощает установку направления текста через атрибут dir. Для компонентов, создаваемых с помощью SkateJS, можно определить атрибут dir на уровне корневого элемента компонента:

import { define, component } from 'skatejs';

const MyComponent = component({
  render({ host }) {
    const direction = host.getAttribute('dir') || 'ltr';
    return (
      <div dir={direction}>
        Контент компонента
      </div>
    );
  }
});

define('my-component', MyComponent);

В этом примере направление текста автоматически определяется через атрибут dir хоста. Если атрибут не задан, используется значение по умолчанию ltr.

Реактивное изменение направления

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

import { define, component, prop } from 'skatejs';

const MyComponent = component({
  props: {
    dir: prop.string({
      attribute: true,
      default: 'ltr'
    })
  },
  render({ dir }) {
    return (
      <div dir={dir}>
        {dir === 'rtl' ? 'Текст справа налево' : 'Текст слева направо'}
      </div>
    );
  }
});

define('my-component', MyComponent);

Изменение свойства dir на элементе автоматически обновит внутреннюю разметку и поведение компонента без необходимости дополнительного вмешательства.

Управление стилями для RTL

Для полноценной поддержки RTL важно не только указать атрибут dir, но и правильно настроить CSS. SkateJS позволяет использовать Shadow DOM, что требует продуманного подхода к стилям:

import { css, define, component } from 'skatejs';

const styles = css`
  div {
    text-align: left;
  }
  :host([dir="rtl"]) div {
    text-align: right;
  }
`;

const MyComponent = component({
  render({ host }) {
    return (
      <div>
        Контент с поддержкой RTL
      </div>
    );
  },
  styles
});

define('my-component', MyComponent);

Селектор :host([dir="rtl"]) позволяет изменять стили компонентов при переключении направления текста на уровне хоста. Такой подход обеспечивает изоляцию стилей для Shadow DOM и предотвращает утечки CSS.

Работа с динамическим контентом

Компоненты, которые отображают динамический контент, также требуют корректного отражения направления текста. SkateJS поддерживает реактивные обновления, что упрощает синхронизацию с внешними источниками данных:

import { define, component, prop } from 'skatejs';

const DynamicText = component({
  props: {
    dir: prop.string({ attribute: true, default: 'ltr' }),
    content: prop.string()
  },
  render({ dir, content }) {
    return (
      <div dir={dir}>
        {dir === 'rtl' ? content.split('').reverse().join('') : content}
      </div>
    );
  }
});

define('dynamic-text', DynamicText);

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

Интернационализация и SkateJS

RTL поддержка тесно связана с интернационализацией. SkateJS предоставляет гибкость через свойства и реактивность для управления локализацией:

  • Атрибуты на хосте: позволяют переключать направление текста на уровне всего компонента.
  • Реактивные свойства: обеспечивают автоматическую перестройку разметки при изменении языка.
  • Shadow DOM и CSS: поддерживают изоляцию стилей и позволяют менять выравнивание и оформление элементов для RTL.

Советы по интеграции

  1. Всегда задавать значение dir на корневом элементе компонента или хосте.
  2. Использовать props для реактивного управления направлением текста.
  3. Настраивать CSS через :host([dir="rtl"]) для корректного выравнивания и отображения.
  4. Для сложного текста применять библиотеки интернационализации вместо ручной инверсии строк.
  5. Проверять совместимость Shadow DOM и сторонних стилей при изменении направления текста.

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

Оглавление