World Wide Web dünyadaki herkes tarafından kullanılabilir. İşte bu kadar! Bu durum, web sitenizin internete erişimi olan herkesin web sitenize erişebileceği anlamına gelir. bulundukları yerden, kullandıkları cihazdan veya konuştukları dilden bağımsız olarak.
Duyarlı tasarımın amacı, içeriğinizi herkesin kullanımına sunmaktır. Dünyaya açılmanın ardındaki itici güç, aynı felsefeyi insan dillerine uygulamaktır. Bu sayede, içeriğinizi ve tasarımlarınızı uluslararası bir kitleye hazırlarsınız.
Mantıksal özellikler
İngilizce soldan sağa ve yukarıdan aşağıya yazılır. ancak tüm diller bu şekilde yazılmaz. Arapça ve İbranice gibi bazı diller sağdan sola doğru okunur. bazı Japonca yazı tipleri yatay değil, dikey olarak okunuyor. Bu yazma modlarını uyumlu hale getirmek için mantıksal özellikler CSS'de kullanıma sunuldu.
CSS yazarsanız "left", "right", "top" ve "bottom" gibi yönlendirici anahtar kelimeler kullanmış olabilirsiniz. Bu anahtar kelimeler, kullanıcının cihazının fiziksel düzenini ifade eder.
Mantıksal özellikler ise bir kutunun kenarlarına değil, içeriğin akışıyla bağlantılı olacaklardır. Yazma modu değişirse mantıksal özelliklerle yazılan CSS de buna göre güncellenir. Yön özellikleri için durum böyle değildir.
margin-left yön özelliği her zaman içerik kutusunun sol tarafındaki kenar boşluğunu ifade eder.
mantıksal özelliği margin-inline-start, soldan sağa yazılan bir içerik kutusunun sol tarafındaki kenar boşluğunu ifade eder.
sağdan sola yazılan bir dilde içerik kutusunun sağ tarafındaki kenar boşluğunu tıklayın.
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
karşılık gelen bir mantıksal özellik bulunur. Önceden margin-left olan yerde şimdi margin-inline-start.
İngilizce gibi metinlerin soldan sağa doğru aktığı
inline-start, "sol"a karşılık gelir inline-end ise "sağ" değerine karşılık gelir.
Aynı şekilde, İngilizce gibi metnin yukarıdan aşağıya yazıldığında,
block-start, "üst"e karşılık gelir block-end ise "alt"a karşılık 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 doğru yazılan dillere çevrilse bile tasarımınız buna göre ayarlanır. Her dil için ayrı tasarımlar yapmanız gerekmez. Mantıksal özellikleri kullanarak tasarımınız her yazma moduna yanıt verir. Bu sayede, her dil için ayrı tasarımlar yapmaya zaman harcamadan daha fazla kullanıcıya ulaşabilirsiniz.
grid ve flexbox gibi modern CSS düzeni 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 hale getirebilirsiniz.
Metnin yanındaki simge veya form alanının yanındaki etiket gibi ortak bir deseni alın. "Etiketin sağ tarafında bir kenar boşluğu olmalı" gibi "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; }
Söz konusu sayfa, sağdan sola doğru bir dile çevrilmişse
stillerin güncellenmesi gerekmez.
html öğenizde dir özelliğini kullanarak sayfalarınızı sağdan sola yazılan bir dilde görme etkisini taklit edebilirsiniz.
ltr değeri, "soldan sağa" anlamına gelir. "rtl" değeri "sağdan sola" anlamına gelir.
Belge yönünün (blok ekseni) ve yazma modlarının (satır içi eksen) tüm permütasyonlarıyla denemeler yapmak etkileşimli bir tanıtım videosunu izleyin.
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 bir sayfa içindir. Daha da spesifik olabilirsiniz. Bir sayfanın ABD İngilizcesi kullandığını şu şekilde beyan edebilirsiniz:
<html lang="en-us">
Dokümanınızın dilini belirtmek arama motorları için kullanışlıdır. Ayrıca ekran okuyucular ve sesli asistanlar gibi yardımcı teknolojiler için de kullanışlıdır. Dil meta verileri sağlayarak bu tür konuşma sentezleyicilerin içeriğinizi doğru telaffuz etmesine yardımcı olursunuz.
lang özelliği yalnızca html ile değil tüm HTML öğelerinde kullanılabilir. Web sayfanızdaki dilleri değiştirirseniz bu değişikliği belirtin.
Bu durumda, bir kelime Almancadır:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
Bağlantılı dokümanın dilini tanımlayın
hreflang adında, bağlantılarda kullanabileceğiniz başka bir özellik daha vardır.
hreflang, lang özelliğiyle aynı dil kodu gösterimini alır ve bağlı dokümanın dilini açıklar.
Sayfanızın tamamının Almanca çevirisi varsa aşağıdaki gibi bağlantı verin:
<a href="/path/to/german/version" hreflang="de">German version</a>
Almanca sürümün bağlantısını tanımlamak için Almanca metin kullanıyorsanız hem hreflang hem de lang kullanın.
Burada, "Deutsche Version" metni, Almanca olarak ve hedef bağlantı Almanca olarak işaretlenmiş:
<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 yazılır:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
Ancak her öğeye gidebilen lang özelliğinden farklı olarak hreflang yalnızca a ve link öğelerine uygulanabilir.
Tasarımınızda uluslararasılaştırmayı göz önünde bulundurun
Diğer dillere çevrilecek web siteleri ve yazma modları tasarlarken aşağıdaki 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ı gerekir, bu nedenle dar sütunlar tasarlamaktan kaçının. Kısa çizgileri eklemek için CSS de kullanabilirsiniz.
line-heightdeğerlerinizin aksan ve diğer aksan işaretleri gibi karakterleri barındırabileceğinden emin olun. İngilizcede düzgün görünen metin satırları farklı bir dilde çakışabilir.- Bir web yazı tipi kullanıyorsanız, yazı tipinin çeviri yapacağınız dilleri kapsayacak kadar geniş bir karakter yelpazesine sahip olduğundan emin olun.
- Metin içeren resimler oluşturmayın. Bunu yaparsanız her dil için ayrı görseller oluşturmanız gerekir. Bunun yerine, metni ve resmi ayırın ve metni resmin üzerine yerleştirmek için CSS'yi kullanın.
Kitlenizi ülkenizle sınırlamayın
lang ve hreflang gibi özellikler HTML'nizi uluslararası hale getirme açısından daha anlamlı hale getirir.
Benzer şekilde, mantıksal özellikler CSS'nizi daha uyumlu hale getirir.
top, bottom, left ve right gibi ifadeler kullanmaya alışkınsanız
bunun yerine block start, block end, inline start ve inline end öğelerini 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 tarafı ifade eder?
block-starttopblock-endbottominline-startleftinline-endUluslararası hale getirme açısından daha anlamlı hale getirmek için HTML'nize hangi özelliği eklemeniz gerekir?
englishlanglanguagei18nArdından, makro düzenleri olarak da bilinen sayfa düzeyinde düzenlere nasıl yaklaşacağınızı öğreneceksiniz.