RTL қолдауы
1) Қағидаттар
1. RTL - мәтіннің аудармасы емес, ойлаудың айнасы. Біліктер, оқу тәртібі, фокус тәртібі, қимылдар және навигация өзгереді.
2. left/right орнына логикалық CSS сипаттары. '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 оқшаулағышын пайдаланыңыз:- Теги: '' (бағытты оқшаулайды), ' '(күштеп қайта анықтайды).
- '\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-де - оңға). Беттердің индикаторлары да айнадай.
Pagination: «келесі» көрсеткісі 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' дегенді ауыстырмаңыз.
Live-жаңарту ('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) Өндіріс және тестілеу
Девидегі Psevdo-RTL:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Орналасу snapshots 'dir = rtl'.
- CSS (линт) ішінде 'left/right' жоқтығын тексеру.
- 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-чек парағы
Бағыт және орналасу
- '' RTL локальдары үшін; ': dir (rtl)' стилі қолданылады.
- 'left/right' орнына логикалық сипаттар.
- Навигация/бредкрамбалар/карусельдер/пагинация дұрыс айналанады.
Мәтін және BiDi
- Сандар/валюта/URL/e-mail - 'dir = «ltr»' немесе ''.
- Аралас жолдарда «аударылған» таңбалар жоқ.
- 'Intl.' арқылы күндер/валюталар оқшауланды.
Пішіндер
- Оң жақтағы қолтаңбалар; 44 ≥ 44 px × басу аймақтары.
- Телефон/IBAN/сомасы - LTR caret, дұрыс маскалар.
- Слайдтар/минимумдар/максимумдар өздерін күтілгендей ұстайды.
Иконалар/Суреттер
- Тек жіберілгендер ғана айналанады; ерекшеліктер сақталды.
- Жергілікті нұсқаларсыз суреттерде мәтін жоқ.
А11у/Спектакль
- 'lang' қойылған; SR дұрыс оқиды.
- 'dir' дегенді ауыстырғанда артық бояулар жоқ.
- Контраст/фокус сақинасы АА сәйкес келеді.
18) Дизайн-жүйедегі құжаттама
Direction & BiDi бөлімі: зеркалау саясаты, иконалар үшін ерекшеліктер тізімі.
RTL-токендер жиынтығы және мәнерлер линтері (тыйым 'left/right').
Do/Don 't галереясы: карусельдер, бредкрамбтар, сандар пішіндері, слайдтар, графиктер.
Псевдо-RTL скрипттері және ревью чек парақтары.
Қысқаша түйіндеме
Дұрыс RTL қолдау - бұл логикалық CSS қасиеттері, саналы зеркалау және қатаң BiDi оқшаулау. LTR-дегі/URL сандарын, навигация айнасы мен бағытталған белгішелерді оқшаулаңыз, пішіндерді болжамды, ал графиктерді оқылатын етіп ұстаңыз. Осылайша, араб, иврит, фарси немесе урду тілдеріне арналған интерфейс табиғи және жылдам болады - мөлшерлеме купоны мен төлем формаларынан турнир кестелері мен live-матчтарға дейін.