home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ dir ใน HTML: กำหนดทิศทางข้อความ (LTR/RTL)

แอตทริบิวต์ dir ใน HTML คืออะไร?

แอตทริบิวต์ dir (Direction) ใช้สำห กำหนดทิศทางการแสดงข้อความ (Text Direction)** ของอิลิเมนต์และลูกหลาน

ไวยากรณ์ (Syntax)

<element dir="ltr | rtl | auto">

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

ค่าคำอธิบาย
ltrLeft-to-Right (ซ้ายไปขวา) - ค่าเริ่มต้น ภาษาอังกฤษ ไทย ฯลฯ
rtlRight-to-Left (ขวาไปซ้าย) - ภาษาอาหรับ ฮิบรู ฟาร์สี อูร์ดู
autoเบราวเซอร์ตัดสินใจจากตัวอักษรแรกที่พบ (First strong character)

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

<!DOCTYPE html>
<html>
<body>
  <h2>หัวข้อตัวอย่าง</h2>
  <p>นี่คือข้อความปกติ (LTR)</p>
  <p dir="rtl">نص من اليمين إلى اليسار</p>
  <p dir="auto">هذا نص بالعربية</p>
</body>
</html>

ผลลัพธ์

พารากราฟที่ 2 (dir="rtl") จะแสดงข้อความอาหรับจากขวาไปซ้าย
พารากราฟที่ 3 (dir="auto") เบราวเซอร์ตรวจจับตัวอักษรอาหรับตัวแรก → ตั้งเป็น RTL อัตโนมัติ

ผลกระทบต่อการจัดวาง (Layout)

  • ลำดับคอลัมน์ใน Table, Flexbox, Grid จะกลับด้าน
  • Margin/Padding เริ่ม/จบ จะสลับ (Logical Properties: margin-inline-start/end)
  • Text alignment: start/end แทน left/right
  • Scroll direction, Cursor movement จะเปลี่ยนตาม

CSS Logical Properties (แนะนำสำหรับ RTL Support)

/* แทน margin-left/right */
margin-inline-start: 10px;  /* LTR: left, RTL: right */
margin-inline-end: 20px;    /* LTR: right, RTL: left */

/* แทน padding-left/right */
padding-inline-start: 15px;

/* แทน border-left/right */
border-inline-start: 1px solid red;

/* แทน float: left/right */
float: inline-start;

/* แทน text-align: left/right */
text-align: start;  /* LTR: left, RTL: right */
text-align: end;    /* LTR: right, RTL: left */

จุดสำคัญ

  • dir สืบทอด (Inherit) ให้ลูกหลานทั้งหมด
  • ตั้งบน <html dir="rtl"> สำหรับหน้าเว็บ RTL ทั้งหน้า
  • dir="auto" เหมาะสำหรับ User-generated Content (Comment, Chat)
  • รองรับใน HTML5 ทุกเบราวเซอร์