Tasarımlarınızı uluslararası bir izleyici kitlesi için hazırlayın.

Çok dilli sitelerle çalışırken, öğelerimizi yazma modu, yönlülük ve metin yönüne göre ayarlamamız gerekir .

Metin hizalama -

Birçok dilde metinler İngilizce'deki gibi LTR'den (Soldan Sağa) çalışır , ancak birçok dilde metinler Fransızca gibi RTL'den (Sağdan Sola) da çalışır . Bu nedenle, uygulamanız her iki dilde de çalışıyorsa, metin hizalamanızı uygulamanızın tarayıcıda çalıştığı dile göre ayarlamanız gerekir.

suppose we have added text-align: right; then for English Lang it will wotk correctly. but for French we have to apply text-align: left; for same Element. because English works as LTR and French works as RTL.
So using only 1 property which can work text-align: right; for LTR and text-align: left; for RTL. that will overcome line of code and customization as per lang.
So for maintaining this, css provides some text-alignment properties which should be used for multilingual sites.

.alignRight{
  text-align: right;
}
.alignLeft{
  text-align: left;
}

.alignRight{
  text-align: end;
}
.alignLeft{
  text-align: start;
}

Bu özellikler, margin-top, margin-bottom, margin-left ve margin-right özelliklerine karşılık gelir. Eşleme, öğenin yazma moduna, yönüne ve metin yönüne bağlıdır.

Sorun - yazma modunu dikey-lr'den dikey-rl'ye veya tam tersi olarak değiştirdiğimizde, bu özellikler tam tersi şekilde çalışmalıdır . Ex margin-top , yazma modu değişikliğinde margin-bottom olarak çalışmalıdır . Ancak bu davranışı elde etmek için yazma moduna göre 2 kez CSS yazmamız gerekiyor. Ancak CSS ayrıca, CSS'yi yalnızca 1 kez yazmamız gereken ve yazma modu değiştiğinde herhangi bir ayarlamaya ihtiyacımız olmayan özellikler de sağlar. otomatik olarak başka bir şekilde davranmaya başlayacaktır.

yapma

.margin-top{
  margin-top: 10px;
}
.margin-bottom{
   margin-bottom: 10px;
}
.margin-left{
  margin-left: 10px;
}
.margin-right{
  margin-right: 10px;
}

.margin-top{
  margin-block-start: 10px;
}
.margin-bottom{
  margin-block-end: 10px;
}
.margin-left{
 margin-inline-start: 10px;
}
.margin-right{
  margin-inline-end: 10px;
}

margin-block-start = margin-left
margin-block-end = margin-right
margin-inline-start = margin-top 
margin-inline-end = margin-bottom

margin-block-start = margin-right
margin-block-end = margin-left
margin-inline-start = margin-top 
margin-inline-end = margin-bottom

Web'deki metin içeriğinin dilini tanımlamak için kullanılır. Bu bilgi, arama motorlarının dile özgü sonuçlar döndürmesine yardımcı olur ve ayrıca doğru aksan ve telaffuz sağlamak için dil profillerini değiştiren ekran okuyucular tarafından da kullanılır.

yapma

<html>

<html lang="en">
Even more specific
<html lang="en-us">

use "hreflang" attribute if linked page is in other lang
<a href="/path/to/german/version" hreflang="de">German version</a>

if link text is also in other "lang" then define lang attribute too
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>