คุณสมบัติ dir ของ Bdo ใน HTML DOM

คุณสมบัติ dir ของ Bdo

คุณสมบัติ dir ของ <bdo> element (Bi-Directional Override) ใช้ลบล้างทิศทางข้อความปัจจุบันซึ่งค่าเริ่มต้นคือซ้ายไปขวา (LTR) คุณสมบัติ dir ตั้งค่าหรือคืนค่าของแอตทริบิวต์ dir ของอิลิเมนต์ <bdo> แอตทริบิวต์ dir เป็นบังคับสำหรับ <bdo> ระบุทิศทางการไหลของข้อความ

ไวยากรณ์ (Syntax)

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

bdoObject.dir = "ltr|rtl"

ค่า: ltr = ซ้ายไปขวา, rtl = ขวาไปซ้าย

การอ่านค่า dir

bdoObject.dir

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

ตัวอย่างด้านล่างแสดงการอ่านและเปลี่ยนทิศทางข้อความของ <bdo>

<!DOCTYPE html>
<html>
<body>
    <h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
    <p>Click the below button to get text direction of the above text</p>
    <button onclick="getDirection()">GET DIRECTION</button>
    <button onclick="setDirection()">SET DIRECTION</button>
    <p id="Sample"></p>
    <script>
        function getDirection() {
            var x = document.getElementById("myBdo").dir;
            document.getElementById("Sample").innerHTML = "The text direction is from " + x;
        }
        function setDirection() {
            document.getElementById("myBdo").dir = "ltr";
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: ข้อความ "RIGHT-TO-LEFT" แสดงจากขวาไปซ้าย

คลิก GET DIRECTION: แสดง "The text direction is from rtl"

คลิก SET DIRECTION: เปลี่ยนทิศทางเป็น ltr (ซ้ายไปขวา) ข้อความจะกลับมาปกติ

คำอธิบายโค้ด

1. BDO element: <bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo>
2. ปุ่ม GET DIRECTION: เรียก getDirection() อ่านค่า dir
3. ปุ่ม SET DIRECTION: เรียก setDirection() ตั้งค่า dir = "ltr"

คำอธิบายเพิ่มเติม

• <bdo> ลบล้างอัลกอริทึม bidirectional algorithm ของ Unicode
• ใช้เมื่อต้องการควบคุมทิศทางข้อความอย่างสมบูรณ์ (เช่นผสมภาษา LTR และ RTL)
• คุณสมบัติ dir สามารถใช้กับทุก HTML element (global attribute)
• ค่า auto ให้ browser ตัดสินใจจากเนื้อหา (first strong character)
• CSS alternatives: direction: rtl; unicode-bidi: bidi-override;