Thuộc tính style.unicodeBidi trong HTML DOM kiểm soát việc ghi đè hướng viết văn bản để hỗ trợ nhiều ngôn ngữ (từ trái sang phải và từ phải sang trái) trong cùng tài liệu, thường dùng kết hợp với direction.
Cú pháp
Lấy giá trị unicodeBidi
object.style.unicodeBidi
Thiết lập giá trị unicodeBidi
object.style.unicodeBidi = "giá_trị"
Các giá trị hợp lệ
| Giá trị | Mô tả |
|---|---|
| inherit | Kế thừa từ phần tử cha. |
| initial | Đặt về mặc định. |
| normal | Không thêm cấp độ nhúng nào (mặc định). |
| embed | Thêm một cấp độ nhúng (cho phép hướng viết khác trong dòng). |
| bidi-override | Thêm cấp độ nhúng và sắp xếp lại theo hướng direction (ghi đè hoàn toàn). |
Ví dụ minh họa
Đảo hướng viết đoạn văn từ LTR sang RTL với bidi-override:
<!DOCTYPE html>
<html>
<head>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính unicodeBidi</h1>
<p style="direction:ltr">Đây là đoạn văn bản mẫu.</p>
<button onclick="add()" class="btn">Thiết lập unicodeBidi</button>
<script>
function add() {
document.querySelector('p').style.direction = "rtl";
document.querySelector('p').style.unicodeBidi = "bidi-override";
}
</script>
</body>
</html>
Kết quả
Ban đầu văn bản hiển thị bình thường (trái sang phải). Sau khi nhấn nút, direction: rtl và unicode-bidi: bidi-override làm đảo ngược thứ tự ký tự (hiển thị từ phải sang trái).