RTL колдоо
1) Принциптер
1. RTL тексттин котормосу эмес, ой жүгүртүүнүн күзгүсү. Октор, окуу тартиби, фокус тартиби, жаңсоолор жана навигация өзгөрөт.
2. left/right ордуна логикалык CSS касиеттери. 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius' ж.б.
3. Global багытын камтыйт, жергиликтүү LTR үзүндүлөрүн бөлүп. сандар, URL, коддору, электрондук почта жана IBAN дайыма солдон-оңго окулат.
4. маанисине эмес, багытына көз каранды нерсени күзгү. "Play", "↙" жана саат/процесс сөлөкөттөрү күзгүгө мүмкүн эмес.
5. Pseudo-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-жылуулоо колдонуу:- Tags: '' (багытты обочолонот), ' '(мажбурлап кайра аныктайт).
- '\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: күзгү тартиби: "الصفحة الريسية الرهان التاكيد".
Панелдер/меню: негизги navbar - оң; "артка" солду көрсөтөт (RTL саптын башында).
Карталар/тизмелер: inline-баштоо боюнча аталыштарды тегиздөө; статус сөлөкөттөрү - inline-end.
Карусельдер жана свайпалар: inline-start (RTLде - оңго). Бет көрсөткүчтөрү да күзгү.
Пагинация: "кийинки" жебе inline-стартта, "мурунку" - 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 катуу эмес; киргизүүнү жана тандоону колдогула.
Тизме/Радио/Чекбокс: контролдоо, Click аймагынын оң колу ≥ 44 × 44 px.
Sliders 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) Типография жана окуу жөндөмдүүлүгү
жакшы араб/жүйүт графема жана лигатуралар менен ариптер (Араб shaping).
Жол аралык интервал 1. 4–1. 6; тар жол качуу.
Араб кашида үчүн (штрих узартуу) туурасы боюнча тегиздөө үчүн - кылдаттык менен күйгүзүү ('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-updates ('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 Төлөмдөр/CUS
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-киргизүү (электрондук почта, суммасы).
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 review өткөн экрандар үлүшү.
BiDi-кемчиликтер/бошотуу: аралаш тексттин мүчүлүштүктөрдүн саны.
Негизги тапшырмаларды аткаруу убактысы (LTR vs RTL):> 5-10% айырмаланбашы керек.
Сандардын формаларына киргизүү катасы: туура эмес caret/маска менен окуялардын үлүшү.
CLS/Перф: 'dir' -өчүрүү учурунда макет секирүү жок.
17) QA-чек тизмеси
Багыты жана макети
- '' RTL локалдары үчүн; ': dir (rtl)' стилдери колдонулат.
- ордуна логикалык касиеттери 'left/right'.
- багыттоо/Bradcramb/карусель/Pagination туура күзгүгө.
Текст жана BiDi
- Сандар/валюталар/URL/e-mail - 'dir = "ltr"' же ''.
- Аралаш саптарда "тескери" белгилер жок.
- "Intl. 'аркылуу даталар/валюталар локалдаштырылган.
Формалар
- Оң колтамгалар; басуу зоналары ≥ 44 × 44 px.
- Тел/IBAN/суммасы - LTR caret, туура маска.
- Sliders/минималдуу/максималдуу күтүлгөн иш.
Иконалар/Сүрөттөр
- гана багытталган күзгү; өзгөчөлүктөр сакталат.
- Жергиликтүү версиялары жок сүрөттөрдө текст жок.
A11u/аткаруу
- 'lang' коюлган; SR туура окуйт.
- 'dir' өзгөргөндө эч кандай кошумча сүрөттөр жок.
- Контраст/фокус шакек AA ылайык келет.
18) Дизайн системасында документтер
Direction & BiDi бөлүмү: күзгү саясаты, иконалар үчүн өзгөчөлүктөрдүн тизмеси.
RTL токендер жана Линтер стилдери топтому (тыюу 'left/right').
Галерея Do/Don 't: карусель, бредкрамб, сандардын формалары, слайддар, графиктер.
Псевдо-RTL скрипттери жана ревю чек баракчалары.
Кыскача резюме
Туура RTL колдоо - бул логикалык CSS касиеттери, аң-сезимдүү күзгү жана катуу BiDi изоляциясы. LTR сандар/URL, күзгү багыттоо жана багыттагы сөлөкөттөр, алдын ала жана сүрөттөр - окууга болот. Ошентип, араб, иврит, фарси же урду үчүн интерфейс табигый жана тез болот - купон коюм жана төлөм формаларынан турнир таблицаларына жана live-матчтарга чейин.