Я Максим, веб-разработчик. Несколько раз ко мне обращались компании, которые хотели выйти на рынки Ближнего Востока — и каждый раз оказывалось, что простого перевода текстов недостаточно. Сайт, который создавался для европейской аудитории, выглядит ломаным и неудобным для носителей арабского языка. Дело в направлении текста: арабский, иврит, фарси и урду читаются справа налево — RTL (Right-to-Left). И это меняет не только порядок букв, а весь пользовательский интерфейс. В этой статье я детально разберу, что именно нужно адаптировать, какие технические инструменты использовать и на какие подводные камни обратить внимание.
Почему RTL — это не просто «отзеркалить» сайт
Первая мысль, которая приходит в голову: «Ну, развернём всё зеркально — и готово». На практике всё сложнее. RTL-адаптация — это комплексная переработка интерфейса, которая затрагивает layout, типографику, навигацию, иконки, формы и даже изображения.
Когда арабоязычный пользователь открывает сайт, он интуитивно начинает просмотр справа сверху — точно так же, как мы начинаем слева сверху. Это значит, что логотип и главное навигационное меню должны быть справа. Боковая панель, которая у нас обычно слева — переезжает направо. А дополнительная информация и менее важные элементы — уходят влево.
Но есть исключения. Не всё зеркалится. Например, иконки телефона, часов, лупы поиска — они остаются как есть, потому что отражают физический объект, а не направление чтения. А вот стрелки «назад/вперёд», индикаторы прогресса, карусели — инвертируются, потому что направление движения привязано к направлению чтения.
Числа в арабском тексте по-прежнему читаются слева направо, даже внутри RTL-контекста. Это создаёт интересные ситуации с двунаправленным текстом, о которых я расскажу ниже.
Что именно меняется в RTL-макете
Перечислю основные трансформации, которые нужно выполнить при адаптации LTR-макета в RTL:
Расположение элементов. Навигация, логотип, основное меню — перемещаются к правому краю. Сайдбар меняет сторону. Колонки grid-сетки разворачиваются в обратном порядке. Кнопки «Следующий/Предыдущий» меняются местами.
Отступы и выравнивание. Все margin-left становятся margin-right и наоборот. padding-left превращается в padding-right. Текст выравнивается по правому краю по умолчанию. Это самая объёмная часть работы, если сайт написан на «физических» CSS-свойствах.
Иконки и графика. Стрелки направления зеркалятся. Иконки, привязанные к чтению (списки, цитаты, отступы) — зеркалятся. Иконки физических объектов (часы, телефон, конверт, лупа) — остаются. Сложные иллюстрации с текстом — перерисовываются или адаптируются.
Слайдеры и карусели. Направление прокрутки инвертируется. Первый слайд появляется справа. Навигационные точки могут оставаться по центру — это не критично.
Формы. Лейблы полей перемещаются вправо. Иконки внутри инпутов (лупа в поле поиска, иконка валюты) — адаптируются. Кнопка отправки может менять расположение в зависимости от дизайна.
Таблицы. Заголовки столбцов и данные выравниваются по правому краю. Первый столбец становится крайним правым.
Техническая реализация: пошаговое руководство
Шаг 1: Атрибут dir и lang
Всё начинается с HTML-атрибутов на теге `<html>`:
<html dir="rtl" lang="ar">Атрибут `dir="rtl"` сообщает браузеру, что направление текста — справа налево. Браузер автоматически меняет базовое выравнивание текста и порядок строчных элементов. Атрибут `lang="ar"` сообщает поисковикам и вспомогательным технологиям язык контента. Это важно для SEO на арабских рынках и для скринридеров.
Если у вас мультиязычный сайт, где часть контента на арабском, а часть на русском или английском — используйте `dir` на уровне отдельных секций или элементов. Например, вставка английской цитаты внутри арабского текста может потребовать `<span dir="ltr">English quote</span>`.
Шаг 2: CSS Logical Properties
Это ключевой инструмент современной RTL-вёрстки. Вместо физических свойств CSS (left, right, margin-left, padding-right) используются логические свойства, которые автоматически адаптируются к направлению текста:
| Физическое свойство | Логическое свойство |
|---|---|
| margin-left | margin-inline-start |
| margin-right | margin-inline-end |
| padding-left | padding-inline-start |
| padding-right | padding-inline-end |
| text-align: left | text-align: start |
| text-align: right | text-align: end |
| left | inset-inline-start |
| right | inset-inline-end |
| border-left | border-inline-start |
| border-right | border-inline-end |
Если вы пишете CSS с логическими свойствами изначально — RTL-адаптация становится почти автоматической. Вам достаточно поменять атрибут `dir` — и весь layout корректно перестроится.
Все современные браузеры поддерживают CSS Logical Properties: Chrome, Firefox, Safari, Edge. Для старых проектов, где переписывать весь CSS нерентабельно, есть автоматические инструменты — о них ниже.
Шаг 3: Flexbox и CSS Grid
Хорошая новость: если ваш сайт построен на Flexbox или CSS Grid, значительная часть RTL-адаптации уже сделана «из коробки». При установке `dir="rtl"` Flexbox автоматически инвертирует порядок элементов по главной оси. То есть элементы, которые шли слева направо — пойдут справа налево без единого изменения в CSS.
CSS Grid аналогично — колонки автоматически перестраиваются. Однако если вы используете явное позиционирование через `grid-column: 1 / 3` — это не инвертируется автоматически. В таких случаях придётся либо использовать логические свойства Grid, либо писать отдельные правила для RTL.
Шаг 4: Автоматическая конвертация CSS
Для больших проектов, где вручную переписывать CSS нерентабельно, существуют инструменты автоматической конвертации:
RTLCSS — Node.js-инструмент, который берёт ваш LTR-стиль и генерирует RTL-версию. Заменяет left на right, инвертирует shorthand-значения (margin: 0 10px 0 20px → margin: 0 20px 0 10px), переворачивает background-position. Интегрируется в сборку через PostCSS, webpack или Gulp.
PostCSS-RTL — плагин для PostCSS, который работает аналогично RTLCSS, но генерирует один файл с обеими версиями, переключаемыми через селектор `[dir="rtl"]`.
Важно: автоматические инструменты покрывают 80–90% случаев, но оставшиеся 10–20% требуют ручной проверки. Сложные анимации, кастомные позиции абсолютных элементов, SVG-иконки с направлением — всё это нужно тестировать глазами.
Шрифты для арабского языка
Типографика — отдельная история. Не все шрифты поддерживают арабскую вязь, и даже среди поддерживающих качество сильно различается. Вот проверенные варианты:
Noto Sans Arabic (Google Fonts) — универсальный, бесплатный, отлично работает для интерфейсов. Поддерживает множество начертаний.
IBM Plex Arabic — современный, профессиональный. Хорош для корпоративных сайтов и B2B.
Cairo — элегантный шрифт с хорошей читаемостью. Подходит для контентных сайтов.
Amiri — наборный шрифт, отлично подходит для длинных текстов и статей.
Есть нюанс: арабские символы визуально выглядят мельче латинских при одинаковом размере шрифта. Поэтому для арабской версии сайта обычно увеличивают базовый размер шрифта на 1–2px и добавляют чуть больше межстрочного интервала (`line-height`). Это мелочь, которая существенно влияет на читаемость.
Двунаправленный текст (Bidi)
Самая коварная часть RTL-вёрстки — обработка двунаправленного (bidirectional) текста. На арабской странице неизбежно будут элементы на латинице: названия брендов, email-адреса, числа, технические термины, URL-адреса.
Unicode Bidirectional Algorithm (UBA) — встроенный в браузеры механизм, который определяет направление для каждого символа в тексте. В большинстве случаев он справляется автоматически. Но бывают ситуации, когда результат неожиданный — например, когда латинский текст с пунктуацией вставлен в середину арабского предложения.
Для контроля используются HTML-теги:
- `<bdi>` (Bi-Directional Isolation) — изолирует фрагмент текста, чтобы его направление не влияло на окружающий текст. Незаменим при вставке пользовательского контента (имена, комментарии), где направление заранее неизвестно.
- `<bdo>` (Bi-Directional Override) — принудительно задаёт направление текста.
На практике `<bdi>` нужен чаще. Если у вас есть динамический контент — имена пользователей, названия товаров, адреса — оборачивайте их в `<bdi>`, и вы избежите проблем с отображением.
SEO-аспекты RTL-сайтов
Если вы создаёте арабскую версию сайта для поисковой оптимизации — есть несколько моментов, которые нужно учитывать:
Hreflang-разметка. Обязательно настройте `<link rel="alternate" hreflang="ar">` для связи арабской и основной версий сайта. Это помогает поисковикам показывать правильную версию пользователям из разных регионов.
Отдельные URL. Арабская версия должна жить на отдельных URL: подпапка `/ar/`, поддомен `ar.site.com` или отдельный домен. Переключение по cookie или параметру URL — плохая практика для SEO.
Мета-теги на арабском. Title и description должны быть написаны на арабском, а не транслитерированы с русского.
Арабское семантическое ядро. Подбор ключевых слов на арабском — отдельный процесс, потому что структура языка кардинально отличается от русского и английского. Один корень слова может иметь десятки словоформ.
Тестирование RTL-вёрстки
Тестирование — критический этап, который нельзя пропускать. Вот мой чек-лист:
Проверьте все страницы визуально — элементы не должны налезать друг на друга, текст не должен обрезаться. Убедитесь, что формы корректно работают — автофокус, валидация, placeholder должны отображаться правильно. Протестируйте на мобильных устройствах — RTL на малых экранах часто выявляет проблемы, которые незаметны на десктопе. Попросите носителя арабского языка пройтись по сайту — технически правильная вёрстка может оказаться культурно неуместной.
Когда стоит начинать с RTL
Если вы только проектируете сайт и знаете, что в будущем потребуется арабская версия — закладывайте RTL-совместимость с самого начала. Используйте CSS Logical Properties, стройте layout на Flexbox и Grid, избегайте жёсткой привязки к физическим направлениям. Это добавит к начальной разработке не более 10% времени, но сэкономит месяцы при последующей адаптации.
Если сайт уже готов — используйте автоматические инструменты (RTLCSS, PostCSS-RTL) для базовой конвертации, а затем доводите вручную. По моему опыту, адаптация существующего среднего сайта (50–100 страниц) занимает от двух до четырёх недель работы фронтенд-разработчика.
RTL-вёрстка — нишевый навык, который на российском рынке востребован не так часто. Но если ваш бизнес выходит на Ближний Восток, Северную Африку или работает с арабоязычной аудиторией — без качественной RTL-адаптации вы просто не будете восприняты всерьёз. Начните с CSS Logical Properties — это фундамент, на котором строится всё остальное.