คุณสมบัติ unicodeBidi ของ HTML DOM Style

คุณสมบัติ unicodeBidi ของ HTML DOM Style ใช้ร่วมกับคุณสมบัติ direction เพื่อควบคุมการแสดงผลข้อความที่มีหลายภาษา (bidirectional text) ในเอกสาร HTML เช่น ภาษาที่อ่านจากขวาไปซ้าย (RTL) ผสมกับภาษาที่อ่านจากซ้ายไปขวา (LTR)

ไวยากรณ์ (Syntax)

การดึงค่า unicodeBidi

object.style.unicodeBidi

การกำหนดค่า unicodeBidi

object.style.unicodeBidi = "value"

ค่าที่รองรับ (Values)

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

ตัวอย่างด้านล่างแสดงการใช้ unicodeBidi ร่วมกับ direction เพื่อกลับทิศทางข้อความ:

<!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>ตัวอย่างคุณสมบัติ DOM Style unicodeBidi</h1>
<p style="direction:ltr">This is a paragraph element with some dummy text.</p>
<button onclick="add()" class="btn">Set unicodeBidi</button>
<script>
  function add() {
    document.querySelector('p').style.direction = "rtl";
    document.querySelector('p').style.unicodeBidi = "bidi-override";
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: ข้อความแสดงปกติซ้ายไปขวา (LTR) หลังคลิกปุ่ม Set unicodeBidi: ข้อความจะกลับทิศทางแสดงขวาไปซ้าย (RTL) และเรียงลำดับตัวอักษรย้อนกลับ

การใช้งานจริง: เหมาะสำหรับเว็บไซต์หลายภาษา ที่มีทั้งภาษาอังกฤษ (LTR) และภาษาอาหรับ/ฮีบรู (RTL) ร่วมกัน