Yön - CSS Hileleri

Anonim

CSS'deki directionözellik, blok düzeyindeki bir öğe içindeki içerik akışının yönünü ayarlar. Bu, metin, satır içi ve satır içi blok öğeler için geçerlidir. Ayrıca, metnin varsayılan hizalamasını ve tablo hücrelerinin bir tablo satırı içinde aktığı yönü ayarlar.

.main-content ( direction: rtl; /* Right to Left */ )

Geçerli değerler şunlardır:

  • ltr - Soldan Sağa, varsayılan
  • rtl - Sağdan sola
  • inherit - değerini ana öğeden devralır

Bu sayfadaki metin varsayılan ltryönde ayarlanmıştır . Ayarlanacak en yaygın kullanım durumu rtl, İbranice veya Arapça metin içeren web sayfaları içindir. İşte rtl'de geçen bir Arapça örnek:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

Yönü ayarlamak için de bir HTML özelliği vardır:

Hem CSS özelliği hem de HTML niteliği, yönü azalan öğelere basamaklandırır. CSS'nin başarısız olması veya herhangi bir nedenle sayfayı etkilememesi durumunda bile işe yarayacağı için HTML özelliğini kullanmanız önerilir.

Metnin yönünü değiştirmek için kullanılabilecek belirli bir HTML etiketi de vardır: çift ​​yönlü geçersiz kılma öğesi. Bu var, bu nedenle sadece bu amaç için kullanılacak anlambilimden bağımsız bir öğe var. Örneğin:

This text will go left to right. This text will go right to left.

Tüm bunları CSS ile eşleştirmek için…

*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )

"Bidi" = "iki yönlü"

Bir pre-flexbox pre-grid dünyasında düzenler oluştururken, insanlar sütunlar oluşturmak için genellikle float ve inline-block arasında seçim yaparlar. Satır içi bloğun bir avantajı, şamandırayı temizleme ihtiyacını ortadan kaldırmaktan başka, yön özelliğinin değiştirilmesinin düzeni de tersine çevirmesidir. Bu, bir web sayfası birden çok dili destekliyorsa ve dil yönü ltr'den rtl'ye veya tersi yönde değiştirildiğinde sıfırlanması gereken kayan sayılar için geçerli değildir.

Bir satıriçi elemanın yönünü değiştirmeniz gerekiyorsa (üst blok seviyesi elemanının tersine), ya elemanı kullanmanız ya da satıriçi elemanın unicode-bidi özelliğini doğru şekilde ayarlamasını sağlamanız gerekir:

Some regular text reverse direction text text reverse direction
span(dir) ( unicode-bidi: bidi-override; )

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Hiç 9.2+ 5.5+ Hiç 3.1+