วิธีตั้งค่าทิศทางข้อความ (Text Direction) ใน HTML

ใช้ CSS property direction ผ่าน attribute style หรือ dir attribute เพื่อควบคุมทิศทางการไหลของข้อความ

ค่าที่ใช้ได้

ค่า	คำอธิบาย
`ltr`	ซ้ายไปขวา (Left-to-Right) - ค่าเริ่มต้น
`rtl`	ขวาไปซ้าย (Right-to-Left)
`inherit`	สืบทอดจาก element พ่อ

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Text Direction</title>
</head>
<body>
  <p style="direction: rtl;">This text will get displayed from right to left</p>
  <p>This is normal text (ltr).</p>
  <p dir="rtl">النص العربي يظهر من اليمين لليسار</p>
</body>
</html>

ความแตกต่าง direction vs writing-mode

direction - ควบคุมทิศทางแนวนอน (ltr/rtl)
writing-mode - ควบคุมทิศทางแนวตั้ง (horizontal-tb, vertical-rl, vertical-lr)

ข้อควรทราบ

inline style override global styles
สำหรับหน้าเว็บภาษา RTL ควรตั้ง <html dir="rtl" lang="ar">
รองรับในทุก browser รุ่นใหม่