Дастгирии RTL
1) Принсипҳо
1. RTL тарҷумаи матн нест, балки оинаи тафаккур аст. Табарҳо, тартиби хониш, фармоиши фокус, имову ишора ва тағирёбии навигатсия.
2. Хусусиятҳои мантиқии CSS ба ҷои чап/рост. Гузариш ба 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius' ва ғайра.
3. Дар саросари ҷаҳон самтро фаъол кунед, пораҳои LTR-ро ба таври маҳаллӣ ҷудо кунед. Рақамҳо, URL, рамзҳо, почтаи электронӣ ва IBAN ҳамеша аз чап ба рост хонда мешаванд.
4. Оина он чизе, ки аз самт вобаста аст, на ба маъно. "Бозӣ", "↗", "↙" ва нишонаҳои соат/раванд метавонанд инъикос нашаванд.
5. Санҷиши псевдо-RTL. Дохил кардани 'dir = "rtl "'/' самт: тарҷумаҳои 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-ро истифода баред:- Барчаспҳо: '' (самти изолятсия), ' '(қувваҳо сарнагун карда мешаванд).
- '\u2066 'LRI/'\u2067' RLI - оғози изолятсияи LTR/RTL, '\u2069 'PDI - хотима,
- '\u200 'E' LRM/'\u200 'F' RLM - аломатҳои як байт барои воридоти кӯтоҳ.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Навигатсия, иерархия ва тарҳҳо
Нонрезаҳо: фармоиши оина: "ال→ سه; الراسسه ‹ الرتان "التegикӣ ان"
Панелҳо/менюҳо: навори асосӣ - дар тарафи рост; "бозгашт" ба чап ишора мекунад (то оғози хати RTL).
Кортҳо/рӯйхатҳо: сарлавҳаҳоро ба сатри оғоз мутобиқ кунед; нишонаҳои вазъ - то ба охир.
Carousels ва swipes: ҳаракат ба самти дохилӣ-оғоз (дар RTL - ба рост). Нишондиҳандаҳои саҳифа низ инъикос ёфтаанд.
Пагинатсия: тирчаи "навбатӣ" ба хатти оғоз, "қаблӣ" - ба хати-охири меравад.
5) Нишонаҳо ва тасвирҳо
Нишонаҳои самти оина: тирҳо, "ба пеш/қафо", сари бозӣ, "васеъ/пошидан".
Оина накунед: нишонаҳои матн, графикҳо, соатҳо (агар тирчаи вақти воқеӣ мавҷуд бошад), логотипҳои бренд.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }Барои SVG: 'transform-box: view-box;' -ро истифода баред. барои пешгирӣ кардани "шино".
Нагузоред, ки матн дар дохили тасвирҳо → дар қабатҳои алоҳида локализатсия карда шавад.
6) Шаклҳо ва вуруд
Ҳамоҳангсозии мундариҷа: ҳамоҳангсозии матн: оғоз; 'майдонҳои матн, рақамӣ/миқдор/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">Ҷойгиркунӣ/тамғакоғазҳо локализатсия карда шудаанд, аммо рақамҳо/рамзҳо бояд аз чап ба рост гузаранд.
Ниқобҳо: ба таври қатъӣ "халал нарасонед"; воридкунӣ ва интихоби дастгирӣ.
Рӯйхат/радио/қуттии назоратӣ: имзоҳо ба тарафи рости идоракунӣ, минтақаҳои клик ≥ 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. Формати нисбии вақт '), делимитаторҳои самтӣ ва ихтисороти рӯзона/моҳии маҳаллӣ.
8) Типография ва хониш
Ҳуруфҳо бо графикаи хуби арабӣ/ибрӣ ва лигатураҳо (шакли арабӣ).
Фосилаи хати 1. 4–1. 6; аз пайгирии танг канорагирӣ кунед.
Барои забони арабӣ, кашида (зарбаҳои дарозкунӣ) ҳангоми ҳамоҳангсозӣ дар паҳнӣ иҷозат дода мешавад - бодиққат фурӯзон кунед ('матн асоснок: байни калима; '/дастгирии муҳаррик).
Курсиви лотиниро дар дохили хати арабӣ манъ кунед (ритми амудиро вайрон мекунад).
9) Графикҳо, тарозуҳо ва мизҳо
X-меҳварҳо аз рост ба чап мегузаранд; ривоят бо хати дохилӣ ҳамоҳанг карда шудааст.
Сутунҳои ҷадвал: сутуни "ибтидоӣ" (ном/бозӣ) - рост; рақамҳо/маблағҳо метавонанд LTR боқӣ монанд ва ба хати ниҳоӣ мутобиқ карда шаванд.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y ва хонандагони экран
Боварӣ ҳосил кунед, ки 'lang = "ar "'/' lang =" he" 'фош карда мешавад: муҳаррики TTS амали дурусти овозро интихоб мекунад.
Тағироти динамикии садо дар самт бодиққат - ба қисмҳои нолозим 'dir' -ро иваз накунед.
Навсозиҳои зинда ('aria-live = "хушмуомила") - матн бе омезиши самтҳо.
Нишонаҳо бе тамғакоғазҳои матнӣ маъно надоранд; 'aria-label' -ро истифода баред.
11) Хусусиятҳои IGaming
11. 1 купон Бет (betslip)
Тартиби саҳроӣ: миқдор → таносуб → фоидаи эҳтимолӣ; имзоҳои дуруст, рақамҳо/омилҳои LTR.
Коэффисентҳоро мулоим навсозӣ кунед; тирҳои боло/поён набояд инъикос карда шаванд (маънои самти нарх универсалӣ аст).
11. 2 Бозӣ/Бозорҳо
Рӯйхати лигаҳо/чорабиниҳоро бо оғози дохилӣ ҳамоҳанг созед (дар RTL - дар тарафи рост).
Вақтсанҷ ва ҳисоб - LTR 'dir = "ltr" бо рақамҳои ҷадвал (' ҳуруф-вариант-рақам: ҷадвал-рақамҳо; ').
11. 3 Пардохт/ACC
Майдонҳои IBAN/BIC/телефон ҳамеша LTR мебошанд.
Номҳо/суроғаҳои бонкӣ - RTL.
Хатогиҳо/валидаторҳо нишонаҳоро дар тарафи рост нишон медиҳанд.
11. 4 Мусобиқаҳо/пешсафон
Сутунҳо: мавқеъ, лақаб, айнак - мавқеъ дар тарафи рост; айнакро ба хати дохилӣ баробар кунед (рақамҳои LTR).
12) Истеҳсол ва озмоиш
Псевдо-RTL дар духтар:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Суратҳои нақшакашӣ дар 'dir = rtl'.
- Санҷед, ки оё 'чап/рост' дар CSS мавҷуд нест (линт).
- E2E: тартиби ҷадвалбандӣ, лағжиши карусел, рафтори лағжанда.
- Озмоишҳои визуалӣ бо матни арабӣ + LTR замимаҳо (e-mail, sum).
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) Снайперҳо
Барои иваз кардани самт дар барнома (Реаксия):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) Антипаттернҳо
'Чап/рост' дар § услубҳо RTL-ро мешикананд.
Ворид кардани рақамҳо/IBAN/URL бе 'dir = "ltr"' → карет ва тартиби "шикаста".
Инъикоси логоҳо/диаграммаҳо/соатҳо.
Ҳамон маҷмӯи нишонаҳо ҳамеша оина мекунанд - бидуни истисно дар маъно.
Каруселҳо, варақаҳо ва саҳифаҳо зеру забар нестанд.
Сатрҳои омехта бидуни изолятсияи BIDi → аломатҳои "рақс".
16) Метрҳо
Фарогирии RTL: ҳиссаи экранҳое, ки баррасии RTL-ро аз сар гузаронидаанд.
Камбудиҳо/барориши BIDi: шумораи хатогиҳои матнии омехта.
Вақти роҳбарӣ (LTR vs RTL): набояд фарқ кунад> 5-10%.
Хатои вуруд дар шаклҳои рақамӣ - фоизи ҳодисаҳо бо карет/ниқоби нодуруст.
CLS/perf: ҳангоми гузариши 'dir' ягон тарҳ ҷаҳида намешавад.
17) Рӯйхати назоратии QA
Самт ва тарҳ
- '' барои маҳалҳои RTL; ': dir (rtl)' услубҳо истифода мешаванд.
- Хусусиятҳои мантиқӣ ба ҷои 'left/right'.
- Навигатсия/bredkramby/carousels/pagination zerkalitsya дуруст.
Матн ва Би-Ди
- Рақамҳо/асъорҳо/URL/e-mail - 'dir = "ltr" ё' '.
- Аломатҳои "баръакс" дар сатрҳои омехта нестанд.
- Санаҳо/асъорҳои маҳаллӣ тавассути 'Intl. '.
Шаклҳо
- Тамғакоғазҳои рост; минтақаҳои ≥ 44 × 44 px -ро пахш кунед.
- Телефон/IBAN/маблағ - Карет LTR, ниқобҳои дуруст.
- Слайдерҳо/пастҳо/баландӣ тавре ки интизор мерафт, рафтор мекунанд.
Нишонаҳо/Тасвирҳо
- Танҳо самт инъикос ёфтааст; истисноҳо иҷро карда мешаванд.
- Матн дар расмҳо бидуни версияҳои маҳаллӣ нест.
А11у/Performance
- 'lang' фош карда шуд; SR дуруст мехонад.
- Ҳангоми тағир додани 'dir' ҳеҷ гуна такрори нолозим.
- Ҳалқаҳои контраст/фокус ба АА мувофиқанд.
18) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ
Бахши роҳнамо ва бахши BIDi: сиёсати оина, рӯйхати истисноҳо барои нишонаҳо.
Маҷмӯи аломатҳои RTL ва линтерҳои услубӣ (манъкунии 'чап/рост').
Иҷро накунед/Галерея: carousels, bredcrambs, шаклҳои рақамӣ, слайдерҳо, графикҳо.
Скриптҳои Pseudo-RTL ва рӯйхати санҷишҳо.
Хулосаи мухтасар
Дастгирии дурусти RTL ин хусусиятҳои мантиқии CSS, оинаи огоҳона ва ҷудокунии қатъии BIDI мебошад. Рақамҳои изолятсия/URL дар LTR, паймоиши оина ва нишонаҳои самтӣ, шаклҳои пешгӯишавандаро нигоҳ доред ва графикҳоро хонед. Ҳамин тавр, интерфейс барои забонҳои арабӣ, ибронӣ, форсӣ ё урду табиӣ ва зуд хоҳад буд - аз купон ва варақаҳои пардохт то мизҳои мусобиқа ва бозиҳои зинда.