Підтримка RTL
1) Принципи
1. RTL - це не переклад тексту, а дзеркалювання мислення. Змінюються осі, порядок читання, порядок фокусу, жести і навігація.
2. Логічні CSS-властивості замість left/right. Переходьте на'margin-inline-start','inset-inline-end','border-start-start-radius'і т.п.
3. Глобально включаємо напрямок, локально ізолюємо LTR-фрагменти. Числа, URL, коди, e-mail і IBAN завжди читаються зліва-направо.
4. Дзеркалюйте те, що залежить від напрямку, а не сенсу. «Play», «↗», «↙» та іконки годин/процесу можуть не дзеркалитися.
5. Тестуйте псевдо-RTL. Вмикайте'dir = «rtl «'/' direction: rtl'і псевдопереклади до виходу.
2) Напрямок: 'dir'і логічні властивості
Глобально на документі/корені:html
<html lang="ar" dir="rtl"> … </html>css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }html
<p dir="auto">…</p>3) BiDi та ізоляція змішаного тексту
Змішання арабської/івриту з латиницею/числами ламає порядок символів. Використовуйте BiDi-ізоляцію:- Теги: ''( ізолює напрямок),'< bdo dir = «ltr'rtl»>'( примусово перевизначає).
- '\u2066'LRI/'\u2067'RLI - початок LTR/RTL-ізоляції, '\u2069'PDI - кінець,
- '\u200E'LRM/'\u200F'RLM - однобайтні маркери для коротких вставок.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Навігація, ієрархія та макети
Breadcrumbs: порядок дзеркальний: «الصفحة الرئيسية ‹ الرهان ‹ التأكيد».
Панелі/меню: основний навбар - праворуч; «назад» вказує ліворуч (до початку рядка RTL).
Картки/списки: вирівнюйте заголовки по inline-start; іконки статусу - до inline-end.
Каруселі і свайпи: прогортання в бік inline-start (в RTL - вправо). Індикатори сторінок теж дзеркальні.
Пагінація: стрілка «наступна» йде на inline-start, «попередня» - на inline-end.
5) Іконки та зображення
Дзеркалюйте спрямовані піктограми: стрілки, «вперед/назад», плей-головка, «розгортати/згортати».
Не дзеркалюйте: іконки тексту, графіків, годинників (якщо є реальна стрілка часу), логотипи брендів.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Для SVG: використовуйте'transform-box: view-box;'щоб не «пливло».
Уникайте тексту всередині зображень → локалізуйте окремими шарами.
6) Форми і введення
Вирівнювання за контентом: текстові поля за'text-align: start;', числові/суми/URL/e-mail - LTR.
Атрибути:html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">Placeholder/label локалізовані, але caret в числах/кодах повинен йти зліва направо.
Маски: не «перехоплюйте» caret жорстко; підтримайте вставку та виділення.
Список/радіо/чекбокс: підписи праворуч від контролів, зони кліка ≥ 44 × 44 px.
Слайдери min→max: в RTL мінімум на правому краю, максимум - на лівому (або показуйте шкалу без інверсії і цифри LTR).
7) Числа, дати, валюти
За замовчуванням в арабських локалях застосовуються арабо-індоцифри (٠١٢٣٤٥٦٧٨٩). Рішення - бізнес-політика:- У фінансовому UI частіше показують латинські цифри (0-9) заради інтероперабельності, але формат (прогалини/знаки) - по локалі.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Відносний час ('Intl. RelativeTimeFormat'), спрямовані роздільники і локальні скорочення днів/місяців.
8) Типографіка і читаність
Шрифти з хорошою арабською/єврейською графемою і лігатурами (Arabic shaping).
Міжрядковий інтервал 1. 4–1. 6; уникайте вузьких трекінгів.
Для арабської допустимо kashida (подовження штрихів) при вирівнюванні по ширині - включайте обережно ('text-justify: inter-word; '/підтримка рушія).
Забороніть курсив латиниці всередині арабського рядка (псує вертикальний ритм).
9) Графіки, шкали та таблиці
Осі X йдуть справа наліво; легенда вирівнюється за inline-end.
Стовпчики таблиць: «первинний» стовпець (ім'я/гра) - праворуч; номери/суми можуть залишатися LTR і вирівнюватися за inline-end.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y і скрінрідери
Переконайтеся, що'lang = «ar «'/' lang =» he»'виставлений: рушій TTS вибере правильну озвучку.
Динамічні зміни напрямку озвучуйте акуратно - не перемикайте'dir'на фрагментах без потреби.
Лайв-оновлення ('aria-live = «polite»') - текст без змішування напрямків.
Іконки не передають сенс без текстових міток; використовуйте'aria-label'.
11) Специфіка iGaming
11. 1 Купон ставки (betslip)
Порядок полів: сума → коефіцієнт → потенційний виграш; підписи праворуч, числа/коефіцієнти LTR.
Оновлення коефіцієнтів підсвічуйте м'яко; стрілки «вгору/вниз» дзеркалити не потрібно (сенс напрямку ціни - універсальний).
11. 2 Матчі/ринки
Список ліг/подій вирівнюйте за inline-start (в RTL - праворуч).
Таймери і рахунок - LTR'dir = «ltr»'з табличними цифрами ('font-variant-numeric: tabular-nums;`).
11. 3 Платежі/КУС
Поля IBAN/BIC/телефон завжди LTR.
Банківські назви/адреса - RTL.
Помилки/валідатори показують маркери праворуч.
11. 4 Турніри/лідерборди
Колонки: позиція, нік, окуляри - позиція праворуч; окуляри вирівнюйте за inline-end (цифри LTR).
12) Виробництво та тестування
Псевдо-RTL в діві:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Снапшоти макета при'dir = rtl'.
- Перевірка відсутності'left/right'в CSS (лінт).
- E2E: порядок табуляції, свайпи каруселі, поведінка слайдерів.
- Візуальні тести з арабським текстом + LTR-вставками (e-mail, сума).
13) Токени дизайн-системи (приклад)
json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}14) Сніппети
Переключення напрямку в додатку (React):tsx import { useEffect } from "react";
export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>css html:dir(rtl) input[type="range"] { direction: rtl; }15) Антипатерни
Жорсткі'left/right'в стилях → ламається RTL.
Введення чисел/IBAN/URL без'dir = «ltr»'→ «ламаний» caret і порядок.
Дзеркалювання логотипів/графіків/годин.
Один і той же набір іконок дзеркалиться завжди - без винятків за змістом.
Каруселі, листалки і пагінації не перевернуті.
Змішані рядки без BiDi-ізоляції → «танцюючі» символи.
16) Метрики
RTL coverage: частка екранів, що пройшли RTL-рев'ю.
BiDi-дефекти/реліз: кількість багів змішаного тексту.
Час виконання ключових завдань (LTR vs RTL): не повинно відрізнятися> 5-10%.
Помилка введення у формах чисел: частка подій з невірним caret/маскою.
CLS/перф: без стрибків макета при «dir» -переключенні.
17) QA-чек-лист
Напрямок і макет
- '< html dir = «rtl»>'для RTL-локалей;':Стилі dir (rtl) застосовуються.
- Логічні властивості замість'left/right'.
- Навігація/бредкрамби/каруселі/пагінація дзеркаляться коректно.
Текст і BiDi
- Числа/валюти/URL/e-mail -'dir = «ltr»'або'< bdi>'.
- Немає «перевернутих» символів у змішаних рядках.
- Локалізовані дати/валюти через'Intl.'.
Форми
- Підписи праворуч; зони кліка ≥ 44 × 44 px.
- Телефон/IBAN/сума - LTR caret, коректні маски.
- Слайдери/мінімуми/максимуми поводяться очікувано.
Іконки/Зображення
- Дзеркаляться тільки спрямовані; винятки дотримані.
- Немає тексту в картинках без локальних версій.
А11у/Перформанс
- 'lang'виставлений; SR коректно читає.
- Немає зайвих перемальовувань при зміні'dir'.
- Контраст/фокус-кільця відповідають AA.
18) Документація в дизайн-системі
Розділ Direction & BiDi: політика дзеркалювання, список винятків для іконок.
Набір RTL-токенів і лінтер стилів (заборона'left/right').
Галерея Do/Don't: каруселі, бредкрамби, форми чисел, слайдери, графіки.
Скрипти псевдо-RTL і чек-листи рев'ю.
Коротке резюме
Правильна RTL-підтримка - це логічні CSS-властивості, усвідомлене дзеркалювання і сувора BiDi-ізоляція. Ізолюйте числа/URL в LTR, дзеркальті навігацію і спрямовані іконки, тримайте форми передбачуваними, а графіки - читабельними. Так інтерфейс для арабського, івриту, фарсі або урду буде природним і швидким - від купона ставки і платіжних форм до таблиць турнірів і live-матчів.