Arah - Trik CSS

Anonim

The directionproperti di CSS menetapkan arah aliran konten dalam elemen blok-tingkat. Ini berlaku untuk elemen teks, sebaris, dan blok sebaris. Ini juga mengatur perataan teks default dan arah aliran sel tabel dalam baris tabel.

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

Nilai yang valid adalah:

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

Teks di halaman ini disetel ke ltrarah default . Kasus penggunaan yang paling umum untuk disetel rtladalah untuk halaman web dengan teks Ibrani atau Arab. Berikut adalah contoh set bahasa Arab di rtl:

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

Ada juga atribut HTML untuk mengatur arah:

Baik properti CSS dan atribut HTML akan mengalirkan arah ke elemen turunan. Anda disarankan untuk menggunakan atribut HTML, karena itu akan berfungsi meskipun CSS gagal atau tidak memengaruhi halaman karena alasan apa pun.

Ada juga tag HTML khusus yang dapat digunakan untuk mengubah arah teks: elemen penggantian dua arah. Ini ada sehingga ada elemen bebas semantik yang dapat digunakan hanya untuk tujuan ini. Contohnya:

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

Untuk menyandingkan 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”

Saat membuat tata letak di dunia pra-flexbox pra-grid, orang sering memilih antara float dan inline-block untuk membuat kolom. Satu keuntungan dari blok-sebaris, selain menghilangkan kebutuhan untuk menghapus pelampung, adalah bahwa mengubah properti arah akan membalikkan tata letak juga. Ini tidak benar untuk float, yang perlu diatur ulang jika halaman web mendukung banyak bahasa dan arah bahasa berubah dari ltr ke rtl atau sebaliknya.

Jika Anda perlu mengubah arah elemen sebaris (terhadap apa elemen tingkat blok induknya), Anda harus menggunakan elemen tersebut, atau memastikan elemen sebaris menyetel properti unicode-bidi dengan benar:

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

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
2.0+ 1.3+ Apa saja 9.2+ 5.5+ Apa saja 3.1+