Uluslararasılaştırma ve yerelleştirme

Bu yazıyı okuyorsanız World Wide Web'i kullanıyorsunuzdur. Formlarınız farklı diller konuşan, insanlar ve farklı kültürel geçmişlere sahip kişiler. Formunuzu uluslararası hale getirme ve yerelleştirme için nasıl hazırlayacağınızı öğrenin.

Formunuzun farklı dillerde çalıştığından emin olma

Formunuzun farklı dillerde çalıştığından nasıl emin olabileceğinize bakalım.

Sitenizi yerelleştirmeye hazır hale getirmenin ilk adımı <html> öğesinde lang dil özelliğini tanımlamaktır. Bu özellik, ekran okuyucuların doğru telaffuzu çağırmasını sağlar. ve tanımlanan dil varsayılan tarayıcı dili değilse tarayıcıların sayfanın çevirisini sunmasına yardımcı olur.

<html lang="en-us">

lang özelliği hakkında daha fazla bilgi edinin.

Bir formu Almancaya çevirdiğinizi varsayalım. Arama motorlarının ve tarayıcıların çevrilmiş sürüm hakkında bilgi sahibi olmasını nasıl sağlayabilirsiniz? Sitenizin <head> bölümüne, alternatif sürümleri açıklayan <link> öğeleri ekleyebilirsiniz.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Başka bir dil konuşan kullanıcıların formunuzu kullanmasına yardımcı olun

Formunuzu her dile çeviremezsiniz. ancak çeviri araçlarının sizin için çevirebilmesini sağlayabilirsiniz.

Çeviri araçlarının formunuzdaki tüm metni çevirdiğinden emin olmak için tüm metnin HTML'de tanımlandığından ve görünür olduğundan emin olun. Bazı araçlar JavaScript'te tanımlanan içerikle de çalışır, ancak uyumluluğu iyileştirmek için HTML'ye mümkün olduğunca çok metin eklemeye çalışın.

Formunuzun farklı yazma sistemleriyle çalıştığından emin olun.

Farklı dillerde farklı yazma sistemleri ve karakter kümeleri kullanılır. Bazı metinler soldan sağa, bazıları da sağdan sola yazılır.

Boşlukları yazı sistemlerinden bağımsız hale getirin

Formunuzun farklı yazma sistemlerinde çalıştığından emin olmak için CSS mantıksal özelliklerini kullanabilirsiniz.

Girişin tüm kenarlarında kenarlık kalınlığı 1px kenarlığın 4px kalın olduğu sol taraf dışında. Şimdi CodePen'i düzenleyin ve yazma sistemini sağdan sola olacak şekilde değiştirin <main> öğesine dir="rtl" ekleyerek

Kalın kenarlık artık sağ taraftadır. Bunun nedeni, sınırı mantıksal bir özellik kullanarak tanımlamamızdır.

input {
  border-inline-start-width: 4px;
}

Mantıksal özellikler hakkında daha fazla bilgi edinin.

Formunuzun farklı ad biçimlerini işleyebildiğinden emin olun

Kullanıcının, adını doldurması gereken bir formunuz olduğunu varsayalım. Alanı formunuza nasıl eklersiniz?

Ad ve soyadı için birer alan ekleyebilirsiniz. Ancak, adlar birbirinden farklıdır. soyadlarını bile bilmezler. Peki, soyadını soyadı alanına sahip mi?

Adların girilmesini hızlı ve kolay bir hale getirmek ve ne olursa olsun herkesin adını girebilmesini sağlamak biçiminde olmalıdır. Mümkün olduğunda adlar için tek bir form alanı kullanın.

Kişisel adlar hakkında daha fazla bilgi edinin.

Latin alfabesinde olmayan karakterler içeren bir adınız varsa Adınızın bazı formlarda invalid olarak bildirilmesi sorunuyla karşılaşmış olabilirsiniz. Google Takvim widget'ını formlar oluşturun, olası tüm karakterlere izin verdiğinizden emin olun ve bir adın yalnızca birkaç karakter var.

Çeşitli adres biçimlerine izin verin

Google'ın genel merkezi 1600 Amphitheatre Parkway, Mountain View, CA 94043, ABD adresindedir.

Bu adres; sokak numarası, sokak, şehir, eyalet, posta kodu ve ülke bilgilerini içerir. Ülkenizde, adres biçimi tamamen farklı olabilir. Formunuza herkesin adresini girebilmesini nasıl sağlayabilirsiniz?

Bunlardan biri genel girişler kullanmaktır.

Diğer ortak çalışma yolları hakkında daha fazla bilgi uluslararası adres alanlarına bakın.

Öğrendiklerinizi sınayın

Uluslararasılaştırma ve yerelleştirme bilginizi test edin

Ekran okuyucular için doğru telaffuzu nasıl çağırırsınız?

lang özelliğiyle.
🎉
hreflang özelliğiyle.
Tekrar deneyin.
Kullanılan dille ilgili açıklama ekleyin.
Tekrar deneyin.
language özelliğiyle.
Tekrar deneyin.

Web sitenizdeki yazı sistemini nasıl değiştirebilirsiniz?

direction özelliğiyle.
Tekrar deneyin.
dir özelliğiyle.
🎉
CSS mantıksal özelliklerini kullanma.
Tekrar deneyin.
<link> öğesi kullanılıyor.
Tekrar deneyin.

Kaynaklar