Bu makalemizde özellikle Arapça, Farsça ve İbranice site hazırlayanlar varolan şablonlarını en kısa yoldan çözebilmeleri için yapabileceği en mantıklı CSS ve HTML çözümü direction özelliğni kullanmaktır.
CSS ve HTML’de direction ile sitenin akış yönünü belirleme
Normalde biz dilimizin özelliğinden gelen bir durum olarak normal karşıladığımız için soldan sağa bilgi akışı bize çok normal geliyor ve gelmelide fakat Arapça, Farsça ve İbranice diller için aynı durum geçerli değildir bu diller için tasarlanmış sitelerde bilgi akışı türkçeden olduğunu gibi soldan sağa değilde sağla sola olmaktadır.
CSS’de kullanacağınız bu özelliğin adı direction özelliğidir.
Yapısı : direction:
Aldığı Değerler : ltr | rtl | inherit
Başlangıç değeri: ltr
Kalıtsallık: Var
- ltr : Soldan sağa (left to right)
- rtl: Sağdan sola(right to left)
Yazı akışının soldan sağa doğru değilde sağdan sola doğru olmasını css’in bu özelliği ile sağlayabiliyoruz.
CSS Kodu
1 2 3 | body{ direction:rtl } |
body elemanına vererek tüm siteyi sağdan sola doğru akmasını sağlayabildiğimiz gibi, sadece bir eleman ve içeriğinide sağdan sola doğru akmasını sağlayabiliyoruz.
CSS Kodu
1 2 3 | div#deneme{ direction:rtl } |
HTML tarafında ise direction özelliğini ayarlamak ise çok kolaylık örnek olarak body etiketine dir attribute’ü ekleyerek çok kolay bir şekilde html tarafında sayfanın direction’unu belirtmiş olursunuz örnek olarak şu şekilde ayarlayabilirsiniz html tarafında.
Html Kodu
1 2 3 | <body dir="rtl"> ... </body> |
- Karakter seti olarak utf-8 seçmeliyiz.
- Metinleri değiştirirken resimlerdeki yazıları değiştirmeyi unutmamalıyız.
- Akışı sağdan sola olarak değiştirdiğimizde float:left ve float:right kabullerimiz tam tersi oluyor. float:left’leri float:right; float:right’larıda float:left olarak değiştirmeliyiz.
- Tüm dokümanın sağdan sola olması için body elementine direction:rtl değerini tanımlamamız yeterli.
- Metinlerin hizalaması için kullandığınız değerleri tam tersi olarak değiştirmeliyiz. text-align:left ve text-align:right değerlerini tam tersi olarak değiştirmeliyiz.
- Mesafe değerlerinide tersine çevirmeliyiz. padding, margin değerleri mesela
- Yazı tipi boyutlarını arapça sitede biraz daha büyük seçmemiz daha iyi olacaktır.
