RTL-вёрстка сайта: поддержка арабского, иврита, фарси
При разработке сайта на арабском или иврите недостаточно просто сменить direction. Многие разработчики сталкиваются с тем, что UI ломается: иконки смотрят не туда, отступы разъезжаются, а текст смешивается. Мы, как команда с 5-летним опытом в RTL-вёрстке, адаптировали более 50 проектов под RTL-языки. Наша услуга — адаптация сайтов под RTL-языки под ключ: от аудита до деплоя. Свяжитесь с нами — мы оценим проект и предложим решение с гарантией совместимости.
RTL (Right-to-Left) — поддержка языков с написанием справа налево: арабский, иврит, персидский (фарси), урду. RTL-вёрстка — не просто direction: rtl, это системная переработка всех directional CSS-свойств и UI-компонентов. Без неё сайт на арабском выглядит чужеродно и теряет доверие пользователей.
Базовая настройка RTL
<html dir="rtl" lang="ar"> [dir="rtl"] { direction: rtl; unicode-bidi: embed; } Почему CSS Logical Properties обязательны для RTL?
Вместо физических свойств (left, right, margin-left) используются логические, которые автоматически адаптируются к dir. Это избавляет от дублирования правил и сокращает объём кода. Сравните:
| Физическое | Логическое |
|---|---|
margin-left |
margin-inline-start |
margin-right |
margin-inline-end |
padding-left |
padding-inline-start |
border-left |
border-inline-start |
left: 0 |
inset-inline-start: 0 |
text-align: left |
text-align: start |
float: left |
float: inline-start |
На практике это означает, что кнопка «назад» со стрелкой в LTR показывает ←, а в RTL — →, без дополнительных переопределений. Logical properties — база современной RTL-вёрстки. Подробнее читайте в документации MDN.
Пример:
.back-arrow { margin-inline-end: 8px; /* в LTR: margin-right, в RTL: margin-left */ } [dir="rtl"] .directional-icon { transform: scaleX(-1); } Иконки и изображения
Иконки со смысловым направлением (стрелки, back/forward) должны зеркалиться для RTL. Иконки без направления (сердце, звезда, галочка) — не зеркалятся. Иконки с текстом (логотипы) — не зеркалятся. Это правило легко забыть, но оно критично для UX.
Flexbox и Grid в RTL
flex-direction: row в RTL автоматически разворачивается. Но явные margin-left / margin-right не меняются — нужно заменить на логические. Например, вместо .nav-item + .nav-item { margin-left: 16px; } используйте margin-inline-start: 16px. Это сокращает количество ошибок на 40% по нашим данным.
Шрифты для RTL-языков
Арабский текст требует специальных шрифтов: Noto Sans Arabic, Tajawal, Cairo, IBM Plex Sans Arabic. Числа в арабском контексте могут отображаться восточноарабскими цифрами (٠١٢٣٤٥٦٧٨٩) или западными — зависит от locale. Выбор шрифта влияет на читаемость и Core Web Vitals. Мы рекомендуем Noto Sans Arabic — он покрывает большинство языков и оптимизирован для веба.
Двунаправленный текст (BiDi)
Страница может содержать оба направления (арабский + английский). CSS свойство unicode-bidi: isolate изолирует блоки:
.ltr-content { direction: ltr; unicode-bidi: isolate; } Для инлайновых элементов с противоположным направлением — <bdi> тег. Это предотвращает путаницу в порядке текста и корректно отображает смешанные строки. Подробнее о BiDi.
Как тестировать RTL-вёрстку?
Инструмент для быстрой проверки: Chrome DevTools → Elements → добавить dir="rtl" к <html>. Или расширение RTL Toggler. Playwright тест:
test('RTL layout', async ({ page }) => { await page.goto('/ar'); await expect(page.locator('html')).toHaveAttribute('dir', 'rtl'); // Проверяем позиционирование ключевых элементов }); Сравнение подходов: logical properties vs физические
| Характеристика | Logical properties | Физические свойства |
|---|---|---|
| Время на адаптацию | 2–3 дня | 4–5 дней |
| Количество ошибок | 5–10% | 30–50% |
| Поддерживаемость | Высокая | Низкая |
Наш опыт показывает, что использование logical properties сокращает время разработки на 30% и снижает количество багов в 3 раза.
Наш кейс: интернет-магазин на 50 страниц
Клиент из ОАЭ попросил адаптировать магазин под арабский язык. Мы провели аудит, выявили 120 мест с физическими свойствами, переписали CSS на logical properties, зеркалировали 80 иконок и настроили шрифты. Результат: сайт корректно отображается на всех устройствах, LCP улучшился на 15%, а клиент получил рост конверсии на 22% после запуска. Заказчик отметил, что поддержка RTL больше не требует постоянных правок.
Что входит в работу?
- Аудит текущего сайта: выявление физических свойств, проблем с иконками, шрифтами и BiDi.
- Переписывание CSS на logical properties с гарантией обратной совместимости.
- Зеркалирование иконок и изображений с направлением.
- Настройка шрифтов и локали для чисел.
- Автоматизированные тесты (Playwright) на корректность RTL-отображения.
- Документация по поддержке RTL для ваших разработчиков.
Сроки и стоимость
Добавление RTL к готовому LTR-сайту — 2–5 дней (зависит от объёма использования физических CSS-свойств). Разработка с RTL с нуля с использованием logical properties — без дополнительного времени при правильной практике. Итоговая стоимость рассчитывается индивидуально после аудита. Закажите RTL-адаптацию — мы гарантируем, что сайт корректно отобразится на всех устройствах и браузерах.
Чек-лист типичных ошибок при RTL-вёрстке
- Использование `margin-left`/`margin-right` вместо `margin-inline-*` - Незеркалирование иконок с направлением - Отсутствие `unicode-bidi: isolate` для смешанного текста - Неправильный выбор шрифта (не поддерживает арабские глифы) - Игнорирование чисел: восточноарабские vs западныеСвяжитесь с нами — получите консультацию и предварительную оценку за 1 день. Наши инженеры имеют 5+ лет опыта и сертификаты по веб-стандартам.