RTL dəstəyi
1) Prinsiplər
1. RTL mətnin tərcüməsi deyil, düşüncə güzgüsüdür. Oxlar, oxu sırası, fokus sırası, jestlər və naviqasiya dəyişir.
2. left/right əvəzinə məntiqi CSS xüsusiyyətləri. 'margin-inline-start', 'inset-inline-end', 'border-start-start-radius' və s.
3. Qlobal olaraq istiqaməti açırıq, LTR fraqmentlərini lokallaşdırırıq. Ədədlər, URL, kodlar, e-mail və IBAN həmişə soldan sağa oxunur.
4. Mənadan deyil, istiqamətdən asılı olanı əks etdirin. «Play», «↙» və saat/proses nişanları güzgü ola bilməz.
5. Psevdo-RTL test edin. 'dir =' rtl ''/' direction: rtl' və çıxış əvvəl pseudo tərcüməçiləri daxil edin.
2) istiqamət: 'dir' və məntiqi xüsusiyyətləri
Sənəd/kökündə qlobal: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 və qarışıq mətn izolyasiyası
Ərəb/ivrit və latın/ədədlərin qarışması simvolların sırasını pozur. BiDi izolyasiya istifadə edin:- Tags: '' (istiqaməti təcrid edir), ' '(zorla yenidən təyin edir).
- '\u2066 'LRI/'\u2067' RLI - LTR/RTL izolyasiyasının başlanğıcı, '\u2069 'PDI - son,
- \ u200E 'LRM/\u200F' RLM - qısa əlavələr üçün bir bitli markerlərdir.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Naviqasiya, iyerarxiya və maketlər
Breadcrumbs: güzgü qaydası: «الصفحة الريسية الرهان التاكيد».
Panellər/menyu: əsas navbar - sağda; «geri» sola işarə edir (RTL xəttinin əvvəlinə).
Kartlar/siyahılar: başlıqları inline-start ilə bərabərləşdirin; status nişanları - inline-end.
Karusellər və sıçrayışlar: inline-start tərəfə (RTL-də - sağa). Səhifə göstəriciləri də güzgüdür.
Pagination: «next» oxu inline-start, «əvvəlki» - inline-end.
5) Simvollar və şəkillər
Yönlü piktoqramları əks etdirin: oxlar, «irəli/geri», play-head, «açmaq/çevirmək».
Əks etdirməyin: mətn, qrafik, saat nişanları (real vaxt oxu varsa), marka loqotipləri.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVG üçün: 'transform-box: view-box;' istifadə edin ki, «üzməyin».
Şəkillərin içindəki mətndən çəkinin → ayrı-ayrı qatlarla lokallaşdırın.
6) Formalar və giriş
Məzmun üzrə bərabərləşdirmə: 'text-align: start;' mətn sahələri, ədədi/məbləğ/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 lokallaşdırılmışdır, lakin ədədlərdə/kodlarda caret soldan sağa getməlidir.
Maskalar: caret sərt «tutmayın»; əlavə və seçimi dəstəkləyin.
Siyahı/radio/çekbox: sağ tərəfdəki imzalar, klik zonası ≥ 44 × 44 px.
min → max sürgüləri: RTL-də sağ kənarda minimum, sol tərəfdə maksimum (və ya tərs və LTR rəqəmlərini göstərin).
7) Rəqəmlər, tarixlər, valyutalar
Default olaraq ərəb lokallarında ərəb indosifraları (٠١٢٣٤٥٦٧٨٩) istifadə olunur. Həll - biznes siyasəti:- Maliyyə UI daha çox latın rəqəmləri (0-9) interoperability üçün göstərilir, lakin format (boşluqlar/işarələr) yerli olaraq.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Nisbi vaxt ('Intl. RelativeTimeFormat '), gün/ay istiqamətləndirilmiş ayırıcılar və yerli ixtisarlar.
8) Mətbəə və oxunuş
Yaxşı ərəb/yəhudi qrafeması və liqaturaları olan şriftlər (Arabic shaping).
Sətirlərarası interval 1. 4–1. 6; dar izləmələrdən çəkinin.
Ərəbcə kashida (ştrixlərin uzadılması) üçün eninə hizalamada - diqqətlə açın ('text-justify: inter-word; '/mühərrik dəstəyi).
Ərəb sətri daxilində latın qrafikası kursivini qadağan edin (şaquli ritmi korlayır).
9) Qrafiklər, şkalalar və cədvəllər
X oxları sağdan sola doğru gedir; əfsanə inline-end üzrə bərabərləşir.
Cədvəllərin sütunları: «birincil» sütun (ad/oyun) - sağda; Nömrələr/məbləğlər LTR olaraq qala bilər və inline-end üzrə bərabərləşə bilər.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y və ekranlar
'lang =' ar ''/' lang =' he '' -nin təqdim olunduğundan əmin olun: TTS mühərriki düzgün səslənməni seçəcək.
Dinamik istiqamət dəyişikliklərini diqqətlə səsləndirin - zərurət olmadan parçalarda 'dir' keçməyin.
Canlı yeniləmələr ('aria-live = «polite»') - istiqamətləri qarışdırmadan mətn.
Nişanlar mətn işarələri olmadan məna vermir; 'aria-label' istifadə edin.
11) iGaming xüsusiyyətləri
11. 1 Kupon bahis (betslip)
Sahə sırası: məbləğ → əmsal → potensial uduşlar; sağdakı imzalar, rəqəmlər/LTR əmsalları.
Yeniləmə əmsalları yumşaq işıqlandırın; «yuxarı/aşağı» oxları güzgü lazım deyil (qiymət istiqamətinin mənası universaldır).
11. 2 Matçlar/Bazarlar
Liqaların/hadisələrin siyahısını inline-start ilə (RTL-də - sağda) bərabərləşdirin.
Taymerlər və hesab - LTR 'dir = «ltr»' cədvəl rəqəmləri ilə ('font-variant-numeric: tabular-nums;').
11. 3 Ödənişlər/KUS
IBAN/BIC/telefon sahələri həmişə LTR.
Bank adları/ünvanı - RTL.
Səhvlər/validatorlar sağdakı markerləri göstərir.
11. 4 Turnirlər/Liderbordlar
Sütunlar: mövqe, nik, eynək - sağ mövqe; eynək inline-end (LTR rəqəmləri).
12) İstehsal və sınaq
qız Psevdo-RTL:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- Mizanpaj snapshotları 'dir = rtl'.
- CSS-də 'left/right' yoxluğunu yoxlayın.
- E2E: tabulyasiya qaydası, atlı karusellər, sürgülərin davranışı.
- Ərəb mətni + LTR əlavələri ilə vizual testlər (e-mail, məbləğ).
13) Dizayn sistemi tokenləri (nümunə)
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) Snippetlər
Tətbiqdə istiqaməti dəyişdirin (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) Antipattern
Sərt 'left/right' stillərində → RTL qırılır.
Rəqəmlərin daxil edilməsi/IBAN/URL 'dir = «ltr»' → «sınıq» caret və sifariş.
Loqotiplərin/qrafiklərin/saatların güzgüsü.
Eyni nişanlar dəsti həmişə güzgüdür - məna baxımından istisnasız.
Karusellər, yarpaqlar və paginasiyalar tərs deyil.
BiDi izolyasiyasız qarışıq sətirlər → «rəqs» simvolları.
16) Metrika
RTL coverage: RTL review keçmiş ekranların payı.
BiDi qüsurları/release: qarışıq mətn baqlarının sayı.
Əsas tapşırıqların yerinə yetirilməsi vaxtı (LTR vs RTL):> 5-10% fərqlənməlidir.
Rəqəmlərin formalarına daxil edilmə səhvi: səhv caret/maska ilə hadisələrin payı.
CLS/perf: 'dir' -açma zamanı maket sıçrayışı olmadan.
17) QA-çek siyahısı
Istiqamət və maket
- '' RTL lokalları üçün; ': dir (rtl)' stilləri tətbiq olunur.
- Əvəzinə məntiqi xüsusiyyətləri 'left/right'.
- Naviqasiya/Bradcramb/Carousels/Pagination düzgün güzgü.
Mətn və BiDi
- Ədədlər/Valyuta/URL/E-mail - 'dir = «ltr»' və ya ''.
- Qarışıq sətirlərdə heç bir «tərs» simvol yoxdur.
- 'Intl.' Vasitəsilə tarixlər/valyutalar lokallaşdırılmışdır.
Formalar
- Sağdakı imzalar; click zonaları ≥ 44 × 44 px.
- Telefon/IBAN/məbləğ - LTR caret, düzgün maskalar.
- Sürgülər/minimumlar/maksimumlar gözlənilən davranır.
Nişanlar/Şəkillər
- Yalnız yönləndirilmiş güzgü; istisnalar müşahidə olunur.
- Yerli versiyası olmayan şəkillərdə mətn yoxdur.
A11u/Performans
- 'lang' posted; SR düzgün oxuyur.
- 'dir' dəyişdikdə lazımsız yenidən çəkilmə yoxdur.
- Kontrast/Focus Ring AA uyğun gəlir.
18) Dizayn sistemində sənədləşmə
Direction & BiDi bölməsi: güzgü siyasəti, nişanlar üçün istisnalar siyahısı.
RTL tokenləri və linter stilləri (qadağan 'left/right').
Do/Don 't qalereyası: karusellər, bradkramplar, ədədlərin formaları, slaydlar, qrafiklər.
Psevdo-RTL skriptləri və review çek vərəqləri.
Qısa xülasə
Düzgün RTL dəstəyi məntiqi CSS xüsusiyyətləri, şüurlu güzgü və ciddi BiDi izolyasiyasıdır. LTR-də sayları/URL-ləri təcrid edin, güzgü naviqasiyası və yönlü nişanlar, formaları proqnozlaşdırıla bilən, qrafikləri isə oxunaqlı saxlayın. Beləliklə, ərəb, ivrit, fars və ya urdu üçün interfeys təbii və sürətli olacaq - kupon dərəcələri və ödəniş formaları turnir cədvəlləri və canlı matçlar.