0Pricing
CSS Academy · Pelajaran

Properti Logis dalam Tata Letak RTL

Bangun tata letak dua arah yang benar-benar dapat berbalik otomatis untuk bahasa Arab dan Ibrani menggunakan properti logis.

Properti Logis dalam Tata Letak RTL adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Menyiapkan RTL dalam HTML

Nyatakan RTL dalam HTML dengan atribut dir dan lang yang sesuai:

<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>

dir="rtl" dalam CSS

Anda juga dapat menetapkan arah dalam CSS — berguna untuk pengujian atau bagian RTL tertentu:

<div dir="rtl">هذا العنصر باتجاه RTL</div>

Menguji Peralihan LTR/RTL

Pengujian singkat: tambahkan dir="rtl" pada <html>. Dengan properti logis, tata letak seharusnya tercermin dengan benar. Dengan properti fisik, Anda akan melihat bagian yang perlu diperbaiki.

Apa yang Beradaptasi Otomatis

Saat dir="rtl" ditetapkan, hal-hal berikut otomatis dibalik dengan properti logis:

  • Perataan teks (start/end)
  • Margin dan padding (inline-start/end)
  • Border (inline-start/end)
  • Elemen mengambang (inline-start/end)
  • Penempatan (inset-inline-start/end)

Apa yang TIDAK Beradaptasi Otomatis

Bahkan dengan properti logis, hal-hal berikut perlu diperhatikan dalam RTL:

  • Gambar latar dengan konten yang memiliki arah
  • Ikon SVG yang memiliki makna arah (panah, chevron)
  • Transformasi seperti translateX() — gunakan translateX(calc(-1 * var(--offset))) dengan penanda arah
  • Penempatan absolut dengan nilai piksel eksplisit

Mencerminkan Ikon SVG

CSS menyediakan cara yang rapi untuk membalik ikon yang memiliki arah dalam RTL:

<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>

Variabel CSS yang Sadar Arah

Trik variabel CSS untuk nilai yang menyesuaikan arah:

<div dir="rtl" class="drawer">Drawer</div>

Contoh RTL Praktis

Komponen kartu yang menggunakan properti logis:

<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>

font-size dan RTL

Beberapa font Arab tampak lebih besar atau lebih kecil pada ukuran piksel yang sama dengan padanan Latinnya. Tentukan font-size untuk setiap sistem penulisan jika diperlukan:

<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>

Alat Pengujian

DevTools browser dapat meniru tata letak dua arah. Gunakan juga pohon aksesibilitas Chrome untuk memverifikasi bahwa urutan pembacaan mengikuti urutan logis, bukan urutan visual, bagi pembaca layar.

Daftar Periksa RTL di Dunia Nyata

Daftar periksa RTL:

  • Semua margin/padding menggunakan properti logis
  • Semua border menggunakan inline-start/end
  • Perataan teks menggunakan start/end
  • Ikon yang memiliki arah dibalik dengan scaleX(-1)
  • Posisi absolut menggunakan inset-inline-* jika diperlukan
  • Wadah yang dapat digulir menggulir dari tepi yang benar

Pemeriksaan Singkat

Transformasi CSS mana yang merupakan cara paling sederhana untuk mencerminkan ikon panah SVG yang memiliki arah dalam tata letak RTL?

Ringkasan

Tetapkan dir="rtl" pada elemen html untuk tata letak RTL. Properti logis secara otomatis menyesuaikan margin, padding, border, dan perataan. Piksel fisik dalam transformasi dan penempatan absolut tetap memerlukan pertimbangan RTL secara manual. Cerminkan ikon yang memiliki arah dengan scaleX(-1). Uji dengan mengaktifkan dan menonaktifkan dir="rtl" pada elemen root.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti Logis dalam Tata Letak RTL” gratis?

Ya — teks lengkap “Properti Logis dalam Tata Letak RTL” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Properti Logis dalam Tata Letak RTL”?

Bangun tata letak dua arah yang benar-benar dapat berbalik otomatis untuk bahasa Arab dan Ibrani menggunakan properti logis. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Properti Logis dalam Tata Letak RTL” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Mengapa Properti Logis: Internasionalisasi
  2. Arah Block dan Inline
  3. Margin, Padding, dan Border Logis
  4. Properti Logis dalam Tata Letak RTL
← Kembali ke CSS Academy