RTL desteği
1) İlkeler
1. RTL bir metin çevirisi değil, bir düşünce yansımasıdır. Eksenler, okuma sırası, odak sırası, jestler ve navigasyon değişikliği.
2. Sol/sağ yerine mantıksal CSS özellikleri. 'Margin-inline-start', 'inset-inline-end', 'border-start-start-radius' vb. öğelerine gidin.
3. Küresel olarak yönü açın, yerel olarak LTR parçalarını izole edin. Numaralar, URL'ler, kodlar, e-posta ve IBAN her zaman soldan sağa doğru okunur.
4. Yöne bağlı olanı yansıtın, anlama değil. "Oynat", "↗", "↙'ve saat/işlem simgeleri yansıtmayabilir.
5. Pseudo-RTL'yi test edin. Çıkmadan önce'dir = 'rtl''/' direction: rtl've pseudo çevirileri ekleyin.
2) Yön: 'ir've boolean özellikleri
Belge/kök üzerinde küresel olarak: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 ve karışık metin yalıtımı
Arapça/İbranice ile Latince/sayıları karıştırmak karakter sırasını bozar. BiDi izolasyonu kullan:- Etiketler: '' (yönü izole eder), ' '(forces override).
- '\u2066 'LRI/'\u2067' RLI - LTR/RTL izolasyonunun başlangıcı,'\u2069 'PDI - sonu,
- '\u200E 'LRM/'\u200F' RLM - kısa ekler için tek baytlık belirteçler.
html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>4) Navigasyon, hiyerarşi ve düzenler
Ekmek kırıntıları: ayna düzeni: "
Paneller/menüler: ana navbar - sağda; "Geri" sola (RTL çizgisinin başına) işaret eder.
Kartlar/listeler: başlıkları satır içi başlatmaya hizalayın; Durum simgeleri - satır içi sonuna.
Karuseller ve kaydırmalar: satır içi başlangıca doğru kaydırma (RTL'de - sağa). Sayfa göstergeleri de yansıtılır.
Sayfalama: "sonraki" ok satır içi başlangıç, "önceki" - satır içi sonuna gider.
5) Simgeler ve görüntüler
Ayna yönlü simgeler: oklar, "ileri/geri", oynatma kafası, "genişlet/daralt".
Yansıtmayın: metin simgeleri, grafikler, saatler (gerçek zamanlı bir ok varsa), marka logoları.
css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }SVG için: 'transform-box: view-box;' kullan "Süzülmekten" kaçınmak için.
Resimlerin içindeki metinden kaçının - ayrı katmanlarda yerelleştirin.
6) Formlar ve giriş
İçerik hizalama: text-align: start; 'metin alanları, sayısal/miktarlar/URL/e-posta - LTR.
Nitelikler: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">Yer tutucu/etiket yerelleştirilir, ancak sayı/kodlardaki özen soldan sağa gitmelidir.
Maskeler: sert bir şekilde "kesmeyin" dikkat; Ekleme ve seçimi destekler.
Liste/radyo/onay kutusu: denetimlerin sağındaki imzalar, 44 ≥ 44 piksel × alanları tıklatın.
En fazla kaydırıcılar: RTL'de, en azından sağ kenarda, en fazla solda (veya ters çevirme ve LTR numaraları olmayan bir ölçek gösterin).
7) Sayılar, tarihler, para birimleri
Varsayılan olarak, Arapça yerel ayarlar Arapça-Hint-küreleri (٠١٢٣٤٥٦٧٨٩) kullanır. Çözüm - İş Politikası:- Finansal kullanıcı arayüzünde, Latince sayılar (0-9) daha çok birlikte çalışabilirlik uğruna gösterilir, ancak biçim (boşluklar/işaretler) yereldir.
js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());Göreceli zaman ('Intl. RelativeTimeFormat '), yönlü sınırlayıcılar ve yerel gün/ay kısaltmaları.
8) Tipografi ve okunabilirlik
İyi Arapça/İbranice grafeme ve bitişik harflere sahip yazı tipleri (Arapça şekillendirme).
Satır aralığı 1. 4–1. 6; Dar izlemeden kaçının.
Arapça için, genişlikte hizalarken kashida'ya (uzatma vuruşları) izin verilir - dikkatlice açın ('text-justify: inter-word; '/motor desteği).
Arapça çizgi içinde Latin italik yasaklayın (dikey ritmi bozar).
9) Grafikler, ölçekler ve tablolar
X eksenleri sağdan sola doğru gider; Efsane satır içi ile hizalanmıştır.
Tablo sütunları: "birincil" sütun (isim/oyun) - sağ; Sayılar/miktarlar LTR olarak kalabilir ve satır içi uca hizalanabilir.
html
<bdi dir="ltr">+12. 5%</bdi>10) A11y ve ekran okuyucuları
'Lang ='ar "'/' lang ='he"' harfinin açığa çıktığından emin olun: TTS motoru doğru ses performansını seçecektir.
Ses dinamiği dikkatlice yönde değişir - gereksiz yere parçalar üzerinde'dir "değiştirmeyin.
Canlı güncellemeler ('aria-live =' kibar '') - yönleri karıştırmadan metin.
Simgeler metin etiketleri olmadan anlam ifade etmez; 'aria-label' kullanın.
11) iGaming'in özellikleri
11. 1 Bahis kuponu (betslip)
Alan sırası: miktar ² oran ² potansiyel kazanç; Doğru imzalar, LTR numaraları/faktörleri.
Katsayıları nazikçe güncelleyin; Yukarı/aşağı okların yansıtılması gerekmez (fiyat yönünün anlamı evrenseldir).
11. 2 Maçlar/Marketler
Liglerin/etkinliklerin listesini satır içi başlangıç ile hizalayın (RTL'de - sağda).
Zamanlayıcılar ve sayım - LTR'dir = "ltr" 'tablo rakamlarıyla (' font-variant-numeric: tabular-nums; ').
11. 3 Ödemeler/ACC
IBAN/BIC/telefon alanları her zaman LTR'dir.
Banka adları/adres - RTL.
Hatalar/doğrulayıcılar sağdaki işaretleyicileri gösterir.
11. 4 Turnuvalar/liderlik tabloları
Sütunlar: pozisyon, takma ad, gözlük - sağdaki pozisyon; Gözlükleri satır içi sonuna (LTR rakamları) hizalayın.
12) Üretim ve test
Kızlık pseudo-RTL:css html. debug-rtl { direction: rtl; }css html:dir(rtl). icon-dir { transform: scaleX(-1); }- 'Dir = rtl'de mizanpaj anlık görüntüleri.
- CSS'de (tiftik)'sol/sağ'ın eksik olup olmadığını denetler.
- E2E: sekme sırası, atlıkarınca kaydırmaları, kaydırıcı davranışı.
- Arapça metin + LTR ekleri ile görsel testler (e-posta, toplam).
13) Tasarım sistemi belirteçleri (örnek)
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) Snippet'lar
Uygulamadaki yönü değiştirmek için (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) Antipatterns
Sert'sol/sağ '- stilleri RTL'yi bozar.
'Dir =' ltr 'olmadan numaralar/IBAN/URL girmek - "kırık" bakım ve sipariş.
Logoları/grafikleri/saatleri yansıtma.
Aynı simgeler kümesi her zaman aynalar - istisnasız olarak.
Karuseller, broşürler ve paginasyonlar baş aşağı değildir.
BiDi izolasyonu olmayan karışık dizeler - "dans eden" karakterler.
16) Metrikler
RTL kapsamı: RTL incelemesinden geçen ekranların oranı.
BiDi defects/release: karışık metin hatalarının sayısı.
Teslim süresi (LTR vs RTL):> %5-10 arasında farklılık göstermemelidir.
Sayı formlarında giriş hatası - yanlış bakım/maske ile olayların yüzdesi.
CLS/perf: "dir" geçtiğinde düzen sıçramıyor.
17) KG kontrol listesi
Yön ve düzen
- '' RTL yerelleri için; ': dir (rtl)' stilleri uygulanır.
- 'Sol/sağ' yerine Boole özellikleri.
- Navigasyon/bredkramby/carousels/pagination zerkalitsya doğru.
Metin ve BiDi
- Sayılar/para birimleri/URL/e-posta -'dir = "ltr" 'veya' '.
- Karışık dizelerde "ters" karakterler yok.
- 'Intl aracılığıyla yerelleştirilmiş tarihler/para birimleri. '.
Formlar
- Doğru etiketler; 44 ≥ 44 piksel × alanlara tıklayın.
- Telefon/IBAN/miktar - LTR caret, doğru maskeler.
- Kaydırıcılar/alçaklar/yüksekler beklendiği gibi davranır.
Simgeler/Görüntüler
- Sadece yönlü yansıtılır; İstisnalar karşılanır.
- Yerel sürümleri olmayan resimlerde metin yok.
А11у/Performance
- 'lang' maruz; SR doğru okur.
- 'Dir'i değiştirirken gereksiz yere yeniden çizmek yok.
- Kontrast/odak halkaları AA'ya karşılık gelir.
18) Tasarım sistemindeki belgeler
Yön ve BiDi bölümü: yansıtma ilkesi, simgeler için istisnalar listesi.
Bir dizi RTL belirteci ve bir stil linteri ('sol/sağ 'yasağı).
Do/Don't Gallery: karuseller, bredcrambs, sayı formları, kaydırıcılar, grafikler.
Pseudo-RTL komut dosyaları ve inceleme kontrol listeleri.
Kısa Özet
Uygun RTL desteği mantıksal CSS özellikleri, bilinçli yansıtma ve sıkı BiDi izolasyonudur. LTR'de sayıları/URL'leri izole edin, gezinmeyi ve yön simgelerini yansıtın, şekilleri öngörülebilir ve grafikleri okunabilir tutun. Arapça, İbranice, Farsça veya Urduca için arayüz doğal ve hızlı olacak - bir bahis kuponundan ve ödeme formlarından turnuva masalarına ve canlı maçlara kadar.