Поддержка RTL-интерфейса без зеркального переворота иконок требует понимания разницы между текстовым направлением и смысловыми векторами. Зеркальное отражение (flip) применяется только к элементам, где направление является частью семантики действия: стрелки навигации, индикаторы прогресса, маркеры списков. Иконки-объекты (корзина, пользователь, настройки) не должны зеркалиться, так как их форма неизменна по смыслу. Ошибка возникает при автоматическом применении CSS-свойства transform: scaleX(-1) ко всем элементам с атрибутом dir="rtl".

Принцип разделения семантики и визуализации

Основная ошибка разработчиков — применение глобального CSS-правила, которое зеркалит все элементы внутри контейнера с dir="rtl". Это работает для текста, но разрушает логику навигации.

Необходимо разделять два типа элементов: векторные (стрелки, индикаторы) и объектные (иконки действий). Векторы должны менять направление в зависимости от языка интерфейса, объекты — оставаться неизменными.

Пользователь считывает направление стрелки как команду. Если команда «Назад» в русском интерфейсе ведет влево, то в арабском интерфейсе она также должна вести влево (визуально), даже если текст идет справа налево. Это интуитивный стандарт UX.

Техническая реализация через CSS-классы

Не используйте автоматическое зеркаление через атрибут dir или левый/правый языки. Вместо этого создавайте специфичные классы для векторных элементов.

Пример структуры: <span class="icon arrow-left">←</span>. В LTR-режиме этот элемент отображается как есть. В RTL-режиме к нему добавляется класс .rtl-arrow-left, который меняет направление через CSS.

Используйте CSS-переменные или медиа-запросы для управления направлением. Например: .icon.arrow-left { transform: translateX(0); } .icon.arrow-left.rtl { transform: translateX(-100%); } (или аналогичный механизм смены SVG путей).

Для SVG иконок используйте разные файлы или группы <path> для левого и правого направления. Не применяйте scaleX(-1) ко всем иконкам, только к тем, где это необходимо.

Как оценить результат: тестирование на пользователя

Проверьте интерфейс на двух устройствах с разными языками. Попросите пользователя выполнить действие «Назад» в RTL-режиме.

Если пользователь инстинктивно тянется к левой стороне экрана, а стрелка указывает вправо (из-за зеркального переворота), значит, решение неверно.

Используйте метрику времени на выполнение задачи. Если зеркальные иконки увеличивают время поиска нужной кнопки или вызывают двойные клики, это сигнал к исправлению кода.

Ограничения и исключения

Некоторые библиотеки (например, Bootstrap) могут автоматически зеркалить иконки. Это нужно отключать для векторных элементов.

Иконки-объекты (корзина, лупа, шестеренка) не должны зеркалиться ни при каких условиях, так как их форма не зависит от направления текста.

Если дизайн требует уникального отображения стрелок в каждом языке, это должно быть прописано в спецификации UI/UX заранее, а не решаться на лету через CSS-хаки.

Практический пример кода

Вместо универсального правила: .rtl * { transform: scaleX(-1); } используйте точечные стили.

Пример CSS: .icon-arrow-left { direction: ltr; } .icon-arrow-left::after { content: '←'; } .icon-arrow-left.rtl::after { content: '→'; }

Это гарантирует, что текст внутри иконки не зеркалится, а символ меняется на нужный для языка.

Частые ошибки при внедрении

Ошибка: применение scaleX(-1) ко всем элементам с классом .icon. Результат: корзина становится зеркальной, а стрелка «Назад» указывает вправо.

Ошибка: игнорирование логического направления действий. Пользователь привык к тому, что «Назад» всегда слева от текущего контента, независимо от языка.

Ошибка: использование только текстовых меток вместо иконок. Если текст «Назад» есть, иконка-стрелка должна дублировать его направление, а не противоречить ему.

Вопросы и ответы

Можно ли использовать библиотеку иконок с готовой поддержкой RTL?

Да, но нужно проверять документацию. Некоторые библиотеки (например, Font Awesome) имеют отдельные наборы иконок для LTR и RTL. Другие требуют ручной настройки классов.

Как поступить, если дизайн-система требует зеркальных иконок?

Это противоречит принципам UX. Если команда настаивает на этом, нужно документально зафиксировать риски: снижение конверсии, рост ошибок пользователей.

Нужно ли менять иконки для каждого языка отдельно?

Нет. Иконки меняются только по направлению векторов (стрелок), а не по языку. Для русского и английского интерфейсов используются одни и те же файлы, если направление действий совпадает.

По теме

.icon-arrow-left {
  direction: ltr;
}

.icon-arrow-left::after {
  content: '←';
}

/* Для RTL-интерфейсов */
[dir="rtl"] .icon-arrow-left::after {
  content: '→';
}

Похожие статьи