RTL Arapça Menü UX: Mirror Layout, Numerik Yön ve Fiyat Etiketleri

Dubai City Walk'taki bir Türk lokantası geçen ay Arapça menüsünü yayına aldı. İlk şikayet hemen geldi: "Adana Kebap 45 AED" satırı ekrana "AED 45 پاپک هنادآ" gibi düşüyordu. Sorun çeviri değil, RTL içinde gömülü Latin sayıların yönetimiydi. Bu rehber, mirror layout, fiyat etiketi yönü ve çok satırlı Arapça açıklamada line-clamp davranışını gerçek örneklerle anlatır.

Mirror layout ve fiyat yönü

HTML kökünde dir="rtl" set edilince Flex/Grid otomatik aynalanır. Ürün adı sağda, fiyat solda görünür — bu Arapça menü tüketicisinin beklentisidir. Ancak fiyat metni "45 AED" gibi Latin karakter içeriyorsa Unicode BiDi algoritması varsayılan olarak doğru çalışır: sayı LTR, çevresi RTL kalır.

Sorun ürün açıklaması içinde "5 dakikada hazırlanır" gibi karışık ifadelerde başlar. Burada "5" Latin rakamı, "dakikada" Arap harfi olduğunda satır sonunda kırılma yön sırasını bozar. Çözüm açıklama elementine unicode-bidi: plaintext uygulamaktır — her paragrafı kendi yönü içinde tutar.

Line-clamp ve çok satırlı kırılma

Müşteri menüsünde açıklamayı genelde 2-3 satıra kısıtlarız (line-clamp: 3). Latin metinde sorun yok, Arapça'da ise son satır ortadan kaybolur veya rakam sondan başa atılır. Çünkü line-clamp önce kırpar, sonra BiDi reordering tetiklenir.

thMenu kart bileşeninde Arapça locale'de tanımlı CSS şu kuralı içerir:

• unicode-bidi: plaintext — her satırı kendi yönü içinde tutar
• text-align: start — locale'e göre otomatik sağ/sol
• word-break: normal — Arapça ligatürleri bozmaz

Numerik yön ve para birimi etiketleri

Müşteri "AED 45" mi "45 AED" mi görmeli? Suudi pazarında "45 ر.س" (riyal sembolü), BAE'de "AED 45" yaygındır. Locale dosyasında para birimi konumu currency.position alanıyla yönetilir — "before" veya "after".

Arap-Hint rakamları (٠١٢٣٤٥٦٧٨٩) çoğunlukla yaşlı kuşak için tercih edilir ama Körfez'de Latin rakamı (0123456789) artık standarttır. thMenu Intl.NumberFormat ile numberingSystem: "latn" default kullanır, Mısır pazarı için "arab" override edilebilir.

FAQ

Tüm sayfaya dir="rtl" yetmiyor mu? Yetmez. Kart içi karışık metin için bileşen seviyesinde unicode-bidi: plaintext gerekir.

Arap-Hint rakamı şart mı? Hayır. Körfez şehirlerinde Latin rakam yaygın; sadece Mısır/Levant pazarları için locale override yeterli.

Logo veya ikon aynalanır mı? Marka logoları HAYIR. Yön bildiren ikonlar (ok, çizgi) EVET — transform: scaleX(-1) ile veya RTL-aware ikon seti ile.

Faydalı buldunuz mu? Paylaşın.