Elemen bdi dan bdo

Algoritma Dua Arah Unicode biasanya menangani teks dengan arah campuran secara baik, tetapi terkadang Anda perlu menimpanya — untuk mengisolasi nama yang diberikan pengguna agar tidak mengubah arah teks di sekitarnya, atau untuk memaksa arah tertentu di dalam blok kode.

<bdi> (isolasi dua arah) memperlakukan isinya sebagai konteks bidi yang terpisah. Arah teks di dalam <bdi> tidak dapat memengaruhi arah teks di luarnya, begitu pula sebaliknya.

Daftar pengguna yang mencampurkan nama berbahasa Inggris dan Arab berisiko membuat nama Arab "merembeskan" aliran RTL ke teks di sekitarnya. Membungkus setiap nama dalam <bdi> akan mengisolasinya: tata letak tetap konsisten terlepas dari arah setiap nama.

<bdo dir="rtl"> (penggantian dua arah) memaksa arah tertentu pada isinya, dengan menimpa penentuan bidi alami. Gunakan elemen ini saat ingin menampilkan teks dalam arah yang tidak alami — misalnya, untuk merender cuplikan kode dalam LTR di dalam halaman RTL.

Atribut dir pada elemen biasa menetapkan arah dasar, dan algoritma bidi tetap berlaku di dalamnya. <bdo> menonaktifkan algoritma bidi untuk isinya — setiap karakter mengalir secara ketat dalam arah yang ditentukan, terlepas dari skripnya.

Gunakan setiap kali Anda menyisipkan teks buatan pengguna ke dalam elemen antarmuka di sekitarnya — nama dalam tajuk percakapan, nama pengguna dalam komentar, atau judul dalam item umpan. Isolasi ini menjamin tata letak elemen antarmuka tidak terpengaruh oleh apa pun yang diketik pengguna.

Jarang. Penggunaan sah utamanya adalah untuk mempelajari teks dua arah (menunjukkan tampilan teks jika dibalik) atau memperbaiki data yang ditandai dengan keliru, ketika penentuan arah dua arah alami menghasilkan urutan visual yang salah.

Untuk konten pengguna yang arahnya tidak diketahui, gabungkan <bdi dir="auto"> demi keamanan ganda: deteksi otomatis memilih arah dasar dari konten, dan bdi mencegah arah tersebut merembes ke teks di sekitarnya.

bdi dan bdo didukung di setiap peramban modern. Keduanya merupakan bagian dari HTML5 dan telah stabil selama bertahun-tahun. Versi IE yang lebih lama tidak memiliki bdi, tetapi secara fungsional sudah usang; situs modern dapat menggunakan bdi dengan bebas.

Pembaca layar menghormati isolasi arah dua arah: teks di dalam <bdi> dibacakan dengan suara bahasanya sendiri (jika lang diatur), tanpa pengaruh konteks di sekitarnya. bdi juga membantu teknologi teks-ke-ucapan menghasilkan jeda yang sesuai di sekitar frasa yang diisolasi.

Templat dengan placeholder ("Welcome, {name}") sebaiknya membungkus placeholder tersebut dalam <bdi>: Welcome, <bdi>{name}</bdi>. Nama pengguna apa pun—bahasa Inggris, Arab, atau campuran—akan ditampilkan dengan benar tanpa mengganggu bagian lain dari sapaan.

Apa perbedaan praktis antara dan ?

bdi mengisolasi arah teks suatu bagian agar tidak memengaruhi sekitarnya—gunakan untuk konten pengguna yang disematkan, seperti nama dalam templat. bdo memaksa arah tertentu dengan mengabaikan arah dua arah; jarang diperlukan di luar contoh pembelajaran. Gabungkan bdi dengan dir="auto" untuk menangani teks yang diberikan pengguna dengan aman dalam bahasa yang tidak diketahui.