Gunakan satu file CSS untuk halaman LTR dan RTL dengan menetapkan arah HTML secara eksplisit, menggunakan properti logis untuk spasi arah, dan menggunakan gap di antara item tata letak. Panduan ini membuat contoh lokal dua halaman yang bisa Anda bandingkan di browser Mac.

Tugasnya adalah membuat komponen kecil yang sama mempertahankan spasi yang diinginkan saat arah inline-nya berubah. Anda memerlukan editor teks biasa dan browser desktop terkini. Contoh ini menggunakan label sintetis dan lingkaran dekoratif, tanpa framework, aset eksternal, atau JavaScript.

Apa yang sebaiknya dikendalikan oleh stylesheet bersama?

Berikan tanggung jawab atas arah kepada HTML dan tanggung jawab atas spasi kepada stylesheet. Kedua halaman memuat sumber CSS yang sama dan menggunakan kelas komponen yang sama; root halaman menetapkan dir="ltr" atau dir="rtl". HTML mendefinisikan rel="stylesheet" sebagai tautan sumber eksternal yang berkontribusi pada gaya dokumen. Standar HTML: tautan stylesheet.

Gunakan HTML dir jika arahnya sudah diketahui. Elemen turunan umumnya mewarisi arah, sedangkan lang tidak menetapkannya. Untuk perbandingan terkontrol ini, pilih arah eksplisit daripada dir="auto": arah otomatis bergantung pada konten dan akan membuat label contoh berhuruf Latin memilih LTR. MDN: atribut dir.

Perbedaan pentingnya adalah antara tepi fisik dan posisi dalam alur konten. Dalam mode penulisan horizontal-tb pada contoh ini, awal inline berarti kiri dalam LTR dan kanan dalam RTL. Awal blok tetap berada di atas. Properti logis mengungkapkan hubungan tersebut secara langsung. MDN: margin, border, dan padding logis.

Spasi yang diinginkan Pilihan CSS bersama Hasil saat arah berubah
Ruang di dalam tepi awal komponen padding-inline-start Berpindah ke sisi fisik yang lain
Ruang di dalam kedua tepi inline padding-inline Menerapkan nilai awal dan akhir dalam arah baru
Ruang di antara item Flexbox gap Mempertahankan jarak antaritem yang ditentukan
Ruang di atas dan di bawah dalam tata letak horizontal ini padding-block Tetap berada di atas dan di bawah
Margin sebelum elemen dalam alur inline margin-inline-start Dipetakan ke sisi awal inline yang baru

Pemetaan margin dan padding mengikuti mode penulisan serta arah elemen. Sebaliknya, gap membuat celah pada kontainer tata letak yang mendukungnya. Keduanya memiliki fungsi berbeda: gunakan padding di sekeliling konten dan gap di antara item bersaudara. MDN: spasi logis, MDN: gap.

Buat dua halaman lokal yang menggunakan satu file CSS

Buat folder bernama spacing-demo di Mac Anda. Simpan file berikut sebagai teks biasa dengan ekstensi yang tepat. Hindari editor yang menambahkan .txt setelah .html atau .css.

spacing-demo/
  ltr.html
  rtl.html
  components.css

Simpan dokumen HTML lengkap berikut sebagai ltr.html. Lalu simpan salinan kedua sebagai rtl.html, dengan hanya mengubah atribut root dari dir="ltr" menjadi dir="rtl". Pertahankan referensi stylesheet dan markup komponen agar tetap identik. Labelnya tetap berbahasa Inggris karena ini adalah perbandingan tata letak sintetis.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Component spacing sample</title>
  <link rel="stylesheet" href="components.css">
</head>
<body>
  <main class="demo">
    <h1>Spacing sample</h1>
    <article class="sample-card">
      <span class="sample-card__shape" aria-hidden="true"></span>
      <div class="sample-card__copy">
        <h2 class="sample-card__title">Module A</h2>
        <p class="sample-card__description">A compact sample tile</p>
      </div>
      <span class="sample-card__tag">Set B</span>
    </article>
  </main>
</body>
</html>

Sekarang simpan stylesheet lengkap berikut sebagai components.css. Padding inline yang sengaja dibuat tidak sama memudahkan Anda memeriksa perubahan arah: inset yang lebih besar seharusnya mengikuti awal inline.

:root {
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #243447;
  background: #f2f5f8;
}

.demo {
  writing-mode: horizontal-tb;
  max-width: 640px;
  margin-inline: auto;
}

.sample-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-medium);
  padding-block: var(--space-medium);
  padding-inline: var(--space-large) var(--space-small);
  border: 1px solid #8594a5;
  border-radius: 12px;
  background: #ffffff;
}

.sample-card__shape {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5477a3;
}

.sample-card__copy {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sample-card__title,
.sample-card__description {
  margin: 0;
}

.sample-card__title {
  font-size: 18px;
}

.sample-card__description {
  margin-block-start: var(--space-small);
}

.sample-card__tag {
  flex: 0 0 auto;
  padding-block: 4px;
  padding-inline: var(--space-small);
  border: 1px solid #8594a5;
  border-radius: 6px;
}

Di sini, padding-inline: 24px 8px berarti padding awal diikuti padding akhir. Ini bukan berarti kiri diikuti kanan. Satu nilai akan diterapkan pada kedua tepi inline. MDN: padding-inline.

Pertahankan flex-direction: row di kedua halaman. Baris Flexbox sudah mengikuti arah kontainernya: alurnya dari kiri ke kanan dalam LTR dan dari kanan ke kiri dalam RTL. Menambahkan row-reverse ke versi RTL akan membalik arah itu lagi. MDN: flex-direction.

Lingkaran netral tidak memiliki makna arah, jadi bentuknya tetap sama sementara posisinya mengikuti baris. Label berhuruf Latin juga mempertahankan urutan hurufnya; contoh ini memeriksa tata letak komponen, bukan teks terjemahan.

Bagaimana cara memastikan bahwa spasinya memang digunakan bersama?

Buka kedua file HTML di browser Mac Anda dan bandingkan pada lebar jendela yang sama. Nilai berikut diharapkan berdasarkan deklarasi, bukan hasil pengukuran browser. Border kartu terpisah dari padding-nya.

Pemeriksaan Halaman LTR Halaman RTL
Posisi lingkaran Item pertama di kiri Item pertama di kanan
Padding kiri kartu 24px 8px
Padding kanan kartu 8px 24px
Gap di antara item Flexbox yang bersebelahan 16px 16px
Padding atas dan bawah kartu 16px 16px
Ruang sebelum deskripsi 8px di atas 8px di atas

Uji penggunaan sumber bersama secara terpisah dari arah. Ubah --space-medium di components.css dari 16px menjadi 20px, simpan, lalu muat ulang kedua halaman. Keduanya seharusnya memiliki gap antaritem dan padding blok yang lebih besar karena deklarasi tersebut merujuk pada variabel yang sama. Kembalikan nilainya ke 16px setelah perbandingan.

Lalu persempit jendela browser dan ganti deskripsi dengan label sintetis yang lebih panjang, seperti Modul A deskripsi contoh yang diperpanjang. Pastikan teks membungkus tanpa menutupi lingkaran atau tag. Ini menambahkan pengujian kedua yang berguna: komponen bisa tercermin dengan benar pada satu lebar, tetapi menjadi sesak pada lebar lainnya.

Jangan menilai setiap jarak yang terlihat hanya dari gap. Margin item, padding internal, dan perataan terdistribusi dapat membuat jarak visual lebih besar daripada celah yang dideklarasikan. Contoh ini mengatur ulang margin teks dan menghindari perataan terdistribusi agar perbandingan mudah dibaca. MDN: deskripsi gap.

Bagaimana cara memigrasikan komponen yang sudah ada tanpa konflik spasi?

Mulailah dengan memahami maksud setiap deklarasi yang ada. Inset teks di sisi awal biasanya sesuai dengan awal inline; tepi fisik yang memang sengaja dipertahankan mungkin tetap memerlukan properti fisik. Lakukan konversi sesuai maksud desain, bukan dengan mengganti setiap kemunculan left secara mekanis.

Untuk komponen seperti contoh ini, ikuti urutan berikut:

  1. Identifikasi leluhur yang menetapkan arah.
  2. Ganti spasi interior yang bergantung pada arah dengan padding logis.
  3. Jika diperlukan, ganti spasi eksterior yang bergantung pada arah dengan margin logis.
  4. Gunakan gap milik induk untuk mengatur spasi biasa di antara item Flexbox, lalu hapus margin yang sebelumnya menyediakan spasi yang sama.
  5. Ulangi perbandingan padding yang tidak sama dan jendela sempit dalam kedua arah.

Periksa deklarasi fisik lama dan shorthand yang muncul belakangan selama migrasi. Properti logis dan fisik yang dipetakan ke sisi yang sama ikut berpartisipasi dalam kaskade; properti logis tidak otomatis menang hanya karena bersifat logis. Deklarasi padding yang muncul belakangan dapat mengatur ulang padding yang sebelumnya ditetapkan melalui properti logis jika faktor kaskade lainnya sama. Properti dan Nilai Logis CSS Level 1: properti model kotak.

Perhatikan juga batas arah. Komponen bersarang dengan dir="ltr" miliknya sendiri harus menggunakan pemetaan LTR meskipun berada di dalam halaman RTL. Sebaliknya, margin-inline sendiri tidak diwariskan, jadi berikan deklarasi spasi yang diperlukan setiap komponen alih-alih berharap margin leluhur berpindah kepadanya. MDN: pewarisan direction, MDN: definisi formal margin-inline.

Batasan browser apa yang memengaruhi pendekatan ini?

MDN menandai padding-inline dan margin-inline sebagai fitur yang tersedia luas di berbagai browser sejak April 2021. Hal ini mendukung penggunaannya di browser desktop terkini, tetapi bukan jaminan untuk setiap browser lama atau setiap sintaks baru yang ditampilkan di halaman referensi tersebut. Contoh ini menggunakan panjang biasa dan auto, tanpa fungsi ukuran yang lebih baru. MDN: padding-inline, MDN: margin-inline.

Flexbox gap memiliki riwayat tersendiri. Safari menambahkannya pada versi 14.1; Grid gap sudah didukung sejak Safari 12. WebKit secara khusus menyebutkan bahwa kueri fitur properti tidak dapat membedakan kedua konteks tersebut, sehingga @supports (gap: 16px) saja tidak cukup untuk mendeteksi dukungan Flexbox gap di Safari lama. WebKit: Fitur WebKit Baru di Safari 14.1.

Jika browser target Anda mendukung margin logis tetapi tidak mendukung Flexbox gap, tambahkan fragmen pengganti ini setelah aturan stylesheet utama. Fragmen ini menyediakan spasi untuk komponen satu baris khusus ini. Gunakan fragmen ini sebagai pengganti spasi gap aktif, seperti yang ditunjukkan; ini bukan solusi umum untuk baris yang membungkus.

/* Optional single-row replacement for Flexbox gap. */
.sample-card {
  gap: 0;
}

.sample-card > * + * {
  margin-inline-start: var(--space-medium);
}

Fallback ini tidak memadai untuk browser yang juga tidak memiliki properti logis. Gunakan browser terkini untuk tugas lokal ini, atau tulis dan uji aturan LTR dan RTL fisik yang eksplisit untuk target lama. Pisahkan keputusan khusus browser tersebut dari desain utama stylesheet bersama.

Perbandingan yang selesai seharusnya menunjukkan satu aturan yang konsisten: HTML menetapkan arah, CSS bersama menetapkan spasi, dan inset awal komponen mengikuti awal inline. Pertahankan kedua halaman lokal sebagai contoh uji regresi ringkas setiap kali Anda mengubah spasi atau tata letak komponen.

Sumber