Properti fisik seperti margin-kiri mengasumsikan halaman horizontal dari kiri ke kanan. Properti logika mendeskripsikan posisi relatif terhadap mode penulisan, sehingga aturan yang sama dapat disesuaikan dengan bahasa kanan-ke-kiri.

.card {
  margin-inline-start: 1rem;
  padding-block: 1rem;
  border-inline-start: 2px solid currentColor;
}

Pikirkan arah sebaris dan blok

  • inline-start dan inline-end mengikuti arah teks.
  • block-start dan block-end mengikuti aliran blok, biasanya atas dan bawah.
  • Pertahankan properti fisik yang desainnya benar-benar berarti tepi fisik, seperti ikon dengan posisi tetap di peta.

Uji lebih dari sekedar perataan teks

Ganti atribut lang dan dir dokumen dan periksa margin, batas, ikon, dan urutan fokus. CSS logis menangani geometri; itu tidak menerjemahkan label atau memutuskan konten mana yang harus dicerminkan.

Gunakan properti logis untuk komponen yang dapat digunakan kembali dan situs bahasa campuran. Mereka mengurangi penggantian RTL satu kali dan membuat hubungan yang diinginkan menjadi lebih jelas.