Logical property dan RTL

Properti logis menyatakan tepi dan jarak mengikuti arah baca dan arah susun dokumen, sedangkan properti fisik selalu mengacu pada sisi layar yang tetap. Topik ini membahas perbandingan keduanya, tabel pemetaan properti utamanya, properti direction beserta atribut dir pada HTML, pemosisian dengan inset logis, serta manfaat satu stylesheet untuk tata letak yang aman bagi bahasa right-to-left (RTL). Setelah topik ini dibaca, komponen dapat ditulis sekali dan tampil benar pada dokumen yang arah bacanya berlawanan.

Properti fisik melawan properti logis#

Properti fisik seperti margin-left dan padding-top menunjuk sisi layar secara tetap, sehingga nilainya tidak berubah meskipun arah baca dokumen berpaling. Pada dokumen RTL, margin-left yang dimaksudkan sebagai jarak awal justru muncul pada sisi akhir bacaan. Properti logis menyelesaikannya dengan menunjuk sumbu, yaitu sumbu inline yang mengikuti arah baca dan sumbu blok yang mengikuti arah susun elemen.

Kata start dan end menggantikan kata kiri dan kanan pada nama propertinya. Properti margin-inline-start menunjuk jarak pada sisi awal arah baca, yang menjadi kiri pada dokumen LTR (left-to-right) dan kanan pada dokumen RTL. Diagram berikut menyandingkan penamaan fisik dengan penamaan logis pada elemen yang sama.

Sumbu blok juga dipengaruhi arah penulisan. Pada tulisan horizontal, blok tersusun dari atas ke bawah, sedangkan pada tulisan vertikal susunannya mengikuti mode penulisannya. Karena penamaannya mengikuti sumbu dan bukan sisi layar, properti logis tetap benar pada writing-mode apa pun tanpa deklarasi tambahan.

Tabel pemetaan properti#

Pemetaan dari properti fisik ke properti logis mengikuti pola yang tetap, yaitu sumbu menentukan awalan dan sisi menentukan akhirannya. Tabel berikut menghimpun padanan yang paling sering digunakan. Properti fisik tetap sah dan tidak dihapus, sehingga keduanya dapat berdampingan selama masa peralihan kode.

Nilai start dan end pada text-align menggantikan nilai left dan right karena keduanya mengikuti arah baca, sehingga deklarasi text-align: start berarti rata awal pada arah mana pun. Kata inset pada padanan properti pemosisian menyatakan jarak dari tepi kotak penampungnya. Bentuk pendek seperti inset-inline dapat digunakan apabila kedua sisi sumbu tersebut bernilai sama.

direction dan atribut dir#

Properti direction menetapkan arah alir teks dan elemen inline pada suatu blok, dengan nilai ltr sebagai bawaan dan rtl untuk arah kanan ke kiri. Properti ini diwariskan ke keturunannya, sehingga satu deklarasi pada elemen html mengatur arah seluruh dokumen. Seluruh properti logis membaca nilai direction saat menghitung sisi start dan end-nya.

.blok-rtl {
  direction: rtl;
  text-align: start;
}

Untuk dokumen yang arahnya menetap, atribut dir pada HTML lebih dianjurkan daripada properti direction pada CSS. Atribut ini berlaku sejak awal proses render dan ikut memengaruhi perilaku browser di luar CSS, misalnya arah seleksi teks dan penempatan tanda baca pada teks campuran. CSS tetap berguna untuk blok yang arahnya berbeda dari dokumennya, misalnya kutipan berbahasa asing di dalam halaman LTR.

Nilai dir="rtl" pada elemen akar membalik sumbu inline dokumen, dan seluruh properti logis pada halaman menyesuaikan tanpa perubahan apa pun pada deklarasinya. Komponen yang dibangun dengan properti logis pun ikut berpaling mengikuti konteksnya. Perilaku inilah fondasi tata letak yang aman bagi RTL.

Pemosisian dengan inset logis#

Properti fisik paling sering gagal pada pemosisian mutlak di dokumen RTL. Deklarasi left: 8px menempelkan elemen pada sisi kiri penampung pada arah mana pun, sedangkan maksud penulisnya biasanya sisi awal bacaan. Properti inset logis menyelesaikan perbedaan tersebut karena sisi start-nya berpindah mengikuti direction.

.kartu {
  position: relative;
}

.lencana {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: 8px;
}

Pada contoh di atas, lencana menempel di sisi kiri kartu pada dokumen LTR dan berpindah ke sisi kanan pada dokumen RTL tanpa satu aturan tambahan. Pergeseran itu terjadi karena inset-inline-start dihitung dari sisi awal sumbu inline penampungnya. Pola yang sama berlaku pada elemen dengan position: absolute maupun position: fixed.

Pemosisian logis juga menghilangkan kebutuhan aturan khusus RTL yang dulu ditulis dengan selector [dir="rtl"]. Setiap aturan penggantian semacam itu merupakan titik yang mudah terlupa ketika desain berubah. Menuliskannya sekali dengan properti logis menghilangkan titik rawan tersebut sejak awal.

Satu stylesheet untuk dua arah#

Manfaat terbesar properti logis adalah satu stylesheet yang melayani dokumen LTR dan RTL sekaligus. Tanpa properti logis, setiap margin, padding, pemosisian, dan perataan perlu diduplikasi di bawah selector [dir="rtl"], dan jumlah duplikasinya bertumbuh mengikuti jumlah komponen. Dengan properti logis, duplikasi tersebut tidak pernah tercipta.

Rancangan komponen ikut mempermudah pembalikan arah. Jarak yang simetris seperti gap pada flexbox dan grid tidak perlu disentuh, sedangkan jarak yang asimetris dinyatakan dengan margin-inline-start beserta padanannya. Perataan menggunakan text-align: start dan end, dan lebar tetap dapat menggunakan inline-size agar konsisten dengan penamaan lainnya.

Langkah peralihan pada proyek yang sudah berjalan tidak harus dilakukan sekaligus. Properti fisik dan logis dapat berdampingan sementara, dan penggantian dilakukan per komponen saat komponen tersebut disentuh. Prioritas penggantian diberikan pada komponen yang tampil pada dokumen dua arah, karena beban duplikasinya paling terasa pada komponen tersebut.

Ringkasan#

• Properti logis menunjuk sumbu inline dan blok beserta sisi start dan end-nya, sedangkan properti fisik menunjuk sisi layar yang tetap.
• direction: rtl membalik sumbu inline, dan atribut dir pada HTML dianjurkan untuk dokumen yang arahnya menetap.
• Inset logis seperti inset-inline-start menjadikan pemosisian mutlak ikut berpaling mengikuti arah baca.
• Satu stylesheet berbasis properti logis melayani dokumen LTR dan RTL tanpa aturan duplikat.

Referensi#

• CSS logical properties and values — MDN — Ikhtisar resmi properti logis beserta pemetaan sumbu inline dan bloknya.
• direction — MDN — Dokumentasi properti direction dan kaitannya dengan atribut dir pada HTML.