Arah - Trik CSS

Anonim

The directionharta di CSS menetapkan arah aliran kandungan dalam elemen blok-peringkat. Ini berlaku untuk elemen teks, sebaris, dan blok sebaris. Ini juga menetapkan penjajaran lalai teks dan arah sel sel mengalir dalam baris jadual.

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

Nilai yang sah adalah:

  • ltr - Kiri ke Kanan, lalai
  • rtl - Kanan ke kiri
  • inherit - mewarisi nilainya dari elemen induk

Teks di halaman ini ditetapkan ke ltrarah lalai . Casing penggunaan yang paling biasa untuk ditetapkan rtladalah untuk laman web dengan teks Ibrani atau Arab. Berikut adalah contoh set bahasa Arab dalam rtl:

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

Terdapat atribut HTML untuk menetapkan arah juga:

Kedua-dua sifat CSS dan atribut HTML akan merangkum arah ke elemen keturunan. Sebaiknya gunakan atribut HTML, kerana itu akan berfungsi walaupun CSS gagal atau tidak mempengaruhi halaman dengan alasan apa pun.

Terdapat juga tag HTML tertentu yang dapat digunakan untuk mengubah arah teks: elemen penunjuk arah dua arah. Ini wujud sehingga ada unsur bebas semantik untuk digunakan hanya untuk tujuan ini. Contohnya:

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

Untuk memasangkan semua ini dengan CSS ...

*(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” = “dua arah”

Semasa membuat susun atur di dunia pra-grid kotak pra-fleksibel, orang sering memilih antara terapung dan blok sebaris untuk membuat lajur. Salah satu kelebihan untuk menyekat sebaris, selain menghilangkan keperluan untuk membersihkan pelampung, adalah bahawa mengubah arah arah membalikkan susun atur juga. Ini tidak benar untuk apungan, yang perlu diset semula jika halaman web menyokong pelbagai bahasa dan arah bahasa diubah dari ltr ke rtl atau sebaliknya.

Sekiranya anda perlu mengubah arah elemen sebaris (berbanding dengan elemen tahap blok induknya), anda perlu menggunakan elemen tersebut, atau memastikan elemen sebaris menetapkan harta unicode-bidi dengan betul:

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

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Sebarang 9.2+ 5.5+ Sebarang 3.1+