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-height
değ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-start
inline-start
block-end
inline-end
Uluslararası hale getirme açısından daha anlamlı hale getirmek için HTML'nize hangi özelliği eklemeniz gerekir?
language
i18n
english
lang
Ardından, makro düzenleri olarak da bilinen sayfa düzeyinde düzenlere nasıl yaklaşacağınızı öğreneceksiniz.