Kongsi satu fail CSS antara halaman LTR dan RTL dengan menetapkan arah HTML secara eksplisit, menggunakan sifat logik untuk jarak berarah, dan menggunakan gap antara item susun atur. Panduan ini membina contoh dua halaman setempat yang boleh anda bandingkan dalam pelayar Mac.

Tugasnya ialah memastikan komponen kecil yang sama mengekalkan jarak yang dikehendaki apabila arah sebarisnya berubah. Anda memerlukan editor teks biasa dan pelayar desktop terkini. Contoh ini menggunakan label sintetik dan bulatan hiasan, tanpa rangka kerja, aset luaran atau JavaScript.

Apakah yang patut dikawal oleh helaian gaya kongsi?

Berikan tanggungjawab arah kepada HTML dan tanggungjawab jarak kepada helaian gaya. Kedua-dua halaman memuatkan sumber CSS yang sama dan menggunakan kelas komponen yang sama; akar halaman menetapkan sama ada dir="ltr" atau dir="rtl". HTML mentakrifkan rel="stylesheet" sebagai pautan sumber luaran yang menyumbang kepada penggayaan dokumen. Piawaian HTML: pautan helaian gaya.

Gunakan HTML dir apabila arah diketahui. Unsur keturunan biasanya mewarisi arah, manakala lang tidak menetapkannya. Utamakan arah yang dinyatakan secara eksplisit berbanding dir="auto" untuk perbandingan terkawal ini: arah automatik bergantung pada kandungan dan akan menyebabkan label sampel berhuruf Latin memilih LTR. MDN: atribut dir.

Perbezaan yang berguna ialah antara tepi fizikal dengan kedudukan dalam aliran kandungan. Dalam mod penulisan horizontal-tb contoh ini, permulaan sebaris bermaksud kiri dalam LTR dan kanan dalam RTL. Permulaan blok kekal di atas. Sifat logik menyatakan hubungan itu secara langsung. MDN: margin, sempadan dan padding logik.

Jarak yang dikehendaki Pilihan CSS kongsi Hasil apabila arah berubah
Ruang di dalam tepi hadapan komponen padding-inline-start Beralih ke sisi fizikal yang satu lagi
Ruang di dalam kedua-dua tepi sebaris padding-inline Menggunakan nilai permulaan dan pengakhiran mengikut arah baharu
Ruang antara item Flexbox gap Mengekalkan jarak antara item yang ditetapkan
Ruang di atas dan di bawah dalam susun atur mendatar ini padding-block Kekal di atas dan di bawah
Margin sebelum unsur dalam aliran sebaris margin-inline-start Dipetakan ke sisi permulaan sebaris yang baharu

Pemetaan margin dan padding mengikut mod penulisan dan arah unsur. gap pula mewujudkan ruang sela dalam bekas susun atur yang disokong. Kedua-duanya tugas berasingan: gunakan padding di sekeliling kandungan dan jarak antara unsur adik-beradik. MDN: jarak logik, MDN: gap.

Bina dua halaman setempat yang menggunakan satu fail CSS

Cipta folder bernama spacing-demo pada Mac anda. Simpan fail berikut sebagai teks biasa dengan sambungan yang tepat. Elakkan editor yang menambah .txt selepas .html atau .css.

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

Simpan dokumen HTML lengkap ini sebagai ltr.html. Kemudian simpan salinan kedua sebagai rtl.html, dengan hanya menukar atribut akar daripada dir="ltr" kepada dir="rtl". Kekalkan rujukan helaian gaya dan penanda komponen yang sama. Label kekal dalam bahasa Inggeris kerana ini perbandingan susun atur sintetik.

<!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 helaian gaya lengkap berikut sebagai components.css. Padding sebaris yang sengaja tidak sama besar memudahkan anda memeriksa perubahan arah: ruang dalam yang lebih besar sepatutnya mengikuti permulaan sebaris.

: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 bermaksud padding permulaan diikuti padding pengakhiran. Ia tidak bermaksud kiri diikuti kanan. Satu nilai sahaja akan digunakan pada kedua-dua tepi sebaris. MDN: padding-inline.

Kekalkan flex-direction: row pada kedua-dua halaman. Baris Flexbox sudah mengikut arah bekasnya: bergerak dari kiri ke kanan dalam LTR dan dari kanan ke kiri dalam RTL. Menambah row-reverse pada versi RTL akan membalikkan arah itu sekali lagi. MDN: flex-direction.

Bulatan neutral itu tidak mempunyai makna berarah, jadi lukisannya kekal sama sementara kedudukannya mengikut baris. Label berhuruf Latin juga mengekalkan susunan hurufnya; contoh ini menguji susun atur komponen, bukannya teks terjemahan.

Bagaimanakah anda mengesahkan bahawa jarak benar-benar dikongsi?

Buka kedua-dua fail HTML dalam pelayar Mac anda dan bandingkannya pada lebar tetingkap yang sama. Nilai berikut dijangka berdasarkan pengisytiharan, bukannya ukuran pelayar yang dilaporkan. Sempadan kad berasingan daripada paddingnya.

Semakan Halaman LTR Halaman RTL
Kedudukan bulatan Item pertama di kiri Item pertama di kanan
Padding kiri kad 24px 8px
Padding kanan kad 8px 24px
Jarak antara item flex yang bersebelahan 16px 16px
Padding atas dan bawah kad 16px 16px
Ruang sebelum huraian 8px di atas 8px di atas

Uji perkongsian sumber secara berasingan daripada arah. Tukar --space-medium dalam components.css daripada 16px kepada 20px, simpan dan muat semula kedua-dua halaman. Kedua-duanya sepatutnya mempunyai jarak antara item dan padding blok yang lebih besar kerana pengisytiharan tersebut merujuk kepada pemboleh ubah yang sama. Pulihkan nilai 16px selepas perbandingan.

Kemudian kecilkan lebar tetingkap pelayar dan gantikan huraian dengan label sintetik yang lebih panjang, seperti Module A extended sample description. Periksa sama ada teks membalut tanpa menutupi bulatan atau tag. Ini menambah ujian kedua yang berguna: komponen boleh dicerminkan dengan betul pada satu lebar tetapi menjadi sempit pada lebar yang lain.

Jangan menilai setiap jarak yang kelihatan berdasarkan gap sahaja. Margin item, padding dalaman dan penjajaran teragih boleh menjadikan jarak yang kelihatan lebih besar daripada ruang sela yang diisytiharkan. Sampel ini menetapkan semula margin teks dan mengelakkan penjajaran teragih supaya perbandingan kekal jelas. MDN: huraian gap.

Bagaimanakah anda memindahkan komponen sedia ada tanpa konflik jarak?

Mulakan dengan memahami maksud setiap pengisytiharan sedia ada. Ruang dalam sebelum teks biasanya merujuk kepada permulaan sebaris; tepi fizikal yang sengaja ditetapkan mungkin masih memerlukan sifat fizikal. Tukar mengikut tujuan reka bentuk, bukannya menggantikan setiap kemunculan left secara mekanikal.

Untuk komponen seperti sampel ini, ikut urutan berikut:

  1. Kenal pasti leluhur yang menetapkan arah.
  2. Gantikan jarak dalaman berarah dengan padding logik.
  3. Gantikan jarak luaran berarah dengan margin logik jika perlu.
  4. Gunakan gap induk untuk jarak biasa antara item flex dan buang margin yang sebelum ini menyediakan ruang yang sama.
  5. Ulang perbandingan padding tidak sama besar dan tetingkap sempit dalam kedua-dua arah.

Semasa pemindahan, semak pengisytiharan fizikal lama dan pintasan yang muncul kemudian. Sifat logik dan fizikal yang dipetakan ke sisi yang sama mengambil bahagian dalam lata bersama-sama; sifat logik tidak menang secara automatik hanya kerana ia bersifat logik. Pengisytiharan padding yang muncul kemudian boleh menetapkan semula padding yang sebelumnya diberikan melalui sifat logik jika faktor lata yang lain sama. Sifat dan Nilai Logik CSS Tahap 1: sifat model kotak.

Ingat juga sempadan arah. Komponen bersarang dengan dir="ltr" tersendiri patut menggunakan pemetaan LTR walaupun berada dalam halaman RTL. Sebaliknya, margin-inline sendiri tidak diwarisi, jadi berikan setiap komponen pengisytiharan jarak yang diperlukan dan jangan mengharapkan margin leluhur berpindah kepadanya. MDN: pewarisan arah, MDN: takrif rasmi margin-inline.

Had pelayar manakah yang mempengaruhi pendekatan ini?

MDN menandakan padding-inline dan margin-inline tersedia secara meluas dalam pelayar sejak April 2021. Ini menyokong penggunaannya dalam pelayar desktop terkini, tetapi bukan jaminan untuk setiap pelayar lama atau setiap sintaks baharu yang ditunjukkan pada halaman rujukan tersebut. Contoh ini menggunakan panjang biasa dan auto, tanpa fungsi saiz yang lebih baharu. MDN: padding-inline, MDN: margin-inline.

Sokongan gap Flexbox mempunyai sejarah tersendiri. Safari menambahkannya dalam versi 14.1; gap Grid sudah disokong sejak Safari 12. WebKit menyatakan secara khusus bahawa pertanyaan ciri sifat tidak dapat membezakan konteks tersebut, jadi @supports (gap: 16px) sahaja tidak memadai untuk mengesan sokongan gap Flexbox dalam Safari lama. WebKit: Ciri WebKit Baharu dalam Safari 14.1.

Jika pelayar sasaran anda menyokong margin logik tetapi tidak mempunyai gap Flexbox, tambahkan fragmen gantian ini selepas peraturan helaian gaya utama. Fragmen ini menyediakan jarak untuk komponen satu baris yang khusus ini. Gunakannya sebagai ganti jarak gap yang aktif, seperti yang ditunjukkan; ini bukan penyelesaian umum untuk baris yang membalut.

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

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

Jika pelayar juga tidak mempunyai sifat logik, pengganti ini tidak mencukupi. Gunakan pelayar terkini untuk tugas setempat ini, atau tulis dan uji peraturan LTR dan RTL fizikal yang jelas untuk sasaran lama. Asingkan keputusan khusus pelayar itu daripada reka bentuk utama helaian gaya kongsi.

Perbandingan yang lengkap sepatutnya menunjukkan satu kontrak yang konsisten: HTML menetapkan arah, CSS kongsi menyediakan jarak dan ruang dalam hadapan komponen mengikuti permulaan sebaris. Simpan kedua-dua halaman setempat itu sebagai contoh ujian regresi ringkas setiap kali anda mengubah jarak atau susun atur komponen.

Sumber