dir=rtl untuk Teks dari Kanan ke Kiri
Aktifkan tata letak RTL untuk bahasa Arab, Ibrani, dan bahasa RTL lainnya.
dir=rtl untuk Teks dari Kanan ke Kiri adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi Atribut dir
Atribut dir menyatakan arah dasar teks suatu elemen. dir="ltr" (kiri ke kanan, bawaan untuk sebagian besar bahasa) atau dir="rtl" (kanan ke kiri, untuk bahasa Arab, Ibrani, Persia, dan Urdu).
Menetapkan RTL pada HTML untuk Seluruh Situs
Untuk situs berbahasa Arab, Ibrani, Persia, dan Urdu, tetapkan dir="rtl" pada elemen akar. Tindakan ini membalik aliran bawaan setiap blok: teks rata kanan, daftar menjorok ke kanan, bilah gulir berpindah ke kiri, dan tata letak otomatis dicerminkan oleh CSS modern.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Teks Dua Arah
Teks dengan arah campuran (bahasa Arab dengan nama merek berbahasa Inggris yang disisipkan) secara otomatis mengikuti Algoritma Dua Arah Unicode. Arah dasar (dari dir) mengatur penataan segmen satu arah pada tingkat baris; rangkaian karakter individual mengalir sesuai arah alami skripnya masing-masing.
Properti Logis CSS
CSS modern menggunakan properti logis yang menyesuaikan diri dengan arah: margin-inline-start (kiri dalam LTR, kanan dalam RTL), padding-inline-end, border-inline-start. Mengganti kiri/kanan dengan awal/akhir membuat satu lembar gaya dapat digunakan untuk kedua arah.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox dan Grid Beradaptasi Otomatis
Arah baris Flexbox mengikuti dir: dalam RTL, item mengalir dari kanan ke kiri. Kolom templat Grid juga berbalik. Artinya, sebagian besar tata letak yang ditulis dengan flex atau grid dapat bekerja dalam RTL tanpa CSS khusus arah — tata letak modern tidak bergantung pada arah.
Ikon yang Harus Berbalik
Ikon berarah (panah kembali, panah berikutnya, urungkan/ulangi) harus berbalik dalam RTL. Gunakan CSS transform: scaleX(-1) di dalam [dir="rtl"], atau sediakan varian SVG RTL yang terpisah. Ikon yang tidak berarah (pencarian, pengaturan, roda gigi) tetap sama.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Perataan Teks
Utamakan text-align: start daripada text-align: left — start berarti kiri dalam LTR dan kanan dalam RTL. Hal yang sama berlaku untuk end. Perataan yang menyadari arah menghilangkan sejumlah kesalahan saat menambahkan dukungan RTL.
Penggantian dir per Elemen
Tetapkan dir="auto" pada elemen agar peramban mendeteksi arah dari karakter pertama yang memiliki arah kuat: <p dir="auto">{user.name}</p> menangani nama yang dikirim pengguna, yang mungkin berbahasa Arab, Inggris, atau campuran, tanpa penanganan khusus.
Penyematan Bidi
Elemen bdi (isolasi dua arah) dan bdo (penggantian dua arah) memberikan kontrol terperinci atas cara algoritma bidi memperlakukan teks tertentu — berguna saat menampilkan kembali masukan pengguna secara persis atau memaksa arah tertentu untuk cuplikan kode di dalam teks yang mengalir.
Bidang Formulir
Masukan mewarisi dir dari induknya. Untuk teks yang diberikan pengguna dan arah tulisannya dapat berbeda-beda (aplikasi percakapan dengan pengguna multibahasa), tetapkan dir="auto" pada setiap masukan agar masing-masing ditampilkan dengan benar berdasarkan isinya.
Menguji Tata Letak RTL
Peramban memungkinkan Anda melihat pratinjau RTL dengan menetapkan document.documentElement.dir = "rtl" sementara di konsol DevTools. Periksa orientasi ikon, jarak dalam/jarak luar, posisi bilah gulir, dan pastikan tidak ada elemen yang menggunakan kiri/kanan tetap padahal seharusnya menggunakan awal/akhir.
Arah CSS Berbeda dari Arah Tata Letak
Properti CSS direction dan atribut HTML dir memiliki efek yang sama pada sebagian besar tata letak. Utamakan atribut HTML karena teknologi asistif, layanan pengiriman surel, dan konsumen lainnya dapat membacanya, sedangkan properti CSS hanya memengaruhi perenderan di peramban.
Pemeriksaan Pengetahuan
Mengapa properti logis CSS seperti margin-inline-start lebih diutamakan daripada margin-left saat mendukung bahasa RTL?
Ringkasan
dir="rtl" pada <html> membalik arah dasar untuk situs berbahasa Arab, Ibrani, Persia, dan Urdu. Properti logis CSS (margin-inline-start, padding-block-end) beradaptasi secara otomatis. Tata letak Flexbox/Grid dicerminkan tanpa perubahan. Balikkan ikon berarah, gunakan text-align: start/end, dan gunakan dir="auto" untuk konten pengguna yang arahnya tidak diketahui.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “dir=rtl untuk Teks dari Kanan ke Kiri” gratis?
Ya — teks lengkap “dir=rtl untuk Teks dari Kanan ke Kiri” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “dir=rtl untuk Teks dari Kanan ke Kiri”?
Aktifkan tata letak RTL untuk bahasa Arab, Ibrani, dan bahasa RTL lainnya. Kamu berlatih HTML 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 HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML 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 2 dari 4.
Berapa lama pelajaran “dir=rtl untuk Teks dari Kanan ke Kiri” 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 HTML Academy ini?
Ya. Setiap pelajaran HTML 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
- Atribut lang dan Pembaca Layar
- dir=rtl untuk Teks dari Kanan ke Kiri
- Elemen bdi dan bdo
- charset dan Penanganan Unicode Karakter Khusus