CSS: Right to Left Kullanımı Hakkında
Merhaba 😊Bu yazımda CSS ile çalışırken RTL (Right to Left) konusunda dikkat etmeniz gereken bazı şeyleri paylaşacağım.
Varsayılan olarak direction LTR (Left to Right) olur.
Eğer bunu tüm uygulama seviyesinde değiştirmek isterseniz html tagını kullanabilirsiniz.
Tavsiye:
Rtl hakkındaki en detaylı yazıya buradan ulaşabilirsiniz: https://rtlstyling.com/posts/rtl-styling (Kesin bakın)
<html dir =’rtl’>…
Bunu yapmanız hem bundan sonra uygulamanızı sağdan başlatacak hemde semantik anlamda botlar da bunun sağdan başlayan bir olduğunu bilebilecek.
Eğer sadece spesifik bir elementi sağdan başlatmak isterseniz dir=’’ özelliğini her hangi bir element için de kullanabilirsiniz.
<button dir=’rtl’>hello</button>
<p>hello</p>
CSS ve RTL Desteği
Aslında dir propertysini kullandıktan sonra ve logical propetyler ile çalışırsanız çok fazla bir şey yapmanıza gerek kalmıyor neredeyse bir çok css özelliği rtl varsayılan olarak destekliyor mesela:
Burada wrapperimizin displayi flex. Eğer biz dir özelliğini rtl olarak değiştirirsek otomatik olarak.
Sağdan hizalanmaya başlayacak. Fakat yaptığınız absolute positioninglerde bu geçerli olmayabilir.
CSS ile Dir Style
html[dir=”rtl”] {…}
Logical Properties
Az önce yukarıda söylediğim gibi kesinlikle logical propertyleri kullanmanızı tavsiye ederim uygulamanızda rtl olmasa bile belki gelecekte olabilir ve her modern tarayıcı destekliyor. Logical properylere bir örnek:
Block ve Inline elementler
Mesela:
padding-inline-start: 1rem veya padding-inline-end: 1rem
padding-inline-start = padding-left
padding-inline-end = padding right
Gibi düşünebilirsiniz fakat biz rtl moduna geçtiğimizde eğer padding-left kullanıyorsak hala soldan boşluk vermeye devam edeceğiz fakat bizim boşluğu sağdan vermemiz gerek. İşte eğer inline elementleri kullanırsak otomatik olarak directiona göre boşluğu vermiş oluruz.
Logical elementler için lütfen bu yazıya bakın: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
İkonlar
Dikkat etmeniz gereken en önemli şeylerden birisi de kullandığınız ikonlar. İkonları yerine göre ters çevirmeniz gerekebilir. Mesela
.icon[dir=”rtl”] {
transform: scale(-1);
}
Kullandığımız bir ikonu bu şekilde terse çevirebiliriz örnek: Bu RTL hali
Bu ise:
Bu da varsayılan hali
Absolute Positioning
Eğer kullandığınız bir left propertysi varsa RTL modunda onun sağdan başladığına emin olun. Örnek:
.box[dir=”ltr”] { left: 0; }
.box[dir=”rtl”] {
right: 0;
left: initial; /* Eğer ltr kontrolü yapmadıysanız lefti sıfırlayın */
}
Değiştirilmesi gerekebilecek şeyler
- RTL modunda RTL için oluşturulmuş özel bir font deneyebilirsiniz.
- Letter spacing kullanmak okunabilirliği düşürebilir. RTL kodunda letter spacing kullanmamaya çalışın. Aynı şekilde line heightlere de dikkat edin.
Bu yazımda size tecrübe ettiğim bazı dikkat etmeniz gereken şeyleri paylaştım okuduğunuz için teşekkürler.
