World Wide Web dünyadaki herkesin kullanımına açıktır. Neredeyse adını aklında bulacaksınız. Diğer bir deyişle, nerede olurlarsa olsunlar, kullandıkları cihazlar veya konuştukları dil fark etmeksizin, web sitenizin İnternet'e erişimi olan herkes tarafından erişilebilir olması anlamına gelir.
Duyarlı tasarımın hedefi, içeriğinizi herkesin erişimine sunmaktır. Aynı felsefeyi insan dillerine uygulamak, uluslararası birleşmenin arkasındaki itici güçtür. İçeriklerinizi ve tasarımlarınızı uluslararası bir kitle için hazırlar.
Mantıksal özellikler
İngilizce, soldan sağa ve yukarıdan aşağıya doğru yazılır, ancak tüm diller bu şekilde yazılmaz. Arapça ve İbranice gibi bazı diller sağdan sola, bazı Japonca yazı tipleri ise yatay değil dikey olarak okunur. Bu yazma modlarını barındırmak için CSS'de mantıksal özellikler kullanıma sunuldu.
CSS yazıyorsanız "left", "right", "top" ve "bottom" gibi yönlü anahtar kelimeler kullanmış olabilirsiniz. Bu anahtar kelimeler, kullanıcı cihazının fiziksel düzeniyle ilgilidir.
Mantıksal özellikler ise içerik akışıyla ilgili olduğundan bir kutunun kenarlarını ifade eder. Yazma modu değişirse mantıksal özelliklerle yazılan CSS buna göre güncellenir. Yön özelliklerinde durum böyle değildir.
margin-left
yön özelliği, her zaman içerik kutusunun sol tarafındaki kenar boşluğunu ifade ederken margin-inline-start
mantıksal özelliği, soldan sağa kullanılan bir dilde içerik kutusunun sol tarafındaki kenar boşluğunu, sağdan sola doğru yazılan bir dilde ise içerik kutusunun sağ tarafındaki kenar boşluğunu ifade eder.
Tasarımlarınızın farklı yazma modlarına uyum sağlaması için yönlü özelliklerden kaçının. Bunun yerine mantıksal özellikleri kullanın.
.byline { text-align: right; }
.byline { text-align: end; }
CSS'nin left
veya right
gibi belirli bir yön değeri olduğunda buna karşılık gelen bir mantıksal özellik vardır. Eskiden margin-left
olan şimdi margin-inline-start
de var.
Metnin soldan sağa doğru aktığı İngilizce gibi bir dilde, inline-start
"sol"a, inline-end
ise "sağ"a karşılık gelir.
Benzer şekilde, metnin yukarıdan aşağıya yazıldığı İngilizce gibi bir dilde, block-start
"üst", block-end
ise "alt" anlamına gelir.
CSS'nizde mantıksal özellikler kullanıyorsanız sayfalarınızın çevirileri için aynı stil sayfasını kullanabilirsiniz. Sayfalarınız sağdan sola veya aşağıdan yukarıya yazılmış dillere çevrilse bile tasarımınız buna göre ayarlanır. Her dil için ayrı tasarımlar oluşturmanız gerekmez. Mantıksal özellikler kullandığınızda tasarımınız her yazma moduna yanıt verir. Bu sayede, her dil için ayrı tasarımlar yapmaya zaman ayırmanıza gerek kalmadan tasarımınız daha fazla kullanıcıya ulaşabilir.
grid ve flexbox gibi modern CSS düzen teknikleri, varsayılan olarak mantıksal özellikleri kullanır.
left
ve top
yerine inline-start
ve block-start
açısından düşünürseniz bu modern teknikleri daha kolay anlaşılır bulabilirsiniz.
Bir metnin yanındaki simge veya form alanının yanındaki bir etiket gibi yaygın bir deseni alın. "Etiketin sağ tarafında kenar boşluğu olması gerektiğini" düşünmek yerine "etiketin satır içi ekseninin sonunda bir kenar boşluğu olmalıdır" diye düşünün.
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
Bu sayfa sağdan sola doğru bir dile çevrilirse stillerin güncellenmesine gerek yoktur.
html
öğenizde dir
özelliğini kullanarak sayfalarınızı sağdan sola yazılan bir dilde görme efektini taklit edebilirsiniz.
ltr
değeri, "soldan sağa" anlamına gelir. "rtl" değeri, "sağdan sola" anlamına gelir.
Doküman yönlerinin (blok ekseni) ve yazma modlarının (satır içi eksen) tüm permütasyonlarıyla deneme yapmak istiyorsanız etkileşimli gösterimi burada bulabilirsiniz.
Sayfa dilini tanımlama
html
öğesinde lang
özelliğini kullanarak sayfanızın dilini tanımlamak iyi bir fikirdir.
<html lang="en">
Bu örnek, İngilizce dilindeki bir sayfa içindir. Daha da detaya inebilirsiniz. Bir sayfanın ABD İngilizcesi kullandığını şu şekilde beyan edersiniz:
<html lang="en-us">
Dokümanınızın dilini belirtmeniz arama motorları için yararlıdır. Bu özellik, ekran okuyucular ve sesli asistan gibi yardımcı teknolojiler için de kullanışlıdır. Dil meta verilerini sağlayarak bu tür konuşma sentezleyicilerin içeriğinizi doğru telaffuz etmesine yardımcı olursunuz.
lang
özelliği yalnızca html
üzerinde değil, herhangi bir HTML öğesinde kullanılabilir. Web sayfanızda dil değiştirirseniz bu değişikliği belirtin.
Bu örnekte, bir kelime Almancadır:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Bağlantılı bir dokümanın dilini tanımlama
Bağlantılarda kullanabileceğiniz hreflang
adlı başka bir özellik daha var.
hreflang
, lang
özelliğiyle aynı dil kodu gösterimini alır ve bağlantılı dokümanın dilini açıklar.
Sayfanızın tamamının Almanca çevirisi varsa, sayfaya aşağıdaki şekilde bağlantı verin:
<a href="/path/to/german/version" hreflang="de">German version</a>
Almanca sürüm bağlantısını açıklamak için Almanca metin kullanıyorsanız hem hreflang
hem de lang
kullanın.
Burada, "Deutsche Version" metni Almanca, hedef bağlantı da Almanca olarak işaretlenmiştir:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
link
öğesinde hreflang
özelliğini de kullanabilirsiniz. Bu, dokümanınızın head
bölümüne eklenir:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Ancak, herhangi bir öğeye uygulanabilen lang
özelliğinin aksine hreflang
yalnızca a
ve link
öğelerine uygulanabilir.
Tasarımınızda uluslararasılaştırmayı göz önünde bulundurun
Diğer dillere ve yazma modlarına çevrilecek web siteleri tasarlarken şu faktörleri göz önünde bulundurun:
- Almanca gibi bazı dillerde uzun kelimeler yaygın olarak kullanılır. Arayüzünüzün bu kelimelere uyum sağlaması gerektiğinden dar sütunlar tasarlamaktan kaçının. Kısa çizgi eklemek için CSS'yi de kullanabilirsiniz.
line-height
değerlerinin aksan ve diğer aksan işaretleri gibi karakterleri barındırabileceğinden emin olun. İngilizcede güzel görünen metin satırları farklı bir dilde çakışabilir.- Web yazı tipi kullanıyorsanız, çeviri yapacağınız dilleri kapsayacak kadar geniş bir karakter aralığına sahip olduğundan emin olun.
- Metin içeren resimler oluşturmayın. Bunu yaparsanız her dil için ayrı resimler oluşturmanız gerekir. Bunun yerine, metni ve resmi ayırın ve CSS'yi kullanarak metnin üzerine yerleştirin.
Kitlenizi ülkenizle sınırlamayın
lang
ve hreflang
gibi özellikler, HTML'nizi uluslararasılaştırma açısından daha anlamlı hale getirir.
Benzer şekilde, mantıksal özellikler CSS'nizi uyarlanabilir hale getirir.
top
, bottom
, left
ve right
terimlerine alışkınsanız
block start
, block end
, inline start
ve inline end
değişkenlerini düşünmeye başlamak zor olabilir.
Ama buna değer. Mantıksal özellikler, gerçekten duyarlı düzenler oluşturmanın anahtarıdır.
Öğrendiklerinizi sınayın
Uluslararasılaştırma bilginizi test edin.
İngilizcede bir kutunun fiziksel right
tarafı mantıksal olarak hangi kenardır?
block-start
top
block-end
bottom
inline-start
left
inline-end
Uluslararası hale getirme açısından daha anlamlı hale getirmek için HTML'nize hangi özelliği eklemelisiniz?
english
lang
language
i18n
Sonraki bölümde, makro düzenleri olarak da bilinen sayfa düzeyinde düzenlere nasıl yaklaşacağınızı öğreneceksiniz.