Cách biểu diễn văn bản tách biệt cho định dạng hai chiều (bidirectional) trong HTML

Thẻ <bdi> (Bi-Directional Isolation) dùng để bọc đoạn văn bản có hướng viết khác với ngữ cảnh xung quanh, ngăn chặn thuật toán bidi của trình duyệt làm lộn xộn thứ tự hiển thị.

Ví dụ minh họa

Danh sách quiz tên tiếng Anh trong văn bản RTL (ví dụ tiếng Ả Rập/Hebrew):

<!DOCTYPE html>
<html dir="rtl">
<head>
  <title>HTML bdi Tag</title>
</head>
<body>
  <p>Các bài Quiz:</p>
  <ul>
    <li>Lập trình: <bdi>Java</bdi></li>
    <li>Scripting: <bdi>JavaScript</bdi></li>
    
Di động: <bdi>Android</bdi></li>
  </ul>
</body>
</html>

Khi nào dùng <bdi>?

• Chèn nội dung user-generated (tên, comment) vào trang có hướng viết cố định.
• Hiển thị mã code, tên thương hiệu, từ tiếng Anh trong văn bản RTL.
• Ngăn số, dấu câu bị chuyển vị trí do thuật toán bidi.

So sánh <bdi> vs <bdo> vs dir