<bdi>: The Bidirectional Isolate element

Try it

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

html {
  font-family: sans-serif;
}

bdi {
  /* Add your styles here */
}

.name {
  color: red;
}

Văn bản hai chiều là văn bản có thể chứa cả các chuỗi ký tự được sắp xếp từ trái sang phải (LTR) và các chuỗi ký tự được sắp xếp từ phải sang trái (RTL), chẳng hạn như một trích dẫn tiếng Ả Rập được nhúng trong một chuỗi tiếng Anh. Các trình duyệt triển khai Thuật toán Hai chiều Unicode để xử lý vấn đề này. Trong thuật toán này, các ký tự được gán hướng ngầm định: ví dụ, các ký tự Latin được xử lý là LTR trong khi các ký tự Ả Rập được xử lý là RTL. Một số ký tự khác (chẳng hạn như dấu cách và một số dấu câu) được xem là trung lập và được gán hướng dựa trên hướng của các ký tự xung quanh chúng.

Thường thì thuật toán hai chiều sẽ làm đúng mà không cần tác giả cung cấp bất kỳ đánh dấu đặc biệt nào nhưng, đôi khi, thuật toán cần sự trợ giúp. Đó là lúc <bdi> phát huy tác dụng.

Phần tử <bdi> được sử dụng để bao bọc một đoạn văn bản và hướng dẫn thuật toán hai chiều xử lý văn bản này riêng biệt với các vùng xung quanh. Điều này hoạt động theo hai cách:

• Hướng của văn bản nhúng trong <bdi> không ảnh hưởng đến hướng của văn bản xung quanh.
• Hướng của văn bản nhúng trong <bdi> không bị ảnh hưởng bởi hướng của văn bản xung quanh.

Ví dụ, hãy xem xét một số văn bản như:

EMBEDDED-TEXT - 1st place

Nếu EMBEDDED-TEXT là LTR, điều này hoạt động tốt. Nhưng nếu EMBEDDED-TEXT là RTL, thì - 1 sẽ được xem là văn bản RTL (vì nó bao gồm các ký tự trung lập và yếu). Kết quả sẽ bị lộn xộn:

1 - EMBEDDED-TEXTst place

Nếu bạn biết hướng của EMBEDDED-TEXT trước, bạn có thể khắc phục vấn đề này bằng cách bao bọc EMBEDDED-TEXT trong một <span> với thuộc tính dir được đặt thành hướng đã biết. Nhưng nếu bạn không biết hướng — ví dụ, vì EMBEDDED-TEXT đang được đọc từ cơ sở dữ liệu hoặc do người dùng nhập — bạn nên sử dụng <bdi> để ngăn hướng của EMBEDDED-TEXT ảnh hưởng đến môi trường xung quanh.

Mặc dù hiệu ứng trực quan tương tự có thể đạt được bằng cách sử dụng quy tắc CSS unicode-bidi: isolate trên một <span> hoặc phần tử định dạng văn bản khác, các tác giả HTML không nên sử dụng phương pháp này vì nó không có tính ngữ nghĩa và các trình duyệt được phép bỏ qua kiểu dáng CSS.

Nhúng các ký tự trong <span dir="auto"> có cùng hiệu ứng như sử dụng <bdi>, nhưng ngữ nghĩa của nó kém rõ ràng hơn.

Thuộc tính

Giống như tất cả các phần tử HTML khác, phần tử này hỗ trợ các thuộc tính toàn cục, ngoại trừ thuộc tính dir hoạt động khác so với bình thường: nó mặc định là auto, nghĩa là giá trị của nó không bao giờ được kế thừa từ phần tử cha. Điều này có nghĩa là trừ khi bạn chỉ định giá trị rtl hoặc ltr cho dir, user agent sẽ xác định hướng chính xác để sử dụng dựa trên nội dung của <bdi>.

Ví dụ

Không có bdi chỉ với LTR

Ví dụ này liệt kê những người chiến thắng trong một cuộc thi chỉ sử dụng các phần tử <span>. Khi tên chỉ chứa văn bản LTR, kết quả trông ổn:

<ul>
  <li><span class="name">Henrietta Boffin</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Không có bdi với văn bản RTL

Ví dụ này liệt kê những người chiến thắng trong một cuộc thi chỉ sử dụng các phần tử <span>, và một trong những người chiến thắng có tên gồm văn bản RTL. Trong trường hợp này, - 1, bao gồm các ký tự trung lập hoặc yếu, sẽ nhận hướng của văn bản RTL, và kết quả sẽ bị lộn xộn:

<ul>
  <li><span class="name">اَلأَعْشَى</span> - 1st place</li>
  <li><span class="name">Jerry Cruncher</span> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Sử dụng bdi với văn bản LTR và RTL

Ví dụ này liệt kê những người chiến thắng trong một cuộc thi sử dụng các phần tử <bdi>. Các phần tử này hướng dẫn trình duyệt xử lý tên riêng biệt với ngữ cảnh nhúng của nó, vì vậy kết quả đầu ra của ví dụ được sắp xếp đúng thứ tự:

<ul>
  <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li>
</ul>

body {
  border: 1px solid #3f87a6;
  max-width: calc(100% - 40px - 6px);
  padding: 20px;
  width: calc(100% - 40px - 6px);
  border-width: 1px 1px 1px 5px;
}

Tóm tắt kỹ thuật

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• Inline markup and bidirectional text in HTML
• Unicode Bidirectional Algorithm basics
• Localization
• Phần tử HTML liên quan: <bdo>
• Các thuộc tính CSS liên quan: direction, unicode-bidi