<bdi> (Bidirectional Isolation) เป็นแท็กใน HTML5 ที่ใช้เพื่อควบคุมทิศทางการแสดงผลข้อความในเอกสาร HTML โดยเฉพาะในกรณีที่ต้องรองรับข้อความที่มีการใช้ภาษาที่มีทิศทางการเขียนต่างกัน เช่น ภาษาอังกฤษที่เขียนจากซ้ายไปขวา (LTR – Left to Right) และภาษาที่เขียนจากขวาไปซ้าย (RTL – Right to Left) เช่น ภาษาอาหรับหรือภาษาฮิบรู
โดย <bdi> จะทำหน้าที่แยกส่วนของข้อความออกมาเพื่อให้เบราว์เซอร์จัดการกับทิศทางการแสดงผลโดยอัตโนมัติ ซึ่งเป็นประโยชน์เมื่อมีการแทรกข้อความที่มีทิศทางการเขียนที่แตกต่างกันเข้ามาภายในข้อความหลัก
การใช้งาน <bdi>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of bdi tag</title>
</head>
<body>
<p>ภาษาอังกฤษ: Hello, my name is <bdi>أحمد</bdi>.</p>
<p>ภาษาฮิบรู: Your balance is <bdi>123.45₪</bdi>.</p>
</body>
</html>- ในประโยคแรก มีการแทรกชื่อภาษาอาหรับ “أحمد” ลงไปในข้อความภาษาอังกฤษ เบราว์เซอร์จะจัดการแสดงผลชื่อ “أحمد” ให้ถูกต้องแม้ว่าเป็นภาษา RTL (ขวาไปซ้าย) โดยไม่ทำให้โครงสร้างของประโยคภาษาอังกฤษเสียรูป
- ในประโยคที่สอง มีการใช้เครื่องหมายสกุลเงินเชเกล (₪) ซึ่งเป็นสกุลเงินของอิสราเอล ภาษา RTL เช่นกัน เมื่อห่อหุ้มด้วยแท็ก
<bdi>จะทำให้เครื่องหมายสกุลเงินไม่ไปยุ่งกับทิศทางของตัวเลข
การประยุกต์ใช้งาน
การแสดงข้อมูลผู้ใช้ที่มีภาษา RTL หากระบบที่ใช้รองรับผู้ใช้จากหลายประเทศที่มีภาษาเขียนต่างกัน เช่น ระบบที่แสดงชื่อผู้ใช้งานในฟิลด์ใดฟิลด์หนึ่ง เราสามารถใช้ <bdi> เพื่อให้แน่ใจว่าทิศทางการแสดงผลไม่สับสน เช่น
<p>User: <bdi>דוד</bdi> commented on your post.</p>แม้ว่าชื่อผู้ใช้จะเป็นภาษาฮิบรู (RTL) แต่ข้อความอื่นๆ จะไม่ถูกเปลี่ยนทิศทาง
การใช้ในข้อความประกาศหรือข้อมูลหลายภาษา ในกรณีที่ระบบมีการแสดงผลข้อมูลที่มีทิศทางการเขียนหลายแบบในการแสดงผลหน้าเดียวกัน เช่น
<p>ประกาศจากผู้ดูแลระบบ: <bdi>מערכת</bdi> is under maintenance.</p>ข้อความภาษาฮิบรูจะแสดงอย่างถูกต้องโดยไม่ทำให้ข้อความภาษาอังกฤษมีปัญหา
การแสดงข้อความทางการเงินที่มีทิศทางต่างกัน ในบางกรณีเช่น การแสดงผลจำนวนเงินที่มีหน่วยสกุลเงินในทิศทางต่างกัน เช่น สกุลเงินอิสราเอล
<p>ยอดเงินของคุณคือ <bdi>₪500</bdi>.</p>สรุป
<bdi>มีประโยชน์ในกรณีที่ต้องการแยกการแสดงผลของข้อความที่มีทิศทางต่างกัน โดยไม่กระทบต่อโครงสร้างหลักของข้อความ- เหมาะสำหรับระบบที่ต้องรองรับการแสดงผลหลายภาษา เช่น ชื่อผู้ใช้ ข้อความแจ้งเตือน หรือการแสดงผลจำนวนเงิน