Right-to-left языки и вёрстка

Riot.js — легковесный фреймворк для создания компонентных интерфейсов на JavaScript. Работа с языками с направлением текста справа налево (Right-to-Left, RTL), такими как арабский или иврит, требует понимания особенностей вёрстки и взаимодействия с DOM, а также корректного управления стилями в компонентах.

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

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

<div dir="rtl">
  <p>مرحبا بالعالم</p>
</div>

В Riot.js направление текста можно устанавливать как через HTML-шаблон компонента, так и через динамическую привязку:

<rtl-text direction="{dir}">
  {message}
</rtl-text>

<script>
  export default {
    dir: 'rtl',
    message: 'مرحبا بالعالم'
  }
</script>

Использование свойства dir в компоненте позволяет переключать направление текста динамически в зависимости от состояния приложения.

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

CSS играет ключевую роль в корректном отображении RTL. Основные моменты:

  • Свойства, зависящие от направления: margin-left, margin-right, padding-left, padding-right, text-align.
  • Flexbox и Grid: flex-direction и justify-content могут вести себя иначе при RTL, особенно при использовании row-reverse и column-reverse.
  • Поддержка логических свойств CSS: свойства вроде margin-inline-start и margin-inline-end автоматически адаптируются под направление текста.

Пример динамического применения стилей в Riot.js:

<box style="text-align: {direction === 'rtl' ? 'right' : 'left'}">
  {content}
</box>

<script>
  export default {
    direction: 'rtl',
    content: 'תוכן לדוגמה'
  }
</script>

Использование классов и условного рендеринга

В Riot.js можно управлять классами компонентов в зависимости от направления:

<container class="{direction}-layout">
  <p>{text}</p>
</container>

<script>
  export default {
    direction: 'rtl',
    text: 'مثال للنص'
  }
</script>

И соответствующий CSS:

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

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

Такой подход позволяет легко переключать направление для всего блока интерфейса без повторного написания стилей для каждого компонента.

Динамическая адаптация компонентов

Riot.js поддерживает реактивность данных, что позволяет менять направление текста «на лету» без перезагрузки страницы:

<app>
  <button oncl ick="{toggleDir}">Сменить направление</button>
  <content-box direction="{dir}">
    {message}
  </content-box>
</app>

<script>
  export default {
    dir: 'ltr',
    message: 'Hello World',
    toggleDir() {
      this.dir = this.dir === 'ltr' ? 'rtl' : 'ltr';
      this.update();
    }
  }
</script>

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

Совмещение RTL и сторонних библиотек

При использовании UI-библиотек или компонентов стороннего происхождения нужно учитывать:

  1. Проверку поддержки dir и логических CSS-свойств.
  2. Возможность переопределения стилей через классы или inline-style в Riot-компонентах.
  3. Корректное отображение иконок и изображений, которые могут требовать зеркальной трансформации (transform: scaleX(-1)).

Практика: локализация и RTL

В приложениях, где поддерживаются несколько языков, часто создаётся отдельный сервис локализации. Для Riot.js это может быть простой объект с реактивным состоянием:

export const i18n = {
  currentLang: 'ar',
  messages: {
    ar: { welcome: 'مرحبا' },
    en: { welcome: 'Welcome' }
  },
  get dir() {
    return this.currentLang === 'ar' ? 'rtl' : 'ltr';
  },
  t(key) {
    return this.messages[this.currentLang][key] || key;
  }
};

Компоненты используют это состояние для динамического задания направления:

<message-box direction="{i18n.dir}">
  {i18n.t('welcome')}
</message-box>

Итоги по работе с RTL в Riot.js

  • Динамическое управление атрибутом dir упрощает адаптацию интерфейса под разные языки.
  • Логические свойства CSS (*-inline-start, *-inline-end) минимизируют дублирование стилей.
  • Реактивность Riot.js позволяет мгновенно менять направление текста и адаптировать компоненты без перезагрузки.
  • Важно учитывать сторонние компоненты и корректно адаптировать их стили и иконки под RTL.

Использование этих подходов обеспечивает полноценную поддержку Right-to-Left языков в современных компонентных приложениях на Riot.js.

Оглавление