Arapça Web Sitesi Nasıl Yapılır? RTL Tasarım Rehberi

Arapça web sitesi yapmak, metni Arapçaya çevirip sayfaya koymaktan ibaret değildir; sayfanın yönü de değişir. Kısa cevap: kök etikete dir="rtl" ve lang="ar" verilir, CSS sol/sağ yerine başlangıç/bitiş (mantıksal) özellikleriyle yazılır, yön bildiren ikonlar aynalanır ama logo, video ve grafikler aynalanmaz, Arapça için ayrı bir font seçilir ve Arapça sürüm hreflang ile ilan edilir. Bu beş adım baştan planlanırsa Arapça sürüm ek bir dil olarak gelir; sonradan eklenirse çoğu zaman tasarımın yarısı yeniden yazılır.

Arapça web sitesi kime gerekir?

Körfez ülkeleri, Irak, Mısır ve Kuzey Afrika’ya ürün satan ihracatçılar, Arap ülkelerinden misafir ağırlayan otel ve sağlık turizmi işletmeleri, bölgede proje yürüten inşaat ve mühendislik firmaları Arapça sürümün en çok fayda sağladığı gruplardır. Bu pazarlarda iş dili çoğu zaman İngilizcedir; ama karar vericinin ve son kullanıcının ana dilinde içerik sunan firma güven kazanır ve Arapça arama sorgularında rakipsiz kalabilir. Yurt dışına satışın genel adımlarını e-ihracat rehberimizde, dil altyapısının temelini ise çok dilli web sitesi yazımızda anlattık; bu yazı yalnızca Arapçaya özgü sağdan sola (RTL) tarafına odaklanıyor.

İlk adım: dir="rtl" ve lang="ar"

Tarayıcıya sayfanın yönünü söyleyen şey html etiketindeki dir özniteliğidir. dir="rtl" verildiğinde metin hizası, tablo sütun sırası, kaydırma çubuğunun yeri ve flex/grid akışı kendiliğinden sağdan sola döner. lang="ar" ise ekran okuyucuların doğru telaffuzu, tarayıcının doğru yazı biçimini seçmesi ve arama motorlarının dili tanıması için gereklidir. Next.js gibi dil önekli bir yapıda bu değer, bulunulan dile göre layout içinde üretilir:

const RTL_LOCALES = new Set(['ar', 'fa', 'he']);

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

/* CSS: sol/sağ yerine mantıksal özellikler */
.card {
  padding-inline-start: 24px; /* LTR'de sol, RTL'de sağ */
  margin-inline-end: 16px;
  border-inline-start: 4px solid var(--color-primary);
  text-align: start;
}

/* Yön bildiren ikonu yalnızca RTL'de aynala */
[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

Kullandığınız arayüz kütüphanesinin de yönü bilmesi gerekir. Ant Design, MUI ve benzerleri RTL modunu destekler ama ayrıca açılması gerekir; açılmazsa açılır menüler, tarih seçiciler ve çekmeceler yanlış taraftan çıkar.

CSS’i mantıksal özelliklerle yazmak

RTL işinin büyük kısmı CSS’tedir. margin-left, padding-right, left: 0 ya da text-align: left gibi fiziksel yönler RTL’de ters düşer. Her biri için ayrı [dir=rtl] kuralı yazmak hem yavaş hem kırılgandır. Doğru yöntem baştan mantıksal özellik kullanmaktır:

• margin-left / margin-right yerine margin-inline-start / margin-inline-end
• padding-left / padding-right yerine padding-inline-start / padding-inline-end
• left / right konumlandırma yerine inset-inline-start / inset-inline-end
• text-align: left yerine text-align: start
• border-left yerine border-inline-start; köşe yuvarlamada border-start-start-radius
• Flex ve grid zaten yönü izler; row-reverse ile elle ters çevirmeye gerek kalmaz

Arapça sürümü ucuz kılan şey çeviri değil, CSS’in ilk günden mantıksal özelliklerle yazılmasıdır. Fiziksel yönlerle yazılmış bir sitede RTL desteği, her bileşenin tek tek elden geçmesi demektir.

Neyi aynalamalı, neyi aynalamamalı?

RTL’de her şey ters çevrilmez. Kural basit: anlamı yöne bağlı olan öğe aynalanır, anlamı yönden bağımsız olan öğe olduğu gibi kalır.

• Aynalanır: geri/ileri okları, menü açılış yönü, breadcrumb ayıracı, slider ve galeri yönü, ilerleme çubuğu, adım göstergeleri.
• Aynalanmaz: logo, fotoğraf ve video, marka ikonları, saat ikonu, oynat düğmesi, grafiklerin zaman ekseni çoğu durumda, telefon numarası ve e-posta adresi.
• Dikkat: Arapça metnin içindeki Latin kelimeler, ürün kodları ve URL’ler soldan sağa okunmaya devam eder; bunları bdi etiketiyle ya da dir="ltr" ile sarmak karışık satırlarda noktalama işaretlerinin yanlış yere kaymasını önler.

Arapça font, satır yüksekliği ve tipografi

Latin harfler için seçilen font genellikle Arapça harf içermez; tarayıcı bu durumda sistem fontuna düşer ve sayfa her cihazda farklı görünür. Arapça için Noto Naskh Arabic, Noto Kufi Arabic, Cairo ya da IBM Plex Sans Arabic gibi web fontları ayrı yüklenmeli ve yalnızca Arapça sayfalarda çağrılmalıdır. Arapça harfler birbirine bağlandığı ve noktaları satırın üstüne ve altına taştığı için satır yüksekliği Latin metne göre biraz daha geniş tutulmalıdır. Harf aralığı (letter-spacing) Arapçada kullanılmaz, çünkü harf bağlantılarını koparır. Büyük-küçük harf ayrımı da yoktur; text-transform: uppercase ile yazılmış başlık stilleri Arapçada anlamsızdır.

Sayılar, tarihler, formlar

Bazı Arap ülkelerinde Doğu Arap rakamları (٠١٢٣), bazılarında Batı rakamları (0123) yaygındır; Körfez’de iki kullanım birlikte görülür. Hangisini göstereceğinize hedef pazara göre karar verin ve fiyat, tarih ve para birimini elle yazmak yerine Intl.NumberFormat ve Intl.DateTimeFormat ile dile göre biçimlendirin. Formlarda ad ve adres alanları sağa hizalanır, ama telefon, e-posta, IBAN ve kart numarası alanları soldan sağa kalmalıdır. Doğrulama kuralları da gözden geçirilmeli: yalnızca Latin harf kabul eden bir ad alanı Arapça adı reddeder ve kaybedilen her form bir müşteridir.

Arapça sayfaların SEO’su

Arapça sürümün aramada görünmesi için çok dilli sitedeki kurallar aynen geçerlidir: her dilin ayrı URL’si (/ar/...), hreflang="ar" ile karşılıklı ilan ve dile özel title ve description. URL’de Arapça harf kullanılabilir; Google bunları okur ve sonuçlarda Arapça gösterir, ancak paylaşıldığında uzun kodlanmış dizilere dönüşür. Kısa ve okunur tutmak şartıyla iki yol da çalışır; önemli olan bir kez seçip değiştirmemektir. Asıl fark içerikte: makine çevirisiyle doldurulmuş Arapça sayfa, Arapça konuşan ziyaretçiye ilk paragrafta belli olur ve geri dönüş oranı yüksek kalır. Belirli bir ülkeyi hedefliyorsanız (ör. Suudi Arabistan) ar-SA gibi bölge kodlu hreflang kullanmak ve yerel iletişim bilgisi vermek de sinyali güçlendirir. Teknik temel için SEO uyumlu web sitesi rehberimize, farklı bir dil pazarına özgü arama motoru örneği için Yandex SEO yazımıza bakabilirsiniz.

Yayına çıkmadan önce RTL testi

• Her sayfa şablonunu Arapça açıp mobil ve masaüstünde ekran görüntüsüyle LTR sürümle karşılaştırın.
• Açılır menü, modal, çekmece, tarih seçici, slider ve bildirim (toast) bileşenlerini tek tek açın.
• Arapça metin içine Latin kelime, sayı ve URL karışan satırlarda noktalamanın yerini kontrol edin.
• Formları Arapça adla, Doğu Arap rakamlarıyla ve uzun adreslerle doldurup gönderin.
• Ekran okuyucuyla birkaç sayfayı dinleyin; lang ve dir hataları burada hemen duyulur. Genel kurallar için erişilebilirlik (WCAG) yazımıza bakabilirsiniz.
• Sosyal paylaşım (OG) görsellerinde Arapça metnin harfleri bağlı ve doğru yönde çiziliyor mu, kontrol edin.

Sonuç

Arapça web sitesinin kalitesi üç kararla belirlenir: yönün kökten (dir ve lang) yönetilmesi, CSS’in mantıksal özelliklerle yazılması ve içeriğin gerçekten Arapça konuşan biri tarafından yazılıp kontrol edilmesi. Bunlar baştan kurulduğunda Arapça yalnızca yeni bir dil olur, ayrı bir site değil. Arapça dahil birden çok dilde çalışan, sağdan sola düzeni ilk günden destekleyen bir site için web geliştirme hizmetimize göz atabilir ya da ücretsiz teklif alabilirsiniz.