Підтримка RTL-мов у верстці веб-сайту
RTL (Right-to-Left) забезпечує підтримку мов, які пишуться справа наліво: арабська, іврит, перська (фарсі), урду. RTL-верстка — це не просто direction: rtl, це системна переробка всіх direction-sensitive CSS-властивостей та UI-компонентів.
Основна настройка RTL
<html dir="rtl" lang="ar">
/* Глобальний скид для RTL */
[dir="rtl"] {
direction: rtl;
unicode-bidi: embed;
}
CSS Logical Properties
Замість фізичних властивостей (left, right, margin-left), використовуйте logical properties, які автоматично адаптуються до 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 це обробляється автоматично:
.back-arrow {
margin-inline-end: 8px; /* в LTR: margin-right, в RTL: margin-left */
/* іконка переворачується через transform або напрямок іконки */
}
Іконки та зображення
Іконки з семантичним напрямком (стрілки, кнопки back/forward) мають дзеркалитися для RTL:
[dir="rtl"] .directional-icon {
transform: scaleX(-1);
}
Іконки без напрямку (серце, зірка, галочка) НЕ мають дзеркалитися. Іконки з текстом (логотипи) НЕ мають дзеркалитися.
Flexbox та Grid в RTL
flex-direction: row в RTL автоматично розворачується. Однак явні margin-left/margin-right не змінюються — їх потрібно замінити на logical properties.
/* Неправильно: */
.nav-item + .nav-item { margin-left: 16px; }
/* Правильно: */
.nav-item + .nav-item { margin-inline-start: 16px; }
Шрифти для RTL-мов
Арабський текст вимагає спеціальних шрифтів: Noto Sans Arabic, Tajawal, Cairo, IBM Plex Sans Arabic. Цифри в арабському контексті можуть відображатися як східноарабські цифри (٠١٢٣٤٥٦٧٨٩) або західні — залежить від locale.
Двонаправлений текст (BiDi)
Сторінка може містити обидва напрямки (арабська + англійська). CSS-властивість unicode-bidi: isolate ізолює блоки:
.ltr-content {
direction: ltr;
unicode-bidi: isolate;
}
Для інлайнових елементів із протилежним напрямком — використовуйте тег <bdi>.
Тестування 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');
// Перевіріть позиціонування ключових елементів
});
Терміни
Додавання RTL-підтримки до готового LTR-сайту: 2–5 днів (залежить від обсягу використання фізичних CSS-властивостей). Розробка з RTL з нуля з використанням logical properties: без додаткового часу при правильній практиці.