วิธีแสดงข้อความจากขวาไปซ้าย (Right-to-Left) ใน HTML

ใช้ CSS property direction: rtl เพื่อแสดงข้อความจากขวาไปซ้าย เหมาะสำหรับภาษาอรบิก ฮิบรู ฟาร์สี ฯลฯ

ค่าของ direction property

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Text Direction</title>
</head>
<body>
  <p style="direction: rtl;">Displayed from right to left</p>
  <p dir="rtl">ข้อความภาษาไทยก็ใช้ได้ แต่ไทยปกติอ่านซ้ายไปขวา</p>
  <p dir="rtl">مرحبا بالعالم</p>
</body>
</html>

Attribute dir (HTML Global Attribute)

สามารถใช้ attribute dir โดยตรงในแท็ก HTML ได้:

<p dir="rtl">نص عربي</p>
<div dir="rtl"><p>ย่อหน้าทั้งหมดใน div นี้จะเป็น RTL</p></div>

ข้อควรทราบ

• สำหรับภาษา RTL จริง ควรเพิ่ม <html dir="rtl" lang="ar"> ที่ระดับ document
• direction ส่งผลต่อลำดับการไหลของ inline elements และการจัดตำแหน่ง
• inline style จะ override global styles