Dünya genelinde milyonlarca insan tarafından Arapça, İbranice, Farsça ve Urduca gibi RTL dilleri kullanılmaktadır. Bu kullanıcıların web deneyimini optimize etmek, yalnızca erişilebilirlik açısından değil, iş geliştirme ve kullanıcı sadakati açısından da kritik öneme sahiptir.

RTL Desteği Neden Bu Kadar Önemli?

Pazar Potansiyeli

Orta Doğu e-ticaret pazarı sürekli büyümektedir. RTL dil kullanıcıları, kendi dillerinde ve kültürlerine uygun tasarlanmış web sitelerinde daha rahat alışveriş yapmaktadırlar.

Kullanıcı Deneyimi Etkileri

RTL desteği olmayan siteler kullanıcılarda şu olumsuz izlenimleri yaratabilir:

• Güvensizlik hissi: Checkout butonunun sol tarafta olması, sağdan sola okuyan kullanıcılarda sürecin tamamlanmadığı izlenimini verir.

• Karmaşıklık algısı: Breadcrumb navigasyonunun tersten görünmesi, kullanıcının sitede kaybolmasına neden olur.

• Profesyonellik eksikliği: Detayları gözetmeyen marka imajı oluşur ve güven kaybına yol açar.

• Erişilebilirlik sorunları: Özellikle yaşlı kullanıcılar için navigasyon zorlaşır.

LTR ve RTL Arasındaki Temel Farklar

Çoğu web arayüzü soldan sağa (LTR) diller için tasarlanır. Ancak RTL dillerde aşağıdaki farklılıkları göz önünde bulundurmanız gerekir:

1. Yazı Yönü

• LTR: Metin soldan sağa akar.

• RTL: Metin sağdan sola akar.

Karışık İçerik Yönetimi:

<!-- Yanlış yaklaşım -->

<p>البريد الإلكتروني: contact@example.com</p>

<!-- Doğru yaklaşım -->

<p dir="rtl"> البريد الإلكتروني: <span dir="ltr">contact@example.com</span> </p>

<!-- Daha gelişmiş yaklaşım -->

<p dir="rtl"> البريد الإلكتروني: <bdi>contact@example.com</bdi> </p>

2. UI Yerleşimi

Arayüzdeki simgeler ve yerleşimler de yön değiştirmelidir:

• Menü ikonları (hamburger, geri butonu) sağa yerleşir.

• Kart yapıları ve grid düzenleri tersine döner.

• Diyalog kutularında “kapat” butonu sağ üstten sol üste alınabilir.

• Slider ve animasyonlar ters yönde çalışmalıdır.

• Form alanlarında label ve input hizası sağdan sola göre düzenlenmelidir.

• Checkbox, radio gibi bileşenlerde ikonlar metnin sağına alınmalıdır.

• Gönder / İptal gibi butonlar sağdan sola sıralanmalıdır (iptal butonu sağda, Gönder butonu solda).

• Input’lar, içeriğin yönüne göre hizalanmalıdır. Yerel dillerde girilen metinler sağa hizalanmalı, evrensel içerikler (örneğin kredi kartı numarası, e-posta, telefon vb.) sola hizalanmalıdır. İçeriğin türü dinamikse, hizalama da girilen değere göre otomatik olarak sola ya da sağa değişebilmelidir.

3. Margin ve Padding Yönleri

RTL desteklemek için geleneksel CSS yönlendirmeleri yerine mantıksal yönleri kullanmak daha güvenlidir.

/* Kötü örnek - RTL'de bozulacak */

.sidebar {
  margin-left: 2rem;
  padding-right: 1rem;
  border-left: 2px solid #ccc;
}

/* İyi örnek - RTL uyumlu */

.sidebar {
  margin-inline-start: 2rem;
  padding-inline-end: 1rem;
  border-inline-start: 2px solid #ccc;
}

/* Karışık özellikler için */

.content-box {

/* Yatay özellikler - yön değişir */

  margin-inline: 1rem 2rem; /* start: 1rem, end: 2rem */
  padding-inline: 0.5rem;

/* Dikey özellikler - yön değişmez */
  margin-block: 1rem 0;
  padding-block: 1rem;
}

4. Scroll Yönleri

Bazı tarayıcılarda, RTL içeriğe sahip alanlarda yatay scroll yönü de tersine döner. Özellikle carousel gibi yatay kayan bileşenlerde bu davranışa dikkat edilmelidir.

RTL Desteğiyle İlgili Yaygın Sorunlar ve Çözümleri

1. text-align: left Kullanımı

/* Kötü örnek - RTL'de bozulacak */

.sidebar {
  text-align: left;
}

/* İyi örnek - RTL uyumlu */

.sidebar {
  text-align: start;
}

Mantıksal hizalama (start, end) kullanmak her iki yönde de doğru davranış sergiler.

2. İkonların Yanlış Yönde Kalması

RTL’de ok ikonları yön değiştirmelidir. Örnek:

• LTR: ← Geri

• RTL: العودة →

SVG ikonlarda transform: scaleX(-1) kullanılarak simgeler ters çevrilebilir.

3. Üçüncü Parti Bileşen Uyumsuzluğu

Modal, dropdown, carousel gibi bazı bileşenler RTL desteği sunmaz. Bu durumda:

• Bileşenin RTL desteği olup olmadığını önceden kontrol edin.

• Gerekirse override edin veya alternatif bileşenler kullanın.

4. RTL + LTR İçerik Karışıklığı

Karışık içerikler yön karmaşasına neden olabilir.

Yanlış:

<p>هذا هو البريد الإلكتروني الخاص بي: contact@example.com</p>

RTL Desteği İçin Teknik Öneriler

• CSS: Mantıksal yönleri kullanın (margin-inline, padding-block).

• HTML: <html dir=”rtl”> ile yön belirtin.

• JavaScript: document.dir ile yönü dinamik değiştirin.

• UI Bileşenleri: RTL desteği olan bileşenler seçin.

• İkonlar: RTL için ikonları scaleX(-1) ile aynalayın.

• UX: Sadece yön değil, kültürel alışkanlıkları da göz önünde bulundurun.

Tailwind ile RTL Desteği

Tailwind CSS’e RTL desteği eklemek için tailwindcss-rtl gibi eklentiler kullanabilirsiniz. Bu sayede:

• rtl: ve ltr: ön ekleriyle stil tanımlayabilirsiniz.

• Mantıksal yönlendirmeler otomatik olarak işlenir.

• Ekstra class tanımlamaya gerek kalmaz.

Örnek:

<div class="text-start rtl:text-end">  Başlık</div>

Öncelikle tailwindcss-rtl paketini kurup:

npm install tailwindcss tailwindcss-rtl

Ardından pluginlere eklemek className’lere RTL desteği kazandırır:

// tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  plugins: [require('tailwindcss-rtl')],
}

Otomatik RTL uyumluluğu için örnek:

**Uyumsuz:**

<div class="ml-4">
  Başlık
</div>

**Uyumlu:**

<div class="ms-4">
  Başlık
</div>

ShadCN ile RTL Desteği

Bazı ShadCN bileşenleri varsayılan olarak RTL’yi dikkate almaz, ancak çoğu Tailwind entegrasyonu ile kolayca RTL uyumlu hale getirilebilir.

1. RTL Yönünü Ayarlama

<html dir=”rtl”> şeklinde yön belirtmek çoğu bileşeni etkiler. ShadCN bileşenlerinin çoğu bu yönden etkilenir. Ancak bazı özel durumlar için ek ayarlar gerekir.

2. Dialog, Dropdown, Tooltip gibi Bileşenlerde Yön Kontrolü

Bu bileşenlerde içerik yönünü elle belirtmeniz gerekebilir.

Örnek:

<Dialog>
  <DialogContent className="text-start rtl:text-end">
  ...
  </DialogContent>
</Dialog>

🧭 Tarayıcı Desteği: Mantıksal CSS Özellikleri

Mantıksal CSS özellikleri (margin-inline-start, padding-block-end, vb.), modern tarayıcıların çoğu tarafından desteklenmektedir. Ancak, tüm tarayıcı sürümleri bu özellikleri aynı düzeyde desteklemez.

📌 Not: Internet Explorer (IE11) bu özellikleri desteklemez. Eski tarayıcılar için margin-left gibi klasik yönlü özellikleri polyfill veya alternatif CSS ile desteklemeniz gerekebilir.

Sonuç

Web uygulamaları için RTL desteği, sadece bir “çeviri işi” değil, kullanıcı deneyimini ciddiye alma meselesidir. Mantıksal CSS kullanımı, doğru bileşen seçimi, kültürel farkların gözetilmesi ve test süreçleri ile RTL desteğini başarılı şekilde entegre edebilirsiniz.

Küresel ölçekte rekabet etmek istiyorsanız, kullanıcılarınızın nasıl okuduğunu da önemseyin.

İyi kodlamalar! 🚀