RTL goldawy
1) Ýörelgeler
1. RTL tekstiň terjimesi däl, pikirlenişiň aýnasydyr. Oklar, okamagyň tertibi, fokusyň tertibi, yşaratlar we nawigasiýa üýtgeýär.
2. left/right ýerine logiki CSS häsiýetleri. 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius' we ş.m.
3. Global ugry açýarys, LTR böleklerini lokallaşdyrýarys. Sanlar, URL-ler, kodlar, e-poçta we IBAN elmydama çep-sag okalýar.
4. Manysyna däl-de, ugruna bagly zady aýnalaň. "Çal", "↙", "çal" we sagat/proses nyşanlary aýna bolup bilmez.
5. Pseudo-RTL synagy. 'dir =' rtl ''/' direction: rtl' -ni açyň.
2) Ugry: 'dir' we logiki häsiýetleri
Resminamada/kökde 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 we garyşyk tekstiň izolýasiýasy
Arap/iwrit/latyn/san bilen garyşmagy nyşanlaryň tertibini bozýar. BiDi izolýasiýasyny ulanyň:- Bellikler: '' (ugruny izolýasiýa edýär), ' '(zordan üýtgedýär).
- '\u2066 'LRI/'\u2067' RLI - LTR/RTL izolýasiýasynyň başlangyjy, '\u2069 'PDI - ahyry,
- '\u200E 'LRM/'\u200F' RLM - gysga goýmalar üçin bir bitli bellikler.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Nawigasiýa, iýerarhiýa we maketler
Breadcrumbs: aýna tertibi: "الصفحة الريسية الرهان التاكيد".
Paneller/menýular: esasy navbar - sag; "Yza" çepe (RTL setiriniň başyna).
Kartoçkalar/sanawlar: inline-start boýunça sözbaşylary tekizläň; status nyşanlary - inline-end.
Karuseller we swaýplar: inline-start tarapa aýlanmak (RTL-de - sag tarapa). Sahypalaryň görkezijileri hem aýna.
Paginasiýa: "indiki" oky inline-start, "öňki" oky inline-end.
5) Nyşanlar we şekiller
Ugrukdyrylan piktogrammalary aýnalaň: oklar, "öňe/yza", pleý-kellesi, "açmak/yzyna öwürmek".
Aýna görkezmäň: tekst nyşanlary, grafikler, sagatlar (hakyky wagt oky bar bolsa), marka nyşanlary.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVG üçin: 'transform-box: view-box;' üçin "ýüzmezlik" üçin ulanyň.
Şekilleriň içindäki tekstden gaça duruň → Aýry-aýry gatlaklarda lokallaşdyryň.
6) Görnüşler we giriş
Mazmuny deňlemek: 'text-align: start;', san/mukdar/URL/e-mail - LTR.
Häsiýetleri: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 lokallaşdyryldy, ýöne sanlarda/kodlarda caret soldan saga gitmeli.
Maskalar: caret gaty "tutmaň"; goýmagy we saýlamagy goldaýar.
Sanaw/radio/çekbox: gözegçilikleriň sag tarapyndaky gollar, basmagyň zolagy ≥ 44 × 44 px.
Slaýdlar min → max: RTL-de iň az sag gyrada, iň köp çep gyrada (ýa-da tersine we LTR sanlary bolmazdan şkalany görkeziň).
7) Sanlar, seneler, walýutalar
Arap lokallarynda arap indosifrleri (٠١٢٣٤٥٦٧٨٩) ulanylýar. Çözgüt - işewürlik syýasaty:- Maliýe UI-de köplenç latyn sanlary (0-9) interoperability üçin görkezilýär, ýöne format (boşluklar/alamatlar) - lokal.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Wagt ('Intl. RelativeTimeFormat '), gün/aýyň gönükdirilen bölüjileri we ýerli gysgaldylmagy.
8) Çaphanasy we okalmagy
Gowy arap/ýewreý grafemasy we ligaturalary bolan şriftler (Arabic shaping).
Hatara aralyk 1. 4–1. 6; dar yzarlamalardan gaça duruň.
Arap dilinde kaşida (çyzgylaryň uzalmagy) üçin, ini boýunça tekizlenende - seresaplylyk bilen açyň ('text-justify: inter-word; '/hereketlendirijini goldamak).
Arap setiriniň içindäki latyn elipbiýini gadagan ediň (dik ritmi bozýar).
9) Grafikler, şkalalar we tablisalar
X oklary sagdan çepe gidýär; rowaýat inline-end boýunça deňleşýär.
Tablisalaryň sütünleri: "başlangyç" sütün (ady/oýny) - sag tarapda; nomerler/summalar LTR bolup biler we inline-end boýunça deňleşip biler.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y we skrinriderler
'lang =' ar ''/' lang =' he 'goýlandygyna göz ýetiriň: TTS hereketlendirijisi dogry sesi saýlar.
Ugruň dinamiki üýtgemelerini seresaplylyk bilen aýdyň - zerur bolmadyk böleklerde 'dir' geçmäň.
Durmuş täzelenmeleri ('aria-live = "polite"') - ugrukdyrylman tekst.
Nyşanlar tekst bellikleri bolmazdan many bermeýär; 'aria-label' ulanyň.
11) iGaming aýratynlyklary
11. 1 Nyrh kupony (betslip)
Meýdanlaryň tertibi: jemi → koeffisiýent → potensial ýeňiş; sag tarapdaky gollar, sanlar/LTR koeffisiýentleri.
Koeffisiýentleriňizi ýumşak görkeziň; "ýokary/aşak" oklary aýna gerek däl (bahanyň ugrunyň manysy ähliumumy).
11. 2 Oýunlar/bazarlar
Ligalaryň/wakalaryň sanawyny inline-start boýunça düzüň (RTL-de - sagda).
Taýmerler we hasap - LTR 'dir = "ltr"' tably sanlar bilen ('font-variant-numeric: tabular-nums;').
11. 3 Tölegler/KUS
IBAN/BIC/telefon meýdanlary elmydama LTR.
Bank atlary/salgysy - RTL.
Ýalňyşlyklar/tassyklaýjylar sag tarapdaky bellikleri görkezýär.
11. 4 Ýaryşlar/Liderbordlar
Sütünler: pozisiýa, nik, äýnek - sag tarapdaky pozisiýa; äýnekleri inline-end (LTR sanlary) boýunça deňläň.
12) Önümçilik we synag
Pseudo-RTL:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Ýerleşiş snapshotlary 'dir = rtl'.
- CSS (lint) -de 'left/right' ýok.
- E2E: tabulýasiýa tertibi, karuseliň swipleri, slaýdlaryň özüni alyp barşy.
- Arap teksti + LTR-goşmalar bilen wizual synaglar (e-mail, jemi).
13) Dizaýn-ulgamyň bellikleri (mysal)
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) Snippetler
Programmada ugruny üýtgetmek (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) Antipatternler
Gaty 'left/right' stillerinde → RTL bozulýar.
Sanlaryň girişi/IBAN/URL 'dir = "ltr"' → "döwülen" caret we tertip.
Nyşanlary/grafikleri/sagatlary aýnalamak.
Nyşanlaryň birmeňzeş toplumy hemişe aýna bolýar - manysy boýunça kadadan çykma ýok.
Karuseller, ýapraklar we paginasiýalar agdarylmaýar.
BiDi izolýasiýasyz garyşyk setirler → "tans edýän" nyşanlar.
16) Metrikler
RTL coverage: RTL-rewýudan geçen ekranlaryň paýy.
BiDi-kemçilikler/goýberiş: garyşyk tekst hatalarynyň sany.
Esasy işleri ýerine ýetirmek wagty (LTR vs RTL): tapawutlanmaly däldir> 5-10%.
Sanlaryň şekillerine girilmedi: nädogry caret/maska bilen wakalaryň paýy.
CLS/perf: 'dir' -açylanda maket böküşsiz.
17) QA-çek-sanawy
Ugrukdyryş we ýerleşiş
- '' RTL lokallary üçin; ': dir (rtl)' stilleri ulanylýar.
- 'left/right' ýerine logiki häsiýetler.
- Nawigasiýa/bredkramblar/karuseller/paginasiýa dogry aýna bilen görkezilýär.
Teksti we BiDi
- /Walýuta/URL/e-mail - 'dir = "ltr"' ýa-da ''.
- Garyşyk setirlerde "tersine" nyşanlar ýok.
- "Intl." arkaly seneler/walýutalar lokallaşdyryldy.
Formalar
- Sag tarapdaky gollar; basmagyň zolaklary ≥ 44 × 44 px.
- Telefon/IBAN/jemi - LTR caret, dogry maskalar.
- Slaýdlar/minimumlar/maksimumlar garaşylyşy ýaly hereket edýärler.
Nyşanlar/Şekiller
- Diňe ugrukdyrylanlar aýna; kadadan çykmalar berjaý edildi.
- Suratlarda ýerli wersiýalar ýok.
A11u/Çykyş
- 'lang' goýuldy; SR dogry okaýar.
- 'dir' çalşylanda artykmaç suratlar ýok.
- Kontrast/fokus halkasy AA-a laýyk gelýär.
18) Dizaýn-ulgamdaky resminamalar
Direction & BiDi bölümi: aýna syýasaty, nyşanlar üçin kadadan çykmalar sanawy.
RTL bellikleri we stil linteri ('left/right' gadaganlygy).
Galereýa Do/Don 't: karuseller, bredkramblar, san görnüşleri, slaýdlar, grafikler.
Pseudo-RTL skriptleri we çek sahypalary.
Gysgaça gysgaça
Dogry RTL goldawy logiki CSS häsiýetleri, aňly aýna we berk BiDi izolýasiýasy. LTR-daky sanlary/URL-leri, aýnany nawigasiýany we ugrukdyrylan nyşanlary izolýasiýa ediň, şekilleri öňünden aýdyp boljak we grafikleri okap boljak ýagdaýda saklaň. Şeýlelik bilen arap, ýewreý, fars ýa-da urdu dilleri üçin interfeýs tebigy we çalt bolar - stawka kuponyndan we töleg görnüşlerinden başlap, ýaryşlaryň we göni oýunlaryň tablisalaryna çenli.