BDI là gì? Cách sử dụng Thẻ tag bdi trong html

BDI là gì

BDI là một tag trong html rất ít khi được sử dụng. Thẻ BDI được viết tắt từ Bi-Directional Isolation (tạm dịch là định hướng cách li). Thẻ <bdi> có nhiệm vụ tách một phần của văn bản có thể được định dạng theo một hướng khác với văn bản bên ngoài nó.

Lúc đầu đọc ý nghĩa của thẻ bdi mình cũng không thể hiểu được. Có thể đó là lý do tại sao thẻ này rất ít sử dụng. Mình sẽ giải thích kỹ hơn ở phần ví dụ nha.

Ví dụ về thẻ BDI trong html

Để các bạn để hiểu về thẻ BDI mình có 1 ví dụ như sau:

Dưới đây là sẽ kết quả của ví dụ 1:

Các bạn chú ý đến ký tự đặc biệt “إيان” mà mình sử dụng nha. Ký tự này khi sử dụng nó sẽ không theo quy tắc của văn bản. Nếu mình không sử dụng cặp thẻ <bdi></bdi> thì ký tự đặc biệt “إيان” sẽ bị tràn về bên phải. Các bạn xem ví dụ 2 khi mình không sử dụng thẻ bdi nha:

Dưới đây sẽ là kết quả khi chúng ta không sử dụng thẻ bdi cho ký tự đặc biệt “إيان“:

Xem ví dụ 2 ta thấy không có gì khác biệt. Nhưng khi thao tác, các bạn thử xóa cặp thẻ bdi bao ký tự đặc biệt sẽ thấy.

Qua 2 ví dụ trên có thể nói thẻ <bdi> giúp chúng ta tách riêng những ký tự lạ. Và định dạng chúng theo quy tắc văn bản chúng ta đang xài.

Lưu ý:

Thẻ là một thẻ mới trong html 5. Nên trước đó để giải quyết vấn đề này chúng ta có nhiều cách khác nhau. Thường chúng ta hay sử dụng thẻ <span></span>. Sau đó chỉ cần định dạng CSS lại là đẹp. Nên thẻ này rất ít khi được sử dụng trong html.

Các trình duyệt hộ trợ thẻ tag <bdi> trong html

Các duyệt trình website hiện nay đã số đều hỗ trợ thẻ bdi. Trừ IE là hơi kén chọn, (Thật ra hiện này số lượng người xài IE cũng khá ít)

Thuộc tính của thẻ bdi trong html

Thẻ BDI có thẻ sử dụng được tất cả các thuộc tính trong html. Dưới đây là các sử dụng:

<bdi thuộctính=”giá trị”></bdi>

Có nhiều thuộc tính hay sử dụng như class, id, for…Các bạn có thể xem thêm tại bản thuộc tính dành cho html

Sự kiện của thẻ bdi trong html

Thẻ BDI có thẻ sử dụng được tất cả các sự kiện trong html. Cách sử dụng cũng giống như thuộc tính html. Các bạn có thể sử dụng gọi các sự kiện java để website chạy mượt hơn

Kết luận

Thẻ bdi là một thẻ mới trong html 5. Nên rất còn nhiều xa lạ với nhiều người. Ngay cả bản thân mình cũng khó để sử dụng nó thành thạo. Tốt nhất các bạn vẫn xài cách cũ của html 4 là ok nhất. Mọi thắc mắc về thẻ BDI trong html các bạn có thể bình luận ở dưới nha. Cám ơn các bạn đã theo dõi bài viết của mình.