Arapça ve RTL Web Uygulaması Geliştirme Rehberi
BAE, Suudi Arabistan, Katar, Kuveyt, Bahreyn veya Umman'a satış yapan şirketler için yalnızca İngilizce bir uygulama çoğu zaman yeterli değildir. Müşteriler, çalışanlar ve kamu iş ortakları giderek Arapçada doğal biçimde çalışan yazılımlar bekliyor; bazı belgelerin ise mevzuat gereği Arapça olması gerekiyor. Arapça sağdan sola yazılır ve bu, metnin yönünden çok daha fazlasını etkiler: gezinme, ikonlar, formlar, tablolar, hatta bir ödeme akışındaki adımların sırası bile değişir. Arapçayı sonradan ekleyen pek çok uygulama bozuk düzenler, aynalanmış logolar ve yanlış yerde duran sayılarla karşılaşır. Bu rehber, Next.js ve Laravel projeleri için pratik önerilerle birlikte Arapça ve sağdan sola (RTL) desteğin en baştan nasıl doğru kurulacağını anlatıyor.
Körfez'de Arapça Desteği Neden Önemli?
Körfez genelinde iş yazılımları çoğunlukla iki dillidir. Ticarette İngilizce yaygın olarak kullanılır, ancak resmi dil Arapçadır ve özellikle kamu, kamu sektörü ve geleneksel sektörlerdeki birçok kullanıcı Arapça çalışmayı tercih eder. Özenli bir Arapça deneyim sunmak, ürünün bölge için sonradan uyarlanmadığını, bölge için tasarlandığını gösterir.
Somut gereksinimler de var. Suudi Arabistan'da KDV mevzuatı vergi faturalarının Arapça düzenlenmesini zorunlu kılıyor; yanında başka diller de yer alabilir. Bu nedenle Suudi müşteriler için fatura, teklif veya resmi belge üreten her sistemin, PDF'ler ve e-fatura verileri dahil güvenilir Arapça çıktı üretmesi gerekir. Bölgedeki kamu ve kurumsal ihalelerde de Arapça desteği sık sık bir şart olarak yer alır.
RTL Çeviriden İbaret Değildir
Bir sayfayı sağdan sola çevirmek, kök elemana iki özellik eklemekle başlar: lang="ar" ve dir="rtl". Tarayıcı bunun ardından satır yönünü tersine çevirir; metin sağa hizalanır, flex ve grid satırları sağdan sola akar ve tablo sütunları sağdan başlar. Bu temeldir, ancak yalnızca arayüzün geri kalanı sol ve sağı koda sabitlemek yerine yöne göre davranacak şekilde kurulduysa iyi çalışır.
Pratikte bir RTL arayüzü, LTR versiyonunun ayna görüntüsüdür. Gezinme menüsü sağa geçer, geri butonu sağı gösterir, ilerleme çubukları sağdan sola dolar ve yan paneller karşı taraftan açılır. Kullanıcılar tutarsızlığı hemen fark eder; yarım aynalanmış bir arayüz, her kelimesi doğru çevrilmiş olsa bile bozuk hissettirir.
Düzenleri CSS Mantıksal Özellikleriyle Kurun
En önemli teknik karar, CSS'te fiziksel yönleri kullanmayı bırakmaktır. margin-left, padding-right ve text-align: left gibi özellikler soldan sağa bir sayfa varsayar. Bunların mantıksal karşılıkları olan margin-inline-start, padding-inline-end ve text-align: start ise belgenin yönünü otomatik olarak takip eder. Mantıksal özelliklerle kurulan bir düzen, ayrı bir stil dosyasına gerek kalmadan hem İngilizcede hem Arapçada çalışır.
Modern CSS framework'leri bu yaklaşımı destekler. Örneğin Tailwind CSS, kenar boşlukları ve dolgu için ms-4 ve pe-2 gibi mantıksal sınıflar, yöne özel bir stilin gerektiği nadir durumlar için de rtl: ve ltr: varyantları sunar. Flexbox ve CSS Grid zaten belgenin yönüne uyar; bu yüzden fiziksel özellikler kaldırıldığında çoğu düzen doğru şekilde aynalanır.
Neyi Aynalamalı, Neye Dokunmamalı?
Her şey ters çevrilmemelidir. Faydalı bir kural şudur: yönü veya sırayı temsil eden her şey aynalanır; gerçek dünyadaki bir nesneyi veya sabit bir standardı temsil eden şeyler aynalanmaz.
- Aynalanır: gezinme okları, geri ve ileri butonları, breadcrumb'lar, ilerleme göstergeleri, kaydırıcılar, carousel'ler, adım adım akışlar ve kenar çubukları ile çekmecelerin konumu.
- Aynalanmaz: logolar, ürün fotoğrafları, medya oynatma butonları, saatler, onay işaretleri ve gerçek nesneleri gösteren ikonlar.
- Soldan sağa kalır: telefon numaraları, e-posta adresleri, URL'ler, IBAN'lar, kod parçaları ve ürün kodları; Arapça metnin içinde bile.
- Bilinçli karar verin: grafikler ve zaman çizelgeleri. Bazı ekipler Arapça kullanıcılar için zaman eksenini aynalar, bazıları soldan sağa tutar; önemli olan tutarlı bir seçim yapmaktır.
Karışık Arapça ve İngilizce Metni Yönetmek
Gerçek içerik nadiren tamamen Arapçadır. Ürün adları, marka adları, sayılar ve e-posta adresleri çoğu zaman Arapça cümlelerin ortasında yer alır; kullanıcıların girdiği içerik de iki dilde olabilir. Unicode çift yönlü algoritması bunun çoğunu otomatik olarak halleder, ancak karışık metnin sınırlarındaki noktalama işaretleri ve sayılar şaşırtıcı yerlere kayabilir.
İki teknik sorunların çoğunu çözer. Kullanıcının girdiği veya yönü bilinmeyen metni <bdi> elemanıyla sarın ya da ona dir="auto" verin; böylece tarayıcı yönü içeriğe göre belirler. E-posta, telefon ve referans numarası alanları gibi her zaman soldan sağa okunması gereken alan ve değerlere de açıkça dir="ltr" verin. Bu küçük detaylar, Arapça kullanıcıların bildirdiği hataların birçoğunu önler.
Arapça Tipografi
Arap yazısı bitişiktir ve Latin yazısına göre daha uzun yukarı ve aşağı uzantılara sahiptir; bu yüzden yalnızca İngilizce için tasarlanmış fontlar Arapçayı çoğu zaman kötü gösterir veya tasarımla uyuşmayan bir sistem fontuna düşer. Noto Sans Arabic, IBM Plex Sans Arabic, Cairo veya Tajawal gibi iyi tasarlanmış Arapça versiyonu olan bir yazı tipi seçin ve onu uyumlu bir Latin fontuyla eşleştirin.
Bazı tipografi kuralları Arapçaya özeldir. Arapça karakterler daha fazla dikey alana ihtiyaç duyduğu için satır yüksekliğini biraz artırın. Arapça metne asla harf aralığı (letter-spacing) uygulamayın; harfler arasındaki bağlantıları koparır. Büyük harfe çevirme gibi dönüşümlerin Arapçada bir anlamı yoktur. Son olarak metin uzunluğunun değişmesini bekleyin: Arapça çeviriler İngilizceden kısa veya uzun olabilir, bu yüzden butonlar ve etiketler sabit genişliklere bağlı olmamalıdır.
Sayılar, Tarihler ve Para Birimi
Arapça arayüzler sayıları Batı rakamlarıyla (0123) veya Doğu Arap rakamlarıyla (٠١٢٣) gösterebilir. Kullanım ülkeden ülkeye ve bağlama göre değişir; Körfez'deki birçok işletme yazılımlarda Batı rakamlarını kullanır. Bir seçimi koda sabitlemek yerine tarayıcının Intl API'lerini ar-AE veya ar-SA gibi uygun bir yerel ayarla kullanın ve tutarlılık gerektiğinde rakam sistemini açıkça belirleyin.
Tarihler de aynı özeni hak eder. Suudi Arabistan'da Hicri takvim Miladi takvimle birlikte yaygın olarak kullanılır ve bazı resmi bağlamlarda Hicri tarih gerekir. Intl.DateTimeFormat, islamic-umalqura takvim seçeneğiyle Ümmülkura takvimini destekler. AED, SAR ve diğer Körfez para birimlerinin biçimlendirmesi de elle metin birleştirerek değil, yerel ayara duyarlı biçimlendirmeyle yapılmalıdır.
Formlar, Arama ve Veri Girişi
RTL sorunlarının en çok göründüğü yer formlardır. Etiketler, doğrulama mesajları ve yardımcı metinler doğru hizalanmalı, alan içi ikonlar karşı tarafa geçmeli ve tarih seçiciler doğru yönde açılmalıdır. E-posta, telefon numarası ve URL alanları Arapça bir formda bile soldan sağa kalmalı; isim ve adres alanları ise kullanıcının girdisini takip etmelidir.
Arama ek dikkat ister. Arapçada bazı harflerin elifin farklı biçimleri gibi birden fazla formu ve kullanıcıların nadiren yazdığı isteğe bağlı harekeler vardır. Normalleştirme yapılmazsa bir ürün adına yapılan arama, yalnızca bu detaylarda farklı olan sonuçları kaçırabilir. Metni indekslemeden ve aramadan önce normalleştirmek, Arapça kullanıcılara bekledikleri sonuçları verir.
Next.js'te Arapça ve RTL Uygulaması
Next.js App Router projesinde en temiz yaklaşım, /en ve /ar gibi yollarla yerel ayar tabanlı yönlendirmedir. Kök layout yerel ayarı okur ve <html> elemanındaki lang ve dir özelliklerini sunucuda belirler; böylece sayfa, aynalanmış içerik bir anlık bile görünmeden doğru yönde gelir. next-intl gibi kütüphaneler yönlendirmeyi, mesaj dosyalarını ve yerel ayara duyarlı biçimlendirmeyi yönetir.
Sunucu tarafı render burada gerçek bir avantajdır. HTML doğru yön ve dille üretildiği için arama motorları her versiyonu doğru indeksler ve yavaş bağlantıdaki kullanıcılar düzenin soldan sağa zıpladığını hiç görmez. Çevrilmiş başlıklar, açıklamalar ve hreflang alternatifleri dahil meta veriler, Metadata API ile her yerel ayar için ayrı ayrı üretilebilir.
Laravel'de Arapça ve RTL Uygulaması
Laravel, lang dizinindeki dil dosyalarıyla yerleşik yerelleştirme sunar; küçük bir middleware uygulama dilini URL'den, kullanıcı tercihinden veya bir başlıktan belirleyebilir. Blade layout'ları ardından doğru lang ve dir özelliklerini üretebilir; Carbon da tarihleri Arapça biçimlendirebilir. Veritabanında saklanan içerik için spatie/laravel-translatable gibi paketler, aynı kaydın Arapça ve İngilizce versiyonlarını tutmayı kolaylaştırır.
Üretilen belgeler yaygın bir tuzaktır. Arapça harfler kelimedeki konumlarına göre şekil değiştirir ve bazı PDF kütüphaneleri bu şekillendirmeyi veya sağdan sola metni doğru işleyemez; sonuçta harfler kopuk veya ters görünür. Fatura veya raporların Arapça üretilmesi gerekiyorsa, Arapça desteği kanıtlanmış bir PDF çözümü seçin ve sorunu bir Suudi müşteri okunamayan bir fatura aldığında fark etmek yerine gerçek belgeleri erkenden test edin.
Arapça SEO
Sitenizin Arapça versiyonunun arama motorlarında sıralanmasını istiyorsanız ona kendi URL'lerini, çevrilmiş başlık ve meta açıklamalarını ve her Arapça sayfayı İngilizce karşılığına bağlayan hreflang etiketlerini verin. Slug'ların Arap harfleriyle mi yoksa Latin harfleriyle transliterasyonla mı yazılacağına karar verin ve bunu tutarlı biçimde uygulayın. Her şeyden önce gerçek çeviri ve yerel anahtar kelime araştırması kullanın: insanların Arapça aradığı terimler her zaman İngilizce anahtar kelimelerin birebir çevirisi değildir.
RTL Uygulamasını Test Etmek
RTL sorunları, Arapça okumayan ekipler için kolayca gözden kaçar. E-postalar, PDF'ler, hata sayfaları ve boş durumlar dahil her ekranı iki yönde de test edin. Her iki versiyonu da yakalayan görsel regresyon testleri düzen değişikliklerini erkenden yakalar. En önemlisi, incelemeye anadili Arapça olan birini dahil edin: doğal olmayan çevirileri, garip satır kesmelerini ve otomatik testlerin asla bulamayacağı kültürel detayları fark edecektir.
Sıkça Sorulan Sorular
Web geliştirmede RTL ne anlama gelir?
RTL, sağdan sola (right-to-left) anlamına gelir. Arapça, İbranice, Farsça ve Urduca gibi sağdan sola okunan dilleri tanımlar. Bir RTL web arayüzü, metin, gezinme ve sayfa akışı sağ taraftan başlayacak şekilde alışılmış düzeni aynalar.
Mevcut bir İngilizce uygulamaya Arapça desteği eklenebilir mi?
Evet. Bu iş genellikle fiziksel CSS özelliklerini mantıksal olanlarla değiştirmeyi, tüm metinleri çeviri dosyalarına taşımayı, sayılar ve tarihler için yerel ayara duyarlı biçimlendirme eklemeyi ve soldan sağa düzen varsayan bileşenleri düzeltmeyi kapsar. Emek, orijinal arayüzün nasıl kurulduğuna bağlıdır; bu yüzden RTL desteğini erkenden eklemek, sonradan eklemekten çok daha ucuzdur.
Arapça arayüzlerde Batı rakamları mı, Doğu Arap rakamları mı kullanılmalı?
İkisi de kullanılıyor. Körfez'deki birçok iş uygulaması Batı rakamlarını kullanırken bazı bağlamlar ve kitleler Doğu Arap rakamlarını tercih ediyor. En iyi yaklaşım, yerel ayara duyarlı biçimlendirme kullanmak, kitleniz için tutarlı bir rakam sistemi belirlemek ve telefon numaraları ile referans kodları gibi kritik değerleri öngörülebilir bir biçimde tutmaktır.
Suudi müşterilere kesilen faturaların Arapça olması gerekir mi?
Evet. Suudi KDV mevzuatı vergi faturalarının Arapça olmasını zorunlu kılar; yanında başka diller de yer alabilir. Bu, müşteriye sunulan fatura içeriği için geçerlidir; bu yüzden Suudi Arabistan için fatura kesen sistemlerin güvenilir Arapça metin ve PDF üretimine ihtiyacı vardır.
Arapça web uygulamaları için en iyi framework hangisi?
Next.js ve Laravel, Arapçayı ve RTL'yi iyi destekler. Daha önemli olan arayüzün nasıl kurulduğudur: CSS mantıksal özellikleri, doğru yerelleştirme kütüphaneleri, doğru yönün sunucuda render edilmesi ve Arapçayı destekleyen fontlar ile PDF araçları.
Aynı uygulamada Arapça ve İngilizceyi nasıl destekleriz?
Dili seçmek için yerel ayar tabanlı yönlendirme veya bir kullanıcı ayarı kullanın, lang ve dir özelliklerini buna göre belirleyin, çevrilebilir içeriği iki dilde saklayın ve aynı bileşenlerin iki yönde de çalışması için düzenleri mantıksal özelliklerle kurun.
Makine çevirisi Arapça bir arayüz için yeterli mi?
İlk taslak için yardımcı olabilir, ancak son adım olmamalıdır. Arayüz metinleri, yasal içerik ve pazarlama metinleri hem doğruluk hem de bölgedeki kullanıcıların beklediği üsluba uyum için anadili Arapça olan biri tarafından gözden geçirilmelidir.
Sonuç
Arapça ve RTL desteği, Körfez'e hizmet veren yazılımlar için kozmetik bir ek değil, temel bir gerekliliktir. Bunu iyi yapmak; düzenleri mantıksal özelliklerle tasarlamak, aynalanması gerekeni aynalayıp korunması gerekeni korumak, karışık metni yönetmek, doğru Arapça tipografiyi seçmek, sayıları ve Hicri tarihleri doğru biçimlendirmek ve güvenilir Arapça belgeler üretmek demektir. Next.js ve Laravel bu iş için güçlü temeller sunar. BAE, Suudi Arabistan veya bölgenin geneli için iki dilli bir uygulama planlıyorsanız, ekibimiz ilk günden itibaren her iki yönde de doğal hissettiren Arapça ve İngilizce arayüzler geliştirir.