Untuk teks HTML bertingkat, pilih isolasi saat setiap frasa harus mempertahankan arahnya sendiri tanpa mengganggu frasa di sekitarnya. Gunakan embedding hanya saat interaksi dengan teks di sekitarnya memang disengaja, dan override saat desain secara eksplisit mengharuskan urutan karakter dipaksakan.

Panduan ini membantu seseorang yang mengedit halaman HTML di Mac memilih mekanisme yang tepat, mempertahankan label dan tanda baca bertingkat, serta memeriksa hasilnya di browser desktop. Contohnya menggunakan label, angka, dan karakter geometris rekaan.

Mekanisme mana yang sesuai dengan tugas tata letak?

Mulailah dengan dua pertanyaan: apakah browser harus menerapkan pengurutan dua arah biasa di dalam frasa, dan apakah frasa tersebut harus memengaruhi pengurutan teks di sekitarnya? Keputusan itu menghasilkan perbandingan praktis berikut. Referensi unicode-bidi dari MDN menjelaskan perilaku CSS yang mendasarinya.

Persyaratan Mekanisme Pendekatan HTML yang disarankan
Beri frasa dengan arah yang diketahui batasnya sendiri Isolasi Elemen inline yang sudah ada dengan dir="ltr" atau dir="rtl"
Isolasi frasa yang arahnya tidak diketahui Isolasi dengan arah otomatis bdi, atau elemen inline yang sudah ada dengan dir="auto"
Buat lingkup arah yang tetap memengaruhi pengurutan di sekitarnya Embedding Kasus CSS khusus yang menggunakan unicode-bidi: embed
Paksakan urutan karakter sambil mengisolasi hasilnya Override terisolasi bdo dengan dir="ltr" atau dir="rtl" yang eksplisit
Paksakan urutan karakter sambil mempertahankan interaksi dengan teks di sekitarnya Override nonterisolasi Kasus CSS khusus yang menggunakan unicode-bidi: bidi-override

Untuk penulisan HTML biasa, gunakan markup arah sebagai titik awal. W3C menyarankan pembungkusan rapat pada setiap frasa dengan arah berlawanan dan pengungkapan frasa bertingkat melalui markup bertingkat. Dengan begitu, batas yang dimaksud terlihat dalam dokumen. W3C: Markup inline dan teks dua arah dalam HTML.

Bagaimana cara memberi markup pada teks terisolasi yang bertingkat?

Beri setiap frasa lengkap batas arahnya sendiri. Jika elemen inline yang sudah ada memuat tepat frasa tersebut, tambahkan dir di sana. Jika tidak, tambahkan span. Pertahankan tanda baca yang termasuk dalam frasa di dalam pembungkusnya; letakkan tanda baca kalimat di sekitarnya di luar. W3C menyebutnya “pembungkusan rapat” pada frasa. Panduan markup inline dari W3C.

Untuk label bentuk rekaan yang dimaksudkan berjalan dari kanan ke kiri dan memuat pengenal dari kiri ke kanan, strukturnya dapat berupa fragmen ilustratif berikut:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Ada tiga lingkup yang disengaja: kalimat luar, rangkaian bentuk, dan pengenal bertingkat. Jumlahnya termasuk dalam kalimat, jadi tetap berada di luar rangkaian bentuk. Jika hanya frasa luar yang ditandai, pengenal di dalamnya tidak memiliki batas eksplisit sendiri. Struktur bertingkat ini mengikuti struktur yang disarankan W3C untuk perubahan arah. Panduan W3C tentang frasa bertingkat.

Jika arah label yang disisipkan tidak diketahui, bdi menyediakan isolasi dan secara default mendeteksi arah secara otomatis. span biasa tanpa dir tidak memberikan nilai bawaan yang sama. WHATWG menetapkan bahwa bdi secara default menggunakan auto, alih-alih mewarisi arah dengan cara biasa. Standar HTML: Elemen bdi.

Arah otomatis merupakan heuristik yang didasarkan pada karakter pertama yang memiliki arah kuat, dengan pengecualian tertentu untuk elemen arah bertingkat. Heuristik ini tidak memahami maksud label. Karena itu, label yang diawali A1 memberikan petunjuk kiri-ke-kanan, meskipun konten berikutnya menyiratkan tampilan yang berbeda. Gunakan arah eksplisit jika persyaratannya sudah diketahui. MDN: atribut global dir.

Label yang hanya berisi bentuk dan angka perlu perhatian khusus: label seperti ini tidak memiliki huruf berarah kuat. Untuk contoh inline biasa di sini, algoritme HTML menggunakan kiri ke kanan sebagai nilai cadangan jika arah otomatis tidak menemukan karakter yang memenuhi syarat. Tentukan dir="rtl" jika rangkaian rekaan tersebut harus memiliki arah dasar kanan-ke-kiri. Standar HTML: Atribut dir.

Kapan embedding dan override tepat digunakan?

Embedding membuat tingkat arah lain sambil mempertahankan pengurutan karakter biasa di dalamnya. Batasnya juga memengaruhi arah teks di sekitarnya. Isolasi memberi konten lingkup sendiri sekaligus membuat rangkaian tersebut bersikap netral terhadap teks di sekitarnya. Spesifikasi W3C membedakan efek internal dan eksternal ini secara eksplisit. CSS Writing Modes Level 3: Embedding dan Override.

Pilih embedding hanya jika pengaruh arah eksternal tersebut memang merupakan bagian dari hasil yang diinginkan. Untuk label bertingkat mandiri yang diikuti jumlah terpisah, isolasi biasanya merupakan pilihan yang tepat. Tingkat penyarangan yang lebih dalam saja bukan alasan untuk memilih embed: rentang terisolasi juga dapat memuat rentang arah lainnya.

Override mengubah aturan internal. Mekanisme ini memaksakan urutan teks langsung sesuai arah yang ditentukan, alih-alih membiarkan algoritme biasa menentukan urutan run arahnya. isolate-override menambahkan batas isolasi di sekeliling urutan yang dipaksakan tersebut. Keduanya adalah perilaku berbeda, bukan pengaturan yang lebih kuat untuk memperbaiki frasa biasa. Nilai unicode-bidi di MDN.

Untuk demonstrasi urutan karakter yang disengaja, gunakan bdo dengan dir="ltr" atau dir="rtl". Standar HTML mengharuskan arah yang eksplisit dan melarang auto pada elemen ini. Aturan perenderannya menggunakan unicode-bidi: isolate-override, sehingga perilaku HTML bdo saat ini mencakup isolasi. Standar HTML: Elemen bdo, Standar HTML: Perenderan teks dua arah.

Perbedaan ini penting untuk label Latin: arah dasar kanan-ke-kiri tidak berarti “balik setiap karakter Latin”. Override dapat memaksakan urutan tersebut. Meski begitu, orientasi glif tetap dipertahankan; bdo tidak menggambar bentuk huruf secara terbalik. MDN: Elemen bdo.

Coba halaman perbandingan lengkap di Mac Anda

Halaman mandiri berikut hanya memerlukan browser dan editor teks biasa. Dua baris pertama membandingkan penanganan arah biasa dengan urutan yang dipaksakan. Baris lainnya memperlihatkan pilihan penyarangan dan batas. Baris embedding CSS disertakan sebagai demonstrasi mekanisme; gunakan baris isolasi HTML sebagai titik awal untuk label mandiri biasa.

Di TextEdit, pilih File > New, lalu Format > Make Plain Text. Tempelkan seluruh kode di bawah. Pilih File > Save, beri nama file bidi-demo.html, lalu pilih Use .html jika diminta. Ini adalah langkah yang didokumentasikan Apple untuk membuat file HTML. Buka file yang telah disimpan di browser desktop Anda. Apple: Bekerja dengan dokumen HTML di TextEdit pada Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Periksa dua baris pertama sebelum mengubah apa pun. Rentang berarah biasa seharusnya mempertahankan ABC dalam urutan huruf kiri-ke-kanan. Override seharusnya menampilkan CBA jika dibaca dari tepi kiri. Ini adalah perkiraan berdasarkan mekanisme yang didokumentasikan, bukan hasil pengukuran browser yang dilaporkan. Perilaku bdo di MDN.

Selanjutnya, bandingkan baris isolasi dan embedding bertingkat. Pertahankan kata dan jumlahnya, lalu periksa rangkaian bentuk dan tanda baca di batasnya. Mekanismenya berbeda meskipun contoh tertentu tampak sama: isolasi dan embedding tidak dijamin menghasilkan perbedaan yang terlihat pada setiap string. Perbedaan yang didokumentasikan berkaitan dengan cara lingkup tersebut berperan dalam penyelesaian bidi di sekitarnya. W3C: CSS Writing Modes Level 3.

Untuk menguji batas, pindahkan titik dua ke dalam rentang arah luar, simpan, lalu muat ulang. Kemudian kembalikan ke luar. Anda mengubah frasa mana yang memiliki tanda baca tersebut, jadi nilai hasilnya berdasarkan kepemilikan yang dimaksud. Terakhir, persempit jendela browser untuk memeriksa batas yang sama saat kalimat terbungkus ke baris berikutnya.

Latar belakang dan garis luar bertitik menandai rentang yang diuji. Keduanya hanya alat bantu pemeriksaan. Keduanya tidak menetapkan arah atau isolasi.

Bagaimana mendiagnosis hasil yang masih tampak salah?

Periksa dari frasa terkecil yang terdampak ke arah luar. Mengubah beberapa properti arah sekaligus menyulitkan penentuan batas mana yang menyebabkan hasil tersebut.

  1. Periksa pembungkusnya. Apakah pembungkus memuat seluruh label, dan hanya label itu? Tanda baca kalimat dan jumlah yang terpisah sebaiknya tetap di luar kecuali memang termasuk dalam label.
  2. Periksa frasa bertingkat. Pengenal yang arahnya independen di dalam frasa lain mungkin memerlukan pembungkus dir tersendiri.
  3. Periksa arah otomatis. Jika arah dasar yang diinginkan sudah diketahui, ganti auto dengan arah eksplisit tersebut. Ini khususnya berguna untuk bentuk dan angka rekaan.
  4. Periksa override. Jika urutan karakter dipaksakan secara tak terduga, periksa deklarasi bdo dan CSS unicode-bidi.
  5. Periksa kaskade CSS. Aturan dari penulis dapat menggantikan gaya arah browser. Hapus aturan bidi uji coba, lalu uji kembali markup HTML.

Dua pemeriksaan pertama mengikuti panduan W3C tentang pembungkusan dan penyarangan. Pemeriksaan arah otomatis mengikuti dokumentasi dir dari MDN; pemeriksaan terakhir mengikuti aturan perenderan HTML.

Bedakan juga pengurutan dari perataan. text-align: right menempatkan konten inline di tepi kanan blok; properti ini tidak membuat frasa terisolasi. text-align: start mengikuti arah blok, sehingga perubahan arah dasar juga dapat mengubah tepi yang digunakan. Diagnosis masalah urutan karakter secara terpisah dari posisi baris. MDN: text-align.

Untuk kompatibilitas, WHATWG mendokumentasikan bdi dan bdo sebagai fitur yang didukung di semua mesin browser saat ini. Itu tidak membuktikan dukungan di setiap browser lama atau penampil tertanam. Saat memeriksa lingkungan perenderan lain, uji target sebenarnya dan pertahankan markup HTML arah: MDN menyarankannya daripada isolasi yang hanya menggunakan CSS karena gaya dapat diabaikan. Standar HTML: Semantik tingkat teks, MDN: Catatan penggunaan bdi.

Akhiri dengan satu keputusan eksplisit untuk setiap frasa bertingkat: arah dasarnya, batasnya, dan apakah urutan karakter internalnya harus tetap biasa. Untuk label mandiri, mulailah dengan isolasi. Gunakan embedding atau override hanya jika perilaku khusus yang didokumentasikan memang diperlukan oleh tata letak.

Sumber