คุณสมบัติ direction ของ HTML DOM Style: ทิศทางข้อความ

คุณสมบัติ direction ใช้สำหรับระบุหรือดึงค่าทิศทางของข้อความ (Text Direction) ค่าเริ่มต้นคือ ltr (Left-to-Right)

ไวยากรณ์ (Syntax)

object.style.direction = "ltr|rtl|initial|inherit"

ค่าที่รองรับ

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

<!DOCTYPE html>
<html>
<head>
<style>
  div, span {
    margin: 3px;
    padding: 4px;
  }
  div {
    height: 50px;
    width: 540px;
    border: 2px solid black;
  }
  span {
    float: left;
    width: 500px;
    height: 40px;
    background-color: lightblue;
  }
</style>
<script>
  function changeDir() {
    document.getElementById("DIV1").style.direction = "rtl";
    document.getElementById("Sample").innerHTML = "ทิศทางข้อความด้านบนเปลี่ยนเป็นขวา-ซ้าย (RTL) แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">
  <span>THIS IS SOME TEXT INSIDE A SPAN ELEMENT.</span>
</div>
<p>คลิกปุ่มเพื่อเปลี่ยนทิศทางข้อความภายใน span element ด้านบน</p>
<button onclick="changeDir()">เปลี่ยนทิศทางข้อความ</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ข้อความเรียงซ้าย-ขวา (LTR)
หลัง: ข้อความเรียงขวา-ซ้าย (RTL) - จุดสิ้นสุดประโยคอยู่ซ้าย

ความสัมพันธ์กับ unicode-bidi

สำหรับภาษา RTL จริง ต้องใช้ร่วมกับ unicode-bidi:

.arabic-text {
  direction: rtl;
  unicode-bidi: embed; /* หรือ bidi-override */
}

ผลกระทบต่อ Layout

Logical Properties (สมัยใหม่)

แทนที่จะใช้ left/right ให้ใช้ Logical Properties:

.box {
  margin-inline-start: 10px;   /* margin-left (LTR) / margin-right (RTL) */
  margin-inline-end: 20px;     /* margin-right (LTR) / margin-left (RTL) */
  padding-inline-start: 15px;
  border-inline-start: 2px solid red;
}

การรองรับเบราว์เซอร์

รองรับทุกเบราว์เซอร์ (IE5.5+)