11 Eylül 2011 Pazar
Dünyaya açılıyorsunuz ve web sitenizin bu duruma ayak uydurmasını istiyorsunuz. Bunun için sayfadaki metinleri çevirmenin yeterli olacağını düşünüyor olabilirsiniz. Ancak yanılırsınız. Google Web Yöneticisi Ekibi olarak sıklıkla, 40'ın üzerinde dilde yerelleştirilen siteler geliştiriyoruz. Sayfalarımızı hem farklı dillerde hem farklı bölgelerde kullanıma sunarken dikkate aldığımız bazı noktaları bu yazıda okuyabilirsiniz.
(Yalnızca İngilizce dilinde içerikler sunduğunuz için bu sorunlardan etkilenmediğinizi düşünseniz de, İngilizce konuşmayan ziyaretçiler içeriğinizi kendi dillerinde görüntülemek için Google Çeviri gibi araçlar kullanıyor olabilir. Sitenizi amaçladığınız şekilde görüntülemeyen ziyaretçilerin sayısı hakkında bir fikir edinmek için bu trafiği Analytics Gösterge Tabloları'nda gözlemleyebilirsiniz.)
Daha fazla dil != Daha fazla HTML şablonu
Her dil sürümü için aynı şablonu kullanmanızı ve her zaman şablonunuzun HTML kodunu basit tutmanızı kesinlikle öneririz.
Tüm diller için aynı HTML kodunu kullanmak bakım açısından avantajlıdır. Her dilde hataları düzeltmek için HTML'de değişiklik yapmak ölçeklenebilir bir yaklaşım değildir. Sayfanızın kodunu mümkün olduğunca temiz tutup tüm stil sorunlarını CSS'de düzeltin. Çoğu çeviri aracı çevrilebilir içerik dizelerini HTML dokümanından ayrıştırır ve düzgün yapılandırılmış, geçerli bir HTML bu işi oldukça kolaylaştırır. Bu durum temiz bir kodun sağladığı avantajlardan yalnızca bir tanesidir.
Bir dize ne kadar uzun olabilir?
Sabit boyutlu öğelerle metinlerin uyumuna dayanan bir tasarımınız varsa metinlerin çevrilmesi tasarımı altüst edebilir. Örneğin, sol gezinme menünüzdeki dizelerin bazı dillerdeki çevirileri çok daha uzun olabilir. Aynı içeriğe ait gezinme dizelerinin İngilizce ve Hollandaca dillerinde ne kadar farklı uzunluklarda olduğuna göz atın. Satır yüksekliğinizi bu duruma göre ayarlayarak birden çok satıra kayabilecek gezinme başlıkları için hazırlıklı olabilirsiniz (Gezinme metinlerinizi en baştan İngilizce dilinde oluştururken de bu yöntemi değerlendirebilirsiniz).
Değişken kelime uzunlukları form etiketlerinde ve kontrollerde belirli sorunlara yol açar. Örneğin, form düzeninizde etiketler sol, alanlar sağ taraftaysa uzun metin dizeleri iki satıra taşarken kısa metin dizelerinin formdaki giriş alanlarıyla ilişkili olduğu belli olmayabilir. İki durum da tasarımı bozar ve okunaklı bir form elde etmenize engel olur. Bunlara ek olarak, sağdan sola (RTL) düzenler için ihtiyaç duyabileceğiniz ek stil düzenlemelerini de dikkate alın (Bu konuya daha sonra değineceğiz). Bu nedenlerle, farklı dillerle iyi uyum sağlayan okunaklı formlar tasarlamak adına etiketleri alanların üzerinde konumlandırıyoruz.
Kutuların yüksekliğine uyan arka planlarla düzgün bir düzen oluşturmak istiyorsanız sabit yükseklikli sütunlar kullanmayın. Metinleriniz çevrildiğinde, yalnızca İngilizce içeriği kapsayacak kadar yüksek olan alanlardan taşabilir. Tasarımınızda kullanmak istediğiniz kullanıcı arayüzü öğelerinin daha fazla veya daha az metine (örneğin, yatay - dikey sekmelerde) uygun olup olmadığını değerlendirin.
Karşı taraftan bakınca
Çoğu düzenleyicinin çift yönlü Unicode algoritmasını destekleyecek şekilde geliştirilmiş olmaması, çift yönlü HTML için kaynak düzenlemede sorunlara yol açabilir (sorunlar ve çözümleri hakkında çeşitli araştırmalar). Kısacası, işaretlemenizin gösterim şekli karışabilir:
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Günlük kullanımımızda IntelliJ IDEA, JEditX, Coda ve özellikle Dreamweaver editörlerinin şu anda çift yönlü düzenleme için makul çözümler sağladığını gördük.
Sağdan sola yazılan diller için tasarım yaparken ihtiyaç duyduğunuz desteğin çoğunu temel CSS'in içinde derleyebilir, html öğesinin yön özelliğini (ters yönde uyumluluk için) body öğesindeki bir sınıfla bir arada kullanabilirsiniz. Her zaman olduğu gibi, tüm stilleri tek bir stil sayfasında tutmak bakım açısından yararlıdır.
Bu temel stil sorunlarına dikkat edin: Sağa kayan öğelerin sola, sola kayan öğelerin sağa kaydırılması; öğelerin tek bir kenarına uygulanan ek dolgu veya marj genişliklerinin geçersiz kılınıp değiştirilmesi; tüm metin hizalama özelliklerinin tersine çevrilmesi gerekir.
Eski tarayıcılarla uyumlu olması nedeniyle gövde etiketinde html[dir=rtl] CSS seçici yerine bir sınıf kullanmak dahil olmak üzere genellikle aşağıdaki yaklaşımı kullanıyoruz:
Öğeler:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
Soldan sağa (varsayılan) stil:
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
Sağdan sola stil:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
(İngilizce ve Arapça uygulamalara göz atın.)
Bu konuyla ilgili son bir not: Latin harflerle yazılan şirket adları veya telefon numaraları gibi bazı dizelerin soldan sağa yönde korunması gerekebileceği için, sağdan sola yazılan dillere uyarlanan içerikleriniz çoğunlukla tamamen sağdan sola yerine çift yönlü olacaktır. Birincil yönü sağdan sola olan bir dokümanın tarayıcıda doğru şekilde işleneceğinden emin olmak için, yerleştirilmiş metin dizelerini aşağıda açıklandığı şekilde yön belirleyen bir özellik kullanarak satır içi bir öğeyle sarmalayın:
<h2>עוד ב- <span dir="ltr">Google</span></h2>
dir özelliğini ekleyebileceğiniz bir HTML kapsayıcının bulunmadığı durumlarda (örneğin, başlık öğelerinde veya mesaj istemleri için JavaScript ile oluşturulan kaynak kodlarında), yönü belirlemek için aşağıdaki eşdeğer yaklaşımı kullanabilirsiniz. Bu örnekte ‫ ve ‬ Unicode denetim karakterleri sağdan sola yerleşim için kullanılmıştır:
<title>‫הפוך את Google לדף הבית שלך‬</title>
JavaScript kodunda örnek kullanım:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
(Ayrıntılı bilgilere Arapça, İbranice ve sağdan sola yazılan diğer diller için HTML oluşturma ve sağdan sola metin yazma ile ilgili W3C makalelerinden ulaşabilirsiniz.)
Hepsi Yunanca sanki...
Daha önce Latin olmayan karakter kümeleriyle (Kiril, Yunan, çeşitli Asya ve Hint karakter kümeleri) çalışmadıysanız hem düzenleyicinizin hem de tarayıcınızın içerikleri olması gerektiği şekilde göstermediğini fark edebilirsiniz.
Düzenleyici ve tarayıcı kodlamalarının UTF-8'e (önerilir) ayarlı olup olmadığını kontrol edin. Ayrıca, tarayıcıların sayfanızı oluştururken neyle karşılaşacaklarını bilmeleri için HTML şablonunuza bir <span> öğesi ile html öğesinin lang özelliğini ekleyebilirsiniz. Bu uygulama aynı zamanda tüm Unicode karakterlerin doğru gösterilmesini sağlayacağı için değerli baytları é (é) gibi HTML varlıklarının kullanılmasına harcamak zorunda kalmazsınız. Bu konuda sorun yaşarsanız W3C'nin karakter kodlama ile ilgili eğitici içeriğinde sorunların ayrıntılı açıklamalarını bulabilirsiniz.
Adlandırma hakkında bir not
Son olarak, çeşitli dil sürümleri oluştururken kullanılan adlandırma kurallarıyla ilgili bir ipucu verelim. Adlandırma için ISO 639-1 dil kodları gibi bir standart kullanmak, aynı dokümanın birçok dildeki sürümleriyle çalışmaya başladığınızda işinizi kolaylaştırır.
Alışılagelmiş bir standart kullanmak, hem kullanıcıların sitenizin yapısını anlamasına yardımcı olur hem de siteyi geliştiren tüm web yöneticileri açısından sitenin sürdürülebilirliğini artırır. Ayrıca, diğer site varlıkları (logo resimleri, PDF dokümanları) için dil kodlarını kullanarak dosyaların hızlıca tanımlanmasını sağlayabilirsiniz.
URL yapılarının yanı sıra, çok bölgeli web siteleriyle çalışma ve çok dilli web siteleriyle çalışma konularındaki diğer sorunlarla ilgili tavsiyeler için Web Yöneticisi Merkezi'nin geçmiş yayınlarını inceleyebilirsiniz.
Bu yazıda, her gün uğraştığımız önemli sorunların bir özetini aktardık. Yerelleştirme aşamasında, iyi yapılandırılmış bir HTML ile sağlam bir CSS için en başta yürüttüğünüz planlama ve çalışmaların faydasını göreceğinizden emin olabilirsiniz.