RTL qoʻllab-quvvatlash
1) Qonunning
1. RTL - bu matnning tarjimasi emas, balki fikrlash oynasi. Oʻqlar, oʻqish tartibi, fokus tartibi, imo-ishoralar va navigatsiya oʻzgaradi.
2. left/right oʻrniga mantiqiy CSS xususiyatlari. ’margin-inline-start’,’inset-inline-end’,’border-start-start-radius’va boshqalarga o’ting.
3. Biz butun dunyo bo’ylab LTR parchalarini izolyatsiya qilamiz. Sonlar, URL, kodlar, e-mail va IBAN har doim chapdan oʻngga oʻqiladi.
4. Maʼnoga emas, yoʻnalishga bogʻliq boʻlgan narsalarni aks ettiring. «Play», «↙» va soat/jarayon ikonalari aks ettirilmasligi mumkin.
5. Psevdo-RTL testini o’tkazing. Chiqishdan oldin’dir =’rtl’’/’ direction: rtl’va soxta tarjimalarni kiriting.
2) Yo’nalish: ’dir’va mantiqiy xossalari
Hujjat/ildizda global: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 va aralash matnni izolyatsiya qilish
Arab/ibroniycha lotin/sonlar bilan aralashishi belgilar tartibini buzadi. BiDi izolyatsiyasidan foydalaning:- Tags:’’(yo’nalishni izolyatsiya qiladi),’’(majburan qayta belgilaydi).
- ’\u2066’LRI/’\u2067’RLI - LTR/RTL izolatsiyasining boshlanishi, ’\u2069’PDI - oxiri,
- ’\u200E’LRM/\u200F’RLM - qisqa qo’shimchalar uchun bir baytli markerlar.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navigatsiya, ierarxiya va maketlar
Breadcrumbs: ko’zgu tartibi: «الصفحة الريسية الرهان التاكيد».
Panellar/menyu: asosiy navbar - oʻngda; «orqaga» chap tomonga (RTL satrining boshiga).
Kartochkalar/ro’yxatlar: sarlavhalarni inline-start bo’yicha tekislang; maqom ikonalari - inline-end.
Karusellar va svayplar: inline-start tomonga siljish (RTLda - o’ngga). Sahifa indikatorlari ham oynali.
Paginatsiya: «keyingi» o’qi inline-start, «oldingi» o’qi inline-end.
5) Ikonkalar va tasvirlar
Yo’naltirilgan piktogrammalarni aks ettiring: «oldinga/orqaga», «pley- boshi», «burish/burish».
Matnlar, grafiklar, soatlar, brendlarning logotiplarini aks ettirmang.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVG uchun:’transform-box: view-box;’dan foydalaning.
Rasmlar ichidagi matndan qoching → alohida qatlamlarda joylashtiring.
6) Shakllar va kirish
Kontent boʻyicha tekislash:’text-align: start;’, son/summa/URL/e-mail - LTR.
Atributlar: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 mahalliylashtirilgan, ammo caret sonlar/kodlarda chapdan oʻngga qarab yurishi kerak.
Niqoblar: qattiq «tutib qolmang»; qoʻyish va tanlashni qoʻllab-quvvatlang.
Ro’yxat/radio/chekbox: nazoratning o’ng tomonidagi imzolar, 44 × 44 px ≥ bosish zonasi.
Slayderlar min → max: RTLda minimal oʻng chekkada, maksimal chapda (yoki oʻlchamni inversiyasiz va LTR raqamlarini koʻrsating).
7) Sanalar, sanalar, valyutalar
Arab lokallarida andoza arab indotsifrlari (٠١٢٣٤٥٦٧٨٩) qoʻllaniladi. Yechim - biznes-siyosat:- Moliyaviy UIda ko’pincha interoperabellik uchun lotin raqamlari (0-9) ko’rsatiladi, lekin format (bo’shliqlar/belgilar) - lokal bo’yicha.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Nisbiy vaqt (’Intl. RelativeTimeFormat’).
8) Bosmaxona va o’qish qobiliyati
Yaxshi arab/yahudiy grafemasi va ligaturali shriftlar (Arabic shaping).
Satrlararo oraliq 1. 4–1. 6; tor trekinglardan qoching.
Arab tilida kashida (shtrixlarni uzaytirish) uchun kenglik bo’yicha tekislashda ehtiyotkorlik bilan yoqing (’text-justify: inter-word; ’/dvigatelni qo’llab-quvvatlash).
Arab satri ichidagi lotin yozuvini taqiqlang (vertikal ritmni buzadi).
9) Grafiklar, shkalalar va jadvallar
X o’qlari o’ngdan chapga; afsona inline-end boʻyicha tekislanadi.
Jadvallar ustuni: «birlamchi» ustun (nomi/o’yin) - o’ngda; raqamlar/summalar LTR bo’lib qolishi va inline-end bo’yicha tekislanishi mumkin.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y va skrinridyerlar
’lang =’ ar’’/’ lang =’he’qoʻyilganiga ishonch hosil qiling: TTS dvigateli toʻgʻri ovozni tanlaydi.
Yo’nalishdagi dinamik o’zgarishlarni ehtiyotkorlik bilan ayting - keraksiz bo’laklarda’dir’almashtirmang.
Hayot yangilanishlari (’aria-live = «polite»’) - yo’nalishlarni aralashtirmasdan matn.
Piktogrammalar matn belgilarisiz ma’no bermaydi; ’aria-label’ dan foydalaning.
11) iGaming xususiyatlari
11. 1 Kupon stavkasi (betslip)
Maydon tartibi: summa → koeffitsiyent → potentsial yutuq; o’ngdagi imzolar, raqamlar/LTR koeffitsiyentlari.
Koeffitsiyentlar yangilanishini yumshoq belgilang; yuqoriga/pastga ko’rsatkichlarni ko’rsatishning hojati yo’q (narx yo’nalishining ma’nosi universal).
11. 2 O’yinlar/bozorlar
Ligalar/voqealar ro’yxatini inline-start bo’yicha tekislang (RTLda - o’ngda).
Taymerlar va hisob - LTR’dir = «ltr»’jadval raqamlari bilan (’font-variant-numeric: tabular-nums;’).
11. 3 To’lovlar/KTS
IBAN/BIC/telefon doimo LTR.
Bank nomlari/manzili - RTL.
Xatolar/validatorlar oʻngdagi markerlarni koʻrsatadi.
11. 4 Turnir/peshqadamlar
Ustunlar: pozitsiya, nik, ko’zoynak - o’ngdagi pozitsiya; ko’zoynaklaringizni inline-end bo’yicha tekislang (LTR raqamlari).
12) Ishlab chiqarish va test sinovlari
Qizdagi psevdo-RTL:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Maket snapshotlari’dir = rtl’.
- CSS (lint) da’left/right’mavjud emasligini tekshirish.
- E2E: tabulyatsiya tartibi, karusel svayplari, slayderlarning xulq-atvori.
- Arab matnli vizual testlar + LTR-qo’shimchalar (e-mail, summa).
13) Dizayn-tizim tokenlari (misol)
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) Snippetlar
Dasturdagi yoʻnalishni oʻzgartirish (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) Antipatternlar
Qattiq’left/right’uslublarida → RTL buziladi.
Sonlarni kiritish/IBAN/URL’siz’dir = «ltr»’→ «singan» caret va tartib.
Logotiplar/grafiklar/soatlarni oynalash.
Bir xil piktogrammalar to’plami har doim aks ettiriladi - ma’noda istisnosiz.
Karusellar, listalkalar va paginatsiyalar ag’darilmagan.
BiDi izolyasiyasiz aralash satrlar → «raqs» belgilari.
16) Metrika
RTL coverage: RTL revyudan oʻtgan ekranlar ulushi.
BiDi-nuqsonlar/reliz: aralash matn xatolari soni.
Asosiy vazifalarni bajarish vaqti (LTR vs RTL):> 5-10% farq qilmasligi kerak.
Raqamlar shakliga kiritishda xato roʻy berdi: notoʻgʻri caret/niqobli hodisalar ulushi.
CLS/perf:’dir’-oʻchirilganda maket sakrashsiz.
17) QA-chek-varaq
Yo’nalish va maket
- ’’RTL lokallari uchun;’: dir (rtl)’uslublari qoʻllanilmoqda.
- ’left/right’oʻrniga mantiqiy xususiyatlar.
- Navigatsiya/bredkramplar/karusellar/paginatsiya to’g’ri aks ettiriladi.
Matn va BiDi
- Raqamlar/valyutalar/URL/e-mail -’dir = «ltr»’yoki’’.
- Aralash satrlarda «teskari» belgilar yoʻq.
- ’Intl.’orqali sanalar/valyutalar mahalliylashtirilgan.
Shakllar
- Imzolar o’ngda; 44 ≥ 44 px × bosish zonalari.
- Telefon/IBAN/summasi - LTR caret, to’g "ri niqoblar.
- Slayderlar/minimumlar/maksimumlar o’zlarini kutilgan tarzda tutadilar.
Ikonkalar/Tasvirlar
- Faqat yoʻnaltirilganlar koʻzgu qilurlar. istisnolarga rioya qilingan.
- Rasmlarda mahalliy versiyasiz matn yoʻq.
A11u/Spektakl
- ’lang’qo’yilgan; SR toʻgʻri oʻqiydi.
- ’dir’almashtirilganda ortiqcha qayta chizish yoʻq.
- Kontrast/fokus halqa AA ga mos keladi.
18) Dizayn-tizimdagi hujjatlar
Direction & BiDi boʻlimi: oynalar siyosati, ikonkalar uchun istisnolar roʻyxati.
RTL tokenlari va linter uslublari toʻplami (taqiqlangan’left/right’).
Do/Don’t galereyasi: karusellar, bredkramblar, son shakllari, slaydlar, grafiklar.
Psevdo-RTL skriptlari va revyu chek varaqlari.
Qisqacha xulosa
To’g’ri RTL qo’llab-quvvatlash - bu mantiqiy CSS xususiyatlari, ongli ko’zgu va qat’iy BiDi izolyatsiyasi. LTR’dagi URL/sonlarni izolyatsiya qiling, ko’zgu navigatsiyasi va yo’naltirilgan piktogrammalarni izolyatsiya qiling, shakllarni oldindan aytib bo’ladigan, grafiklarni esa o’qish mumkin. Shunday qilib, arab, ivrit, fors yoki urdu uchun interfeys tabiiy va tez bo’ladi - kupon stavkalari va to’lov shakllaridan tortib turnir jadvallari va live-o’yinlargacha.