Untuk teks HTML bersarang, pilih pengasingan apabila setiap frasa perlu mengekalkan arahnya sendiri tanpa mengganggu frasa di sekelilingnya. Gunakan pembenaman hanya apabila interaksi dengan teks sekeliling memang disengajakan, dan penggantian apabila reka bentuk secara jelas memerlukan turutan aksara yang dipaksa.

Panduan ini membantu seseorang yang mengedit halaman HTML pada Mac memilih mekanisme yang betul, mengekalkan label bersarang dan tanda baca, serta menyemak hasilnya dalam pelayar desktop. Contoh-contohnya menggunakan label, nombor dan aksara geometri rekaan.

Mekanisme manakah yang sesuai dengan tugas susun atur?

Mulakan dengan dua soalan: patutkah pelayar menggunakan susunan dwihala biasa dalam frasa itu, dan patutkah frasa itu mempengaruhi susunan teks di sekelilingnya? Keputusan tersebut menghasilkan perbandingan praktikal berikut. Rujukan unicode-bidi MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/unicode-bidi) menerangkan tingkah laku CSS yang mendasarinya.

Keperluan Mekanisme Pendekatan HTML yang disyorkan
Berikan frasa yang arahnya diketahui sempadannya sendiri Pengasingan Elemen sebaris sedia ada dengan dir="ltr" atau dir="rtl"
Asingkan frasa yang arahnya tidak diketahui Pengasingan dengan arah automatik bdi, atau elemen sebaris sedia ada dengan dir="auto"
Cipta skop berarah yang masih mempengaruhi susunan sekeliling Pembenaman Kes CSS khusus yang menggunakan unicode-bidi: embed
Paksa jujukan aksara sambil mengasingkan hasilnya Penggantian terasing bdo dengan dir="ltr" atau dir="rtl" yang dinyatakan secara jelas
Paksa jujukan aksara sambil mengekalkan interaksi dengan teks sekeliling Penggantian tidak terasing Kes CSS khusus yang menggunakan unicode-bidi: bidi-override

Untuk penghasilan HTML biasa, gunakan penanda arah sebagai titik permulaan. W3C mengesyorkan setiap frasa yang berlainan arah dibalut dengan rapat dan frasa bersarang dinyatakan melalui penanda bersarang. Ini menjadikan sempadan yang dimaksudkan jelas dalam dokumen. W3C: Penanda sebaris dan teks dwihala dalam HTML.

Bagaimanakah anda patut menandakan teks terasing yang bersarang?

Berikan setiap frasa lengkap sempadan berarahnya sendiri. Jika elemen sebaris sedia ada sudah mengandungi frasa itu sahaja, tambahkan dir di situ. Jika tidak, masukkan span. Kekalkan tanda baca yang menjadi sebahagian daripada frasa itu di dalam pembalutnya; kekalkan tanda baca ayat sekeliling di luarnya. W3C menyebutnya sebagai “membalut frasa dengan rapat”. Panduan penanda sebaris W3C.

Bagi label bentuk rekaan yang dimaksudkan untuk dibaca dari kanan ke kiri dan mengandungi pengecam kiri ke kanan, strukturnya boleh menjadi cebisan ilustrasi ini:

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

Terdapat tiga skop yang disengajakan: ayat luar, jujukan bentuk dan pengecam bersarang. Bilangan itu sebahagian daripada ayat, jadi ia kekal di luar jujukan bentuk. Menandakan frasa luar sahaja akan menyebabkan pengecam dalaman tiada sempadan tersuratnya sendiri. Persarangan ini mengikut struktur yang disyorkan W3C untuk perubahan arah. Panduan W3C tentang frasa bersarang.

Apabila arah label yang dimasukkan tidak diketahui, bdi menyediakan pengasingan dan secara lalai mengesan arah secara automatik. span biasa tanpa dir tidak memberikan lalai yang sama. WHATWG menetapkan bahawa bdi secara lalai menggunakan auto, bukannya mewarisi arah seperti biasa. Piawaian HTML: Elemen bdi.

Arah automatik ialah heuristik berdasarkan aksara berarah kuat yang pertama, dengan pengecualian tertentu bagi elemen berarah bersarang. Ia tidak memahami maksud yang dimaksudkan bagi sesuatu label. Oleh itu, label yang bermula dengan A1 memberikan petunjuk kiri ke kanan walaupun kandungan seterusnya mencadangkan persembahan yang berbeza. Gunakan arah tersurat apabila anda sudah mengetahui keperluannya. MDN: Atribut global dir.

Label yang hanya mengandungi bentuk dan digit memerlukan perhatian khusus: label itu tidak mempunyai huruf berarah kuat. Bagi contoh sebaris biasa di sini, algoritma HTML beralih kepada kiri ke kanan apabila arah automatik tidak menemui aksara yang layak. Nyatakan dir="rtl" jika jujukan rekaan itu mesti mempunyai asas kanan ke kiri. Piawaian HTML: Atribut dir.

Bilakah pembenaman dan penggantian sesuai?

Pembenaman mewujudkan satu lagi aras berarah sambil mengekalkan susunan aksara biasa di dalamnya. Sempadannya juga mempengaruhi arah teks sekeliling. Pengasingan memberikan kandungannya skop tersendiri sambil menjadikan jujukan itu neutral terhadap persekitarannya. Spesifikasi W3C membezakan kesan dalaman dan luaran ini dengan jelas. Mod Penulisan CSS Tahap 3: Pembenaman dan Penggantian.

Pilih pembenaman hanya apabila pengaruh berarah luaran itu sebahagian daripada hasil yang dimaksudkan. Untuk label bersarang yang bebas diikuti bilangan berasingan, pengasingan biasanya pilihan yang sesuai. Aras persarangan yang lebih dalam sahaja bukan alasan untuk memilih embed: rentang terasing juga boleh mengandungi rentang berarah yang lebih lanjut.

Penggantian mengubah peraturan dalaman. Ia memaksa teks serta-merta mengikut jujukan dalam arah yang ditetapkan, dan bukannya membiarkan algoritma biasa menentukan rentang arahnya. isolate-override menambahkan sempadan pengasingan di sekeliling susunan yang dipaksa itu. Ini ialah tingkah laku yang berbeza, bukannya tetapan lebih kuat untuk membetulkan frasa biasa. MDN: Nilai unicode-bidi.

Untuk demonstrasi turutan aksara yang disengajakan, gunakan bdo dengan dir="ltr" atau dir="rtl". Piawaian HTML mewajibkan arah yang dinyatakan secara jelas dan melarang auto pada elemen ini. Peraturan pemaparannya menggunakan unicode-bidi: isolate-override, maka tingkah laku bdo HTML semasa merangkumi pengasingan. Piawaian HTML: Elemen bdo, Piawaian HTML: Pemaparan teks dwihala.

Perbezaan ini penting untuk label Latin: asas kanan ke kiri biasa tidak bermaksud “balikkan setiap aksara Latin”. Penggantian boleh memaksa jujukan itu. Walaupun begitu, glif individu mengekalkan orientasinya; bdo tidak melukis bentuk huruf secara terbalik. MDN: Elemen bdo.

Cuba halaman perbandingan lengkap pada Mac anda

Halaman kendiri berikut hanya memerlukan pelayar dan editor teks biasa. Dua baris pertama membandingkan pengendalian arah biasa dengan susunan paksa. Baris selebihnya menunjukkan pilihan persarangan dan sempadan. Baris pembenaman CSS disertakan sebagai demonstrasi mekanisme; gunakan baris pengasingan HTML sebagai titik permulaan untuk label bebas biasa.

Dalam TextEdit, pilih File > New, kemudian Format > Make Plain Text. Tampal kod lengkap di bawah. Pilih File > Save, namakan fail bidi-demo.html, dan pilih Use .html jika diminta. Ini ialah langkah yang didokumenkan oleh Apple untuk mencipta fail HTML. Buka fail yang disimpan dalam pelayar desktop anda. Apple: Bekerja dengan dokumen HTML dalam 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-apa. Rentang arah biasa sepatutnya mengekalkan ABC dalam susunan huruf kiri ke kanan. Penggantian sepatutnya memaparkan CBA apabila dibaca dari tepi kiri. Ini ialah jangkaan berdasarkan mekanisme yang didokumenkan, bukannya ukuran pelayar yang dilaporkan. MDN: Tingkah laku bdo.

Seterusnya, bandingkan baris pengasingan dan pembenaman bersarang. Kekalkan perkataan dan bilangan tanpa perubahan sambil meneliti jujukan bentuk dan tanda baca pada sempadannya. Mekanismenya berbeza walaupun sampel tertentu kelihatan sama: pengasingan dan pembenaman tidak semestinya menghasilkan perbezaan yang kelihatan bagi setiap rentetan. Perbezaan yang didokumenkan berkaitan dengan cara skop itu mengambil bahagian dalam penyelesaian bidi sekeliling. W3C: Mod Penulisan CSS Tahap 3.

Untuk ujian sempadan yang berguna, alihkan titik bertindih ke dalam rentang arah luar, simpan dan muat semula. Kemudian kembalikannya ke luar. Anda sedang mengubah frasa yang memiliki tanda baca itu, jadi nilai hasilnya berdasarkan pemilikan yang dimaksudkan. Akhir sekali, kecilkan lebar tetingkap pelayar untuk menyemak sempadan yang sama apabila ayat membalut ke baris baharu.

Latar belakang dan garis luar bertitik mengenal pasti rentang yang diuji. Kedua-duanya ialah bantuan pemeriksaan. Kedua-duanya tidak menetapkan arah atau pengasingan.

Bagaimanakah anda mendiagnosis hasil yang masih kelihatan salah?

Periksa dari frasa terkecil yang terjejas ke arah luar. Mengubah beberapa sifat arah serentak menyukarkan anda mengenal pasti sempadan yang menyebabkan hasil tersebut.

  1. Periksa pembalut. Adakah ia mengandungi keseluruhan label, dan label itu sahaja? Tanda baca ayat dan bilangan yang berasingan patut kekal di luar melainkan kedua-duanya sebahagian daripada label.
  2. Periksa frasa bersarang. Pengecam dengan arah tersendiri di dalam frasa lain mungkin memerlukan pembalut dir tersendiri.
  3. Periksa arah automatik. Jika arah asas yang dimaksudkan diketahui, gantikan auto dengan arah tersurat itu. Ini amat berguna untuk bentuk dan digit rekaan.
  4. Periksa penggantian. Jika jujukan aksara dipaksa secara tidak dijangka, periksa bdo dan pengisytiharan CSS unicode-bidi.
  5. Periksa lata CSS. Peraturan pengarang boleh menggantikan penggayaan berarah pelayar. Buang peraturan bidi percubaan dan uji semula penanda HTML.

Dua pemeriksaan pertama mengikuti panduan W3C tentang pembalutan dan persarangan. Pemeriksaan arah automatik mengikuti dokumentasi dir MDN; pemeriksaan terakhir mengikuti peraturan pemaparan HTML.

Bezakan juga susunan daripada penjajaran. text-align: right meletakkan kandungan sebaris pada tepi kanan blok; ia tidak menetapkan frasa terasing. text-align: start mengikut arah blok, jadi perubahan arah asas juga boleh mengubah tepi yang digunakan. Diagnosis masalah turutan aksara secara berasingan daripada kedudukan baris. MDN: text-align.

Untuk keserasian, WHATWG mendokumenkan bdi dan bdo sebagai disokong dalam semua enjin pelayar semasa. Itu tidak membuktikan sokongan dalam setiap pelayar lama atau pemapar terbenam. Apabila menyemak persekitaran pemaparan lain, uji sasaran sebenar dan kekalkan penanda HTML berarah: MDN mengesyorkannya berbanding pengasingan berasaskan CSS sahaja kerana penggayaan mungkin diabaikan. Piawaian HTML: Semantik aras teks, MDN: Nota penggunaan bdi.

Akhiri dengan satu keputusan yang jelas bagi setiap frasa bersarang: arah asasnya, sempadannya dan sama ada turutan aksara dalamannya patut kekal biasa. Bagi label bebas, mulakan dengan pengasingan. Kekalkan pembenaman atau penggantian hanya apabila tingkah laku khususnya yang didokumenkan diperlukan oleh susun atur.

Sumber