พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน bdo Tag

แท็ก <bdo> (Bi-Directional Override) ใน HTML5 ใช้สำหรับการกำหนดทิศทางการแสดงผลของข้อความ โดยปกติแล้ว ภาษาส่วนใหญ่จะถูกแสดงผลจากซ้ายไปขวา (Left-to-Right หรือ LTR) แต่ในบางภาษา เช่น ภาษาอาหรับหรือภาษาฮีบรู จะถูกแสดงผลจากขวาไปซ้าย (Right-to-Left หรือ RTL) ดังนั้นเมื่อมีการใช้งาน <bdo> จะช่วยควบคุมทิศทางของข้อความตามที่ผู้พัฒนาต้องการ

คุณสมบัติของ <bdo>

  • แท็ก <bdo> ใช้ร่วมกับแอตทริบิวต์ dir (direction) ที่สามารถกำหนดทิศทางการแสดงผลได้
    • ltr: กำหนดให้แสดงข้อความจากซ้ายไปขวา
    • rtl: กำหนดให้แสดงข้อความจากขวาไปซ้าย

โครงสร้างแท็ก <bdo>

HTML
<bdo dir="ทิศทางที่ต้องการ">ข้อความ</bdo>

ตัวอย่างการใช้งาน <bdo>

การแสดงข้อความจากขวาไปซ้าย (RTL)

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BDO Example</title>
</head>
<body>
  <p>ข้อความปกติจากซ้ายไปขวา: Hello, world!</p>
  <p>ข้อความจากขวาไปซ้าย: <bdo dir="rtl">Hello, world!</bdo></p>
</body>
</html>

ข้อความ “Hello, world!” จะถูกแสดงจากขวาไปซ้าย

การแสดงข้อความจากซ้ายไปขวา (LTR) ในบริบทที่ทิศทางเริ่มต้นเป็น RTL

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BDO Example</title>
</head>
<body dir="rtl">
  <p>ข้อความในบริบทที่ RTL: مرحبا بالعالم!</p>
  <p>เปลี่ยนเป็น LTR: <bdo dir="ltr">مرحبا بالعالم!</bdo></p>
</body>
</html>

ข้อความ “مرحبا بالعالم!” ที่อยู่ภายในแท็ก <bdo> จะถูกแสดงจากซ้ายไปขวา แม้บริบทหลักจะเป็น RTL

การควบคุมการแสดงตัวเลขที่อยู่ในบริบทที่ทิศทางตรงกันข้าม

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BDO Example</title>
</head>
<body>
  <p>ทิศทางปกติ (LTR): 12345</p>
  <p>ทิศทาง RTL: <bdo dir="rtl">12345</bdo></p>
</body>
</html>

ตัวเลข “12345” จะถูกแสดงผลในทิศทางตรงข้าม โดยจากขวาไปซ้าย

การประยุกต์ใช้งาน

  • ในเว็บไซต์ที่มีหลายภาษา: หากต้องการให้ข้อความบางส่วนแสดงในทิศทางที่ต่างจากภาษาหลักของเว็บไซต์
  • ในเนื้อหาที่มีการผสมกันระหว่างตัวเลขและตัวอักษร: ช่วยให้การแสดงผลตัวเลขในภาษา RTL ถูกต้องตามทิศทางที่ควรจะเป็น
  • ควบคุมการแสดงผลของข้อความ: ใช้เมื่อเกิดปัญหาการจัดวางข้อความและตัวอักษรที่ไม่ตรงตามที่ต้องการ

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ