Вёрстка сайта с поддержкой RTL-языков
RTL (Right-to-Left) — поддержка языков с написанием справа налево: арабский, иврит, персидский (фарси), урду. RTL-вёрстка — не просто direction: rtl, это системная переработка всех directional 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 */
/* иконка flipается через transform или used icon direction */
}
Иконки и изображения
Иконки со смысловым направлением (стрелки, back/forward кнопки) должны зеркалиться для RTL:
[dir="rtl"] .directional-icon {
transform: scaleX(-1);
}
Иконки без направления (сердце, звезда, галочка) — НЕ зеркалятся. Иконки с текстом (логотипы) — НЕ зеркалятся.
Flexbox и Grid в RTL
flex-direction: row в RTL автоматически разворачивается. Но явные margin-left / margin-right не меняются — нужно заменить на logical.
/* Неправильно: */
.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: без дополнительного времени при правильной практике.