Logical Properties

Properti yang telah kita pakai selama ini bernama dari sisi fisik layar: margin-left menunjuk kiri, padding-top menunjuk atas. Pendekatan itu berjalan baik selama teks selalu mengalir dari kiri ke kanan — tetapi langsung bermasalah ketika halaman memuat bahasa Arab atau Ibrani yang mengalir dari kanan ke kiri, dan layout-nya seharusnya ikut bercermin. CSS Logical Properties menawarkan penamaan berdasarkan alur teks: inline mengikuti arah aliran huruf, dan block mengikuti arah susunan baris. Chapter ini memetakan properti lama ke properti logis, lalu membuktikan perilakunya pada konteks LTR dan RTL.

Dari Properti Fisik ke Properti Logis #

Pada penulisan horizontal normal (LTR), properti logis dan fisik menunjuk sisi yang sama. Perbedaannya baru terlihat ketika arah teks berubah: margin-inline-start menunjuk kiri pada dokumen LTR, tetapi menunjuk kanan pada dokumen RTL — tanpa satu pun aturan perlu ditulis ulang. Pemetaan lengkap untuk konteks horizontal tersedia pada MDN: CSS Logical Properties and Values :

Dua kata kunci di nama properti logis: inline merujuk sumbu aliran teks (kiri–kanan pada tulisan horizontal), dan block merujuk sumbu susunan baris (atas–bawah). Properti seperti margin-inline dan padding-block menjadi bentuk singkat yang mengatur kedua sisi sekaligus, serupa margin: 0 8px. Mode penulisan vertikal melalui writing-mode juga didukung secara alami karena sumbu inline dan block ikut berputar.

Keluarga properti logis tidak berhenti di margin dan padding. Radius sudut punya varian logis seperti border-start-start-radius, teks perataan memakai kata kunci start dan end alih-alih left dan right, dan inset-inline-start menggantikan left pada elemen ber-position. Dengan cakupan selengkap itu, sebuah komponen dapat ditulis sepenuhnya tanpa menyebut satu pun sisi fisik layar — satu stylesheet untuk seluruh bahasa, tanpa cabang khusus RTL.

Dukungan browser untuk keluarga properti logis telah matang dan merata di seluruh browser utama, sehingga kita tidak memerlukan fallback khusus untuk memakainya pada komponen baru. Kode lama yang masih memakai properti fisik pun dapat hidup berdampingan; keduanya menulis ke kotak yang sama, hanya dengan cara merujuk sisi yang berbeda.

Demo dan Dukungan RTL #

Demo berikut menata kartu sepenuhnya dengan properti logis, lalu membandingkannya dengan panel RTL:

.kartu {
  inline-size: 220px;
  padding-inline-start: 24px;
  padding-block-start: 16px;
  margin-inline-start: 32px;
  border-inline-start: 4px solid rgb(2, 132, 199);
}
.panel-rtl {
  direction: rtl;
  padding-inline-start: 24px;
  border-inline-start: 4px solid rgb(220, 38, 38);
}

Mari kita telaah baris demi baris:

1. Baris 1–6 (.kartu): inline-size: 220px setara width pada tulisan horizontal; padding dan margin logis menunjuk sisi awal inline (kiri pada LTR); garis tepi logis ditarik di sisi yang sama.
2. Baris 7–11 (.panel-rtl): atribut direction: rtl membalik arah inline panel. Nilai padding-inline-start: 24px tetap 24px, tetapi kini padding itu berada di sisi kanan — tidak ada nilai yang diubah, hanya rujukan arahnya.

Hasil di Browser:

Kartu tampil selebar 220px (inline-size memetakan ke width pada
tulisan horizontal) dengan padding sisi awal 24px, padding blok
atas 16px, margin sisi awal 32px, dan garis tepi awal 4px biru —
semuanya di sisi kiri karena halaman LTR.
Pada panel RTL, padding-inline-start tetap terbaca 24px, tetapi
padding dan garis tepi merahnya berpindah ke sisi kanan.

Enam nilai di atas terverifikasi otomatis: elemen demo membawa penanda data-expected untuk width, padding-inline-start, padding-block-start, margin-inline-start, dan border-inline-start-width, yang diperiksa harness Course pada headless browser. Ketika kita membangun komponen yang mungkin tampil dalam bahasa dua arah, memilih properti logis sejak awal membuat dukungan RTL menjadi gratis.

.kartu {
  inline-size: 220px;
  padding-inline-start: 24px;
  padding-block-start: 16px;
  margin-inline-start: 32px;
  border-inline-start: 4px solid rgb(2, 132, 199);
}
.panel-rtl {
  direction: rtl;
  padding-inline-start: 24px;
  border-inline-start: 4px solid rgb(220, 38, 38);
}