RTL поддержка

В веб-разработке обеспечение корректного отображения интерфейса для языков с письмом справа налево (Right-to-Left, RTL) является критически важным аспектом международной локализации. Фреймворк Lit предоставляет гибкие инструменты для управления направлением текста и стилизацией компонентов, что позволяет создавать универсальные веб-компоненты, корректно работающие как для LTR (Left-to-Right), так и для RTL языков.

Управление направлением текста

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

  • ltr — стандартное направление слева направо.
  • rtl — направление справа налево.
  • auto — автоматически определяется на основе содержимого элемента.

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

import { LitElement, html, css } from 'lit';

class RtlExample extends LitElement {
  static styles = css`
    :host {
      display: block;
      direction: rtl; /* Установка направления через CSS */
    }
    .content {
      text-align: right; /* Выравнивание текста для RTL */
    }
  `;

  render() {
    return html`
      <div class="content">
        Пример текста на RTL
      </div>
    `;
  }
}

customElements.define('rtl-example', RtlExample);

Ключевой момент: атрибут dir на хост-элементе или использование CSS-свойства direction автоматически влияет на дочерние элементы, включая <slot> и другие вложенные компоненты.

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

Lit позволяет динамически менять направление текста в зависимости от данных или состояния приложения. Для этого достаточно использовать реактивные свойства компонента:

import { LitElement, html, css } from 'lit';
import { property } from 'lit/decorators.js';

class DynamicRtl extends LitElement {
  @property({ type: String }) direction = 'ltr';

  static styles = css`
    :host {
      display: block;
    }
    .content {
      text-align: start;
    }
    :host([dir='rtl']) .content {
      text-align: end;
    }
  `;

  updated(changedProperties) {
    if (changedProperties.has('direction')) {
      this.setAttribute('dir', this.direction);
    }
  }

  render() {
    return html`
      <div class="content">
        Динамическое направление текста: ${this.direction.toUpperCase()}
      </div>
    `;
  }
}

customElements.define('dynamic-rtl', DynamicRtl);

Особенности подхода:

  • Свойство direction делает компонент реактивным.
  • При изменении значения автоматически обновляется атрибут dir.
  • CSS-псевдокласс [dir='rtl'] позволяет задавать отдельные стили для RTL без дублирования всего CSS.

Поддержка RTL в стилях

В Lit стили могут быть написаны как стандартный CSS, но для международных приложений рекомендуется использовать:

  • margin-inline-start и margin-inline-end вместо margin-left/margin-right.
  • padding-inline-start и padding-inline-end вместо padding-left/padding-right.
  • text-align: start и text-align: end вместо left/right.

Эти свойства автоматически учитывают направление текста:

static styles = css`
  .box {
    margin-inline-start: 10px;
    margin-inline-end: 20px;
    padding-inline-start: 5px;
    padding-inline-end: 5px;
    text-align: start;
  }
  :host([dir='rtl']) .box {
    background-color: #f0f0f0;
  }
`;

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

Интернационализация слотов и вложенных компонентов

При использовании <slot> необходимо учитывать, что направление текста наследуется от родителя. Для корректного отображения вложенных компонентов и слотов рекомендуется:

  • Явно задавать dir на хост-элементе.
  • Использовать CSS-переменные для позиционирования элементов (--start, --end) вместо фиксированных значений.
  • Проверять визуальное выравнивание при смене направления.

Пример с слотами:

class SlotRtl extends LitElement {
  static styles = css`
    :host {
      display: block;
      direction: rtl;
    }
    ::slotted(*) {
      text-align: right;
    }
  `;

  render() {
    return html`<slot></slot>`;
  }
}

customElements.define('slot-rtl', SlotRtl);

Практические советы по RTL в Lit

  1. Всегда использовать реактивные свойства для направления, если интерфейс может переключаться между языками.
  2. Предпочитать inline-start/inline-end и start/end вместо left/right для кросс-направленного CSS.
  3. Проверять наследование dir для всех вложенных элементов и слотов.
  4. В динамических приложениях менять атрибут dir на хост-элементе, чтобы обновления CSS происходили автоматически.
  5. Использовать условные стили через [dir='rtl'] для нестандартных элементов, которые не поддерживают inline-start/inline-end.

Заключение по интеграции

Поддержка RTL в Lit строится на сочетании реактивных свойств, атрибута dir и CSS-свойств, учитывающих направление текста. Такой подход обеспечивает полную адаптивность компонентов под разные языки, упрощает поддержку сложных интерфейсов и позволяет создавать универсальные веб-компоненты без дублирования кода для LTR и RTL.

Оглавление