Logical Properties — CSS

margin-left, padding-top, border-right — property CSS klasik mengasumsikan tulisan mengalir dari kiri ke kanan, atas ke bawah. Tapi bahasa Arab/Ibrani…

Properti kayak margin-left dan padding-top menunjuk sisi fisik: kiri, kanan, atas, bawah. Logical properties menunjuk sisi berdasarkan arah tulisan: awal baris dan akhir baris. Di halaman bahasa Indonesia hasilnya sama persis, bedanya baru kelihatan kalau arah tulisannya berubah, misalnya bahasa Arab yang ditulis dari kanan ke kiri.

🧪 Tebakan cepat: paragraf punya padding-left: 24px, lalu halamannya diubah jadi bahasa Arab (kanan ke kiri). Jarak 24px-nya pindah ke kanan atau tetap di kiri? Tebak dulu, jawabannya ada di bagian "Physical tetap, logical ikut arah tulisan".

Sisi awal, bukan sisi kiri

p {
  border-inline-start: 4px solid blue;
  padding-inline-start: 24px;
}

inline adalah arah baris teks. Di bahasa Indonesia, dari kiri ke kanan.
start adalah awal arah itu, tempat kalimat dimulai. Di bahasa Indonesia, kiri.
border-inline-start adalah garis di sisi awal baris, di sini biru setebal 4px.
padding-inline-start: 24px adalah jarak 24px di sisi awal baris, antara garis dan teksnya.

Hasilnya, di halaman bahasa Indonesia, paragrafnya punya garis biru dan jarak di kiri, sama kayak kalau ditulis border-left dan padding-left.

Empat kata kunci

inline: arah baris teks (kiri ke kanan di bahasa Indonesia).
block: arah baris-baris bertumpuk, tempat baris baru muncul (atas ke bawah).
start: awal arah itu.
end: akhir arah itu.

Gabungkan jadi nama properti: padding-block-start artinya padding di awal arah block, yaitu atas di halaman biasa. margin-inline-end artinya margin di akhir baris, yaitu kanan di bahasa Indonesia.

Physical tetap, logical ikut arah tulisan

Arah tulisan bisa diubah dua cara:

dir="rtl" di HTML (kanan ke kiri, buat bahasa Arab atau Ibrani). Awal baris pindah ke kanan, jadi padding-inline-start ikut pindah ke kanan.
writing-mode: vertical-rl di CSS (teks tegak, kayak tulisan Jepang tradisional). Baris teks sekarang dari atas ke bawah, jadi awal baris ada di atas.

padding-left gak peduli semua itu, dia tetap di kiri. Jawaban tebakan: jaraknya tetap di kiri, padahal pembaca bahasa Arab mulai membaca dari kanan. Pakai padding-inline-start dan jaraknya otomatis pindah ke kanan.

Padanan yang sering dipakai

Physical	Logical
`margin-left`	`margin-inline-start`
`margin-right`	`margin-inline-end`
`padding-left`	`padding-inline-start`
`padding-top`	`padding-block-start`
`width`	`inline-size`
`height`	`block-size`

Ada juga versi singkatnya: margin-inline: auto mengisi awal dan akhir baris sekaligus (cara biasa menengahkan kotak), dan padding-block: 1rem mengisi atas dan bawah.

⚠️ Jebakan yang sering ketemu

Mengira start selalu kiri. start ikut arah tulisan. Di halaman dir="rtl", start itu kanan.
inline-size dikira selalu lebar. Di writing-mode: vertical-rl, baris teksnya tegak, jadi inline-size jadi tinggi.
Campur physical dan logical buat sisi yang sama. margin-left dan margin-inline-start menimpa sisi yang sama di bahasa Indonesia, tapi sisi yang beda di bahasa Arab. Pilih satu cara dalam satu komponen.

TL;DR: Logical properties menunjuk sisi dari arah tulisan, bukan dari kiri-kanan layar. inline arah baris teks, block arah baris baru, start dan end awal dan akhirnya. margin-left jadi margin-inline-start, padding-left jadi padding-inline-start, width jadi inline-size. Kalau arah tulisan diganti ke rtl atau vertikal, logical ikut pindah, physical tetap di tempatnya.