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+ років досвіду та сертифікати з веб-стандартів.