Properti fisik mengkodekan arah pembacaan ke dalam stylesheet Anda: margin-kiri, padding-kanan, perataan teks ke kiri. Saat lokal kanan-ke-kiri ada, setiap aturan tersebut memerlukan cerminannya. Properti logis menghadapkan kembali tata letak ke arah, bukan ke tepi, dan browser melakukan pencerminan.

.card {
  margin-block-start: 1rem;   /* was margin-top */
  padding-inline: 1rem;       /* was padding-left/right */
  border-inline-start: 4px solid var(--brand); /* was border-left */
  text-align: start;          /* was text-align: left */
}

Kamus yang sebenarnya Anda gunakan

  • atas dan bawah menjadi blok-awal dan blok-akhir: sumbu aliran pembacaan.
  • kiri dan kanan menjadi inline-start dan inline-end: sumbu garis, yang membalik sesuai arah.
  • Pasangan penciutan singkatan: margin-inline, padding-block, inset-block, dan border-inline-start.
  • Pengukuran tetap menggunakan namanya sampai Anda beralih: lebar dan tinggi tetap, sehingga migrasi harus dilakukan secara bertahap.

Resep adopsi untuk proyek nyata

  1. Mulailah dengan aturan baru saja; tulis setiap komponen baru dalam istilah logis sejak hari pertama.
  2. Konversi tata letak bersama dalam gelombang: header, kartu, daftar; uji satu string RTL Arab atau Ibrani yang aneh melalui halaman sebagai pemeriksaan realitas meskipun Anda tidak mengirimkan lokal seperti itu.
  3. Tinggalkan padanan fisik di bagian warisan sampai muncul ke permukaan; kode yang akan ditulis ulang tidak sebanding dengan gelombang konversi
  4. Simpan satu komentar pemetaan di bagian atas stylesheet; pemetaannya singkat dan menyimpan setiap kontributor baru.

Situs ini mengirimkan empat lokal, dan stylesheet-nya sudah berpikir dalam arah inline dan blok, yang menjadikan lokal RTL sebagai pekerjaan sore hari daripada menulis ulang keseluruhan stylesheet. Imbalannya yang sangat gacor adalah stylesheet yang menjelaskan urutan pembacaan, bukan tepi layar.