องค์ประกอบ bdi และ bdo

อัลกอริทึมข้อความสองทิศทางของ Unicode มักจัดการข้อความที่มีหลายทิศทางได้ดี แต่บางครั้งจำเป็นต้องเขียนทับการทำงานของอัลกอริทึม เช่น แยกชื่อที่ผู้ใช้ป้อนเพื่อไม่ให้เปลี่ยนทิศทางของข้อความรอบข้าง หรือบังคับทิศทางเฉพาะในบล็อกโค้ด

<bdi> (การแยกข้อความสองทิศทาง) จะถือว่าเนื้อหาภายในเป็นบริบทข้อความสองทิศทางที่แยกออกมา ทิศทางของข้อความภายใน <bdi> จะไม่ส่งผลต่อทิศทางของข้อความภายนอก และในทางกลับกัน

รายการผู้ใช้ที่มีทั้งชื่อภาษาอังกฤษและภาษาอาหรับอาจทำให้ชื่อภาษาอาหรับทำให้ทิศทาง RTL รั่วไหลไปยังข้อความรอบข้าง การครอบชื่อแต่ละชื่อด้วย <bdi> จะแยกทิศทางออกจากกัน ทำให้เค้าโครงคงที่ไม่ว่าชื่อนั้นจะมีทิศทางใด

<bdo dir="rtl"> (การเขียนทับข้อความสองทิศทาง) จะบังคับทิศทางเฉพาะให้กับเนื้อหาภายใน โดยเขียนทับการแก้ทิศทางตามธรรมชาติของข้อความสองทิศทาง ใช้เมื่อคุณต้องการแสดงข้อความในทิศทางที่ไม่เป็นธรรมชาติ เช่น แสดงตัวอย่างโค้ดเป็น LTR ภายในหน้า RTL

แอตทริบิวต์ dir บนองค์ประกอบทั่วไปจะกำหนดทิศทางพื้นฐาน และอัลกอริทึมข้อความสองทิศทางยังคงทำงานภายใน <bdo> จะปิดใช้งานอัลกอริทึมข้อความสองทิศทางสำหรับเนื้อหาภายใน ทำให้อักขระทุกตัวไหลไปตามทิศทางที่ระบุอย่างเคร่งครัด ไม่ว่าสคริปต์ของอักขระนั้นจะเป็นอะไร

ใช้ทุกครั้งที่ฝังข้อความที่ผู้ใช้สร้างขึ้นลงในส่วนติดต่อรอบข้าง เช่น ชื่อในส่วนหัวแชต ชื่อผู้ใช้ในความคิดเห็น หรือชื่อเรื่องในรายการฟีด การแยกทิศทางรับประกันว่าเค้าโครงส่วนติดต่อจะไม่ได้รับผลกระทบจากสิ่งที่ผู้ใช้พิมพ์

ไม่ค่อยใช้ โดยการใช้งานที่ถูกต้องหลัก ๆ คือใช้สอนเรื่องข้อความสองทิศทาง (แสดงให้เห็นว่าสตริงมีลักษณะอย่างไรเมื่อกลับด้าน) หรือใช้แก้ไขข้อมูลที่กำกับแท็กไม่ถูกต้อง ซึ่งการจัดลำดับข้อความสองทิศทางตามธรรมชาติทำให้ลำดับที่แสดงผลผิด

สำหรับเนื้อหาที่ผู้ใช้ป้อนซึ่งไม่ทราบทิศทาง ให้ใช้ <bdi dir="auto"> ร่วมกันเพื่อความปลอดภัยสองชั้น: การตรวจจับอัตโนมัติจะเลือกทิศทางพื้นฐานจากเนื้อหา และ bdi จะป้องกันไม่ให้ทิศทางนั้นรั่วไหลไปยังข้อความรอบข้าง

bdi และ bdo รองรับในเบราว์เซอร์รุ่นใหม่ทุกชนิด ทั้งสองเป็นส่วนหนึ่งของ HTML5 และมีความเสถียรมาหลายปีแล้ว IE รุ่นเก่าไม่มี bdi แต่ล้าสมัยในทางการใช้งานแล้ว เว็บไซต์ยุคใหม่จึงใช้ bdi ได้อย่างอิสระ

โปรแกรมอ่านหน้าจอรองรับการแยกทิศทางข้อความ: ข้อความภายใน <bdi> จะถูกอ่านด้วยเสียงของภาษานั้นเอง (เมื่อกำหนด lang ไว้) โดยบริบทโดยรอบจะไม่ส่งผลแทรกเข้ามา bdi ยังช่วยให้ระบบแปลงข้อความเป็นเสียงพูดสร้างช่วงหยุดที่เหมาะสมรอบวลีที่แยกออกมาได้ด้วย

แม่แบบที่มีตัวแทนค่า ("Welcome, {name}") ควรครอบตัวแทนค่านั้นด้วย <bdi>: Welcome, <bdi>{name}</bdi> ชื่อผู้ใช้ใด ๆ — ไม่ว่าจะเป็นภาษาอังกฤษ ภาษาอาหรับ หรือแบบผสม — จะแสดงผลได้อย่างถูกต้องโดยไม่รบกวนส่วนอื่นของคำทักทาย

ความแตกต่างในทางปฏิบัติระหว่าง กับ คืออะไร

bdi แยกทิศทางข้อความของส่วนหนึ่งไม่ให้ส่งผลต่อบริเวณโดยรอบ — ใช้กับเนื้อหาที่ผู้ใช้ป้อนและนำมาแทรก เช่น ชื่อในแม่แบบ bdo บังคับทิศทางที่กำหนดโดยแทนที่การจัดทิศทางสองทิศทาง จึงแทบไม่จำเป็นนอกตัวอย่างเพื่อการสอน ใช้ bdi ร่วมกับ dir="auto" เพื่อจัดการข้อความที่ผู้ใช้ป้อนซึ่งไม่ทราบภาษาได้อย่างปลอดภัย