Uluslararası Web Siteleri İçin 6 Hızlı İpucu

31 Mayıs 2013, Cuma

Editörün notu: Daha önce Google web araması için uluslararasılaştırma konusunu ele alan çeşitli yöntemleri inceledikten sonra, işte Google Web Studio ekibi üyelerinden web geliştiricilerine yönelik ipuçları.

Birçok web sitesi birden fazla dilde mevcuttur ve giderek daha fazla web sitesi birden fazla dil için erişilebilir hale getirilmektedir. Ancak, bir web sitesini birden fazla dil için oluşturmak sadece çeviri veya yerelleştirme (L10N) yapmak anlamına gelmez. Bu süreç, tamamı uluslararasılaştırma (I18N) ile ilgili olan birkaç ek gereksinim daha içerir. Bu yazımızda, uluslararası web siteleri için birkaç ipucu paylaşıyoruz.

Sayfaları stil sayfalarında değil, işaretleme dilinde I18N’e hazır hale getirin

Dil ve yönlülük, belgenin içeriğinin ayrılmaz bir parçasıdır. Mümkünse, uluslararasılaştırma amaçları için stil sayfalarını değil, her zaman işaretleme dilini (markup) kullanmalısınız. En azından html öğesinde @lang ve @dir kullanın:

Özel sınıflar veya kimlikler (ID) gibi kendi çözümlerinizi üretmekten kaçının.

Stil sayfalarında I18N konusuna gelince, her zaman CSS’e güvenemezsiniz: CSS spesifikasyonu, uyumlu kullanıcı aracıların direction veya unicode-bidi gibi özellikleri görmezden gelebileceğini tanımlar. (XML için durum farklıdır. XML özel bir uluslararasılaştırma işaretlemesi sunmaz, bu nedenle burada CSS kullanılması tavsiye edilir.)

Tüm yerel ayarlar için tek bir stil sayfası kullanın

LTR (soldan sağa) ve RTL (sağdan sola) yönlülüğü veya her dil için ayrı stil sayfaları oluşturmak yerine, her şeyi tek bir stil sayfasında toplayın. Bu, uluslararasılaştırma kurallarınızın anlaşılmasını ve sürdürülmesini çok daha kolay hale getirir.

Yani, alternatif bir stil sayfasını şu şekilde gömmek yerine:

mevcut olanı kullanın:

Bu yaklaşımı benimserken, mevcut CSS kurallarınızı uluslararası karşılıklarıyla tamamlamanız gerekecektir:

[dir='rtl'] öznitelik seçicisini kullanın

Mevcut stil sayfanıza bağlı kalmanızı önerdiğimiz için (2. ipucu), diğer yönlülük için farklı şekilde biçimlendirmeniz gereken öğeleri seçmenin farklı bir yoluna ihtiyacınız vardır. RTL içerikleri özel işaretleme gerektirdiğinden (1. ipucu), bu kolay olmalıdır: Çoğu modern tarayıcı için basitçe [dir='rtl'] kullanabiliriz.

İşte bir örnek:

:lang() sözde sınıfını kullanın

Belirli bir dildeki belgeleri hedeflemek için :lang() sözde sınıfını kullanın. (Burada metin parçacıklarından değil, belgelerden bahsettiğimizi unutmayın; çünkü belirli bir dildeki parçacıkları hedeflemek işleri biraz daha karmaşık hale getirir.)

Örneğin, kalın yazı tipinin Çince belgelerde pek iyi çalışmadığını fark ederseniz (ki gerçekten de çalışmaz), aşağıdakini kullanın:

Sol ve sağ ile ilgili değerleri yansıtın

Hem LTR hem de RTL içerikleriyle çalışırken, yönlülüğü değişen tüm değerleri yansıtmak önemlidir. Dikkat edilmesi gereken özellikler arasında kenarlıklar, kenar boşlukları ve dolgularla ilgili her şeyin yanı sıra konumla ilgili özellikler, float veya text-align yer alır.

Örneğin, LTR’de text-align: left olan şey, RTL’de text-align: right olmalıdır.

Yönlülüğü “çevirmeyi” kolaylaştıran araçlar vardır. Bunlardan biri CSSJanus‘tur, ancak bu araç “aynı stil sayfası” için değil, “ayrı stil sayfası” dünyası için yazılmıştır.

Detaylara dikkat edin

Aşağıdaki öğelere dikkat edin:

• Oklar veya arka planlar gibi sol veya sağ için tasarlanmış görseller, box-shadow ve text-shadow değerlerindeki ışık kaynakları ile JavaScript konumlandırması ve animasyonları: Bunların yerlerinin değiştirilmesi ve zıt yönlülüğe göre uyarlanması gerekebilir.
• Özellikle Latin olmayan alfabeler için yazı tipi boyutları ve yazı tipleri: Yazı sistemine ve yazı tipine bağlı olarak, varsayılan yazı tipi boyutu çok küçük olabilir. Boyutu ve gerekirse yazı tipini değiştirmeyi düşünün.
• CSS özgüllüğü (specificity): [dir='rtl'] (veya [dir='ltr']) kancasını kullanırken (2. ipucu), daha yüksek özgüllüğe sahip bir seçici kullanıyorsunuz demektir. Bu durum sorunlara yol açabilir. Sadece dikkatli olun ve buna göre ayarlayın.

Herhangi bir sorunuz veya geri bildiriminiz varsa, Uluslararasılaştırma Web Yöneticisi Yardım Forumu‘na göz atın veya yorumlarınızı buradan paylaşın.

Yazan: Jens O. Meiert ve Tony Ruscoe, Teknik Liderler, Google Web Studio