Patterns · i18n · RTL
i18n & RTL
TR-tabanlı sipariş yönetimi v2'de Arapça (Suudi/MENA franchise), Almanca (DE/AT döneri), İngilizce (uluslararası operasyon) hedefleniyor. Kuruluş günden itibaren logical CSS properties, Intl API, locale-aware copy.
01 · LTR ↔ RTL · sipariş kartı
LTR · Türkçedir="ltr"
MÖ
Mehmet Özkan
Sipariş #1247 · 2 dk önce
2× Köfte Pide89,00 ₺
1× Ayran15,00 ₺
Toplam112,05 ₺
RTL · العربيةdir="rtl"
مع
محمد أوزكان
طلب رقم ١٢٤٧ · قبل دقيقتين
كفتة بيدا × ٢٨٩٫٠٠ ر.س
عيران × ١١٥٫٠٠ ر.س
المجموع١١٢٫٠٥ ر.س
/* RTL-safe CSS · logical properties zorunlu */
.btn { padding-inline: 14px; padding-block: 8px; } /* ❌ padding-left: 14px */
.icon { margin-inline-end: 8px; } /* ❌ margin-right: 8px */
.card { border-inline-start: 3px solid var(--primary); }
.list li { padding-inline-start: 24px; } /* bullet space */
.toast { inset-inline-end: 16px; inset-block-start: 16px; }
.chevron { transform: scaleX(var(--dir-x, 1)); } /* RTL'de -1 ile mirror */
[dir="rtl"]{ --dir-x: -1; }
02 · Locale-aware sayı, para, tarih · Intl API
| Tür | Locale | Çıktı | Kod |
|---|
| Para | tr-TR | 1.250,75 ₺ | Intl.NumberFormat('tr-TR', { style:'currency', currency:'TRY' }) |
| Para | de-DE | 1.250,75 € | Intl.NumberFormat('de-DE', { style:'currency', currency:'EUR' }) |
| Para | en-US | $1,250.75 | Intl.NumberFormat('en-US', { style:'currency', currency:'USD' }) |
| Para | ar-SA | ١٬٢٥٠٫٧٥ ر.س. | Intl.NumberFormat('ar-SA', { style:'currency', currency:'SAR' }) |
| Tarih | tr-TR | 14 May 2024 14:32 | Intl.DateTimeFormat('tr-TR', { dateStyle:'medium', timeStyle:'short' }) |
| Tarih | en-US | May 14, 2024, 2:32 PM | Intl.DateTimeFormat('en-US', { dateStyle:'medium', timeStyle:'short' }) |
| Göreceli | tr-TR | 2 dakika önce | Intl.RelativeTimeFormat('tr-TR').format(-2, 'minute') |
| Göreceli | de-DE | vor 2 Minuten | Intl.RelativeTimeFormat('de-DE').format(-2, 'minute') |
| Çoğul | tr-TR | 3 sipariş (plural=other, eklenmez) | Intl.PluralRules('tr-TR').select(3) → "other" |
| Çoğul | en-US | 3 orders | Intl.PluralRules('en-US').select(3) → "other" |
03 · Türkçe lokalizasyon kuralları (sık hatalar)
| Konu | Yanlış | Doğru |
|---|
| Kapitalizasyon | Yeni Sipariş Oluştur (TitleCase) | Yeni sipariş oluştur (sentence case) |
| Tarih sırası | 05/14/2024 (US) | 14/05/2024 ya da 14 May 2024 |
| Ondalık | 112.05 ₺ (US notasyonu) | 112,05 ₺ (virgül ondalık, nokta binlik) |
| Para sembolü | ₺125 (önde) | 125 ₺ (sonda, NBSP ile) |
| Saat | 2:32 PM | 14:32 (24 saat) |
| Çoğul | 3 siparişler | 3 sipariş (TR'de sayıdan sonra çoğul eki yok) |
| Buyurgan ton | Tıklayınız! | Tıkla / Devam et (samimi, ünlemsiz) |
| Türkçe karakter | Siparis · #1247 | Sipariş · #1247 (ş, ç, ğ, ı, İ, ö, ü zorunlu) |
| Boşluk & sayı | 15₺ (yapışık) | 15 ₺ (NBSP) |
Kurallar
· Asla left/right/margin-left/padding-right yazma — hep start/end + inline/block. RTL'de bedava döner.
· İkonlar genelde mirror'lanır (chevron, arrow, undo). İçerik-bağımsız (kalp, çöp kutusu, kullanıcı) mirror'lanmaz.
· Sayı/para/tarih asla string concatenation ile değil Intl.* ile. "$" + amount yazan yere kod review'da geri dön.
· Mixed dir: RTL satır içinde TR isim ya da Latin marka adı (nexberry) bidi-control gerektirir; <bdi> tag'i ile sarmala.
· Çoğul: Intl.PluralRules + ICU MessageFormat. TR'de plural-suffix yok; AR'da 6 plural form var (zero/one/two/few/many/other).
· Logical layout: drawer her zaman inset-inline-end:0 (RTL'de otomatik solda açılır), tooltip arrow logical position'la.
· Erişilebilirlik: <html lang dir> doğru atomik dil; karışık metinde lang="ar" attribute'u ekran okuyucu seçimi için kritik.
· Yasak: kod içinde hard-coded "TL", "Bugün", "08:00"; hep token + Intl. Çeviri tablolarında "string interpolation" + sayı (plural'i bozar).