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-heightdeğ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-starttopblock-endbottominline-startleftinline-endUluslararası hale getirme açısından daha anlamlı hale getirmek için HTML'nize hangi özelliği eklemelisiniz?
englishlanglanguagei18nSonraki bölümde, makro düzenleri olarak da bilinen sayfa düzeyinde düzenlere nasıl yaklaşacağınızı öğreneceksiniz.