HTML Academy · บทเรียน

dir=rtl สำหรับข้อความจากขวาไปซ้าย

เปิดใช้การจัดวาง RTL สำหรับภาษาอาหรับ ฮีบรู และภาษา RTL อื่น ๆ

dir=rtl สำหรับข้อความจากขวาไปซ้าย เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

dir ทำหน้าที่อะไร

แอตทริบิวต์ dir ระบุทิศทางพื้นฐานของข้อความในองค์ประกอบ dir="ltr" (ซ้ายไปขวา ซึ่งเป็นค่าเริ่มต้นของภาษาส่วนใหญ่) หรือ dir="rtl" (ขวาไปซ้าย สำหรับภาษาอาหรับ ฮีบรู เปอร์เซีย และอูรดู)

กำหนดบน html สำหรับ RTL ทั้งเว็บไซต์

สำหรับเว็บไซต์ภาษาอาหรับ ฮีบรู เปอร์เซีย และอูรดู ให้กำหนด dir="rtl" บนองค์ประกอบราก การตั้งค่านี้จะพลิกทิศทางการไหลเริ่มต้นของบล็อกทั้งหมด: จัดข้อความชิดขวา รายการเยื้องไปทางขวา แถบเลื่อนย้ายไปทางซ้าย และเค้าโครงจะสะท้อนโดยอัตโนมัติภายใต้ CSS สมัยใหม่

<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>

ข้อความสองทิศทาง

ข้อความที่มีหลายทิศทาง (เช่น ภาษาอาหรับที่แทรกชื่อแบรนด์ภาษาอังกฤษ) จะเป็นไปตามอัลกอริทึมข้อความสองทิศทางของ Unicode โดยอัตโนมัติ ทิศทางพื้นฐาน (จาก dir) จะควบคุมการจัดเรียงส่วนข้อความทิศทางเดียวในระดับบรรทัด ส่วนลำดับอักขระแต่ละชุดจะไหลไปตามทิศทางธรรมชาติของสคริปต์นั้น

คุณสมบัติเชิงตรรกะของ CSS

CSS สมัยใหม่ใช้คุณสมบัติเชิงตรรกะที่ปรับตามทิศทาง: margin-inline-start (ซ้ายใน LTR ขวาใน RTL), padding-inline-end, border-inline-start การแทนที่ซ้าย/ขวาด้วย start/end ทำให้สไตล์ชีตเดียวรองรับได้ทั้งสองทิศทาง

/* Works in both directions */
.card {
  padding-inline-start: 16px;
  margin-block-end: 12px;
  border-inline-end: 1px solid #ccc;
}

Flexbox และ Grid ปรับตามทิศทางโดยอัตโนมัติ

ทิศทางแถวของเฟล็กซ์บ็อกซ์จะเคารพค่า dir: ใน RTL รายการต่าง ๆ จะไหลจากขวาไปซ้าย คอลัมน์ในแม่แบบกริดก็จะกลับทิศทางเช่นกัน ดังนั้นเค้าโครงส่วนใหญ่ที่เขียนด้วยเฟล็กซ์บ็อกซ์หรือกริดจึงทำงานใน RTL ได้โดยไม่ต้องใช้ CSS เฉพาะทิศทาง เค้าโครงสมัยใหม่ไม่ขึ้นกับทิศทาง

ไอคอนที่ควรพลิกทิศทาง

ไอคอนบอกทิศทาง เช่น ลูกศรย้อนกลับ ลูกศรถัดไป และเลิกทำ/ทำซ้ำ ต้องพลิกใน RTL ใช้ CSS transform: scaleX(-1) ภายใน [dir="rtl"] หรือจัดเตรียม SVG สำหรับ RTL แยกต่างหาก ไอคอนที่ไม่บอกทิศทาง เช่น ค้นหา การตั้งค่า และเฟือง ยังคงเหมือนเดิม

[dir="rtl"] .icon-back {
  transform: scaleX(-1);
}

การจัดแนวข้อความ

ควรใช้ text-align: start แทน text-align: left โดย start จะหมายถึงซ้ายใน LTR และขวาใน RTL เช่นเดียวกันกับ end การจัดแนวที่คำนึงถึงทิศทางช่วยกำจัดข้อผิดพลาดประเภทหนึ่งเมื่อเพิ่มการรองรับ RTL

การเขียนทับ dir รายองค์ประกอบ

กำหนด dir="auto" ให้กับองค์ประกอบเพื่อให้เบราว์เซอร์ตรวจจับทิศทางจากอักขระตัวแรกที่มีทิศทางชัดเจน: <p dir="auto">{user.name}</p> วิธีนี้รองรับชื่อที่ผู้ใช้ส่งมา ซึ่งอาจเป็นภาษาอาหรับ ภาษาอังกฤษ หรือเป็นข้อความผสม โดยไม่ต้องเขียนกรณีพิเศษ

การฝังข้อความสองทิศทาง

องค์ประกอบ bdi (การแยกข้อความสองทิศทาง) และ bdo (การเขียนทับข้อความสองทิศทาง) ช่วยควบคุมอย่างละเอียดว่าอัลกอริทึมข้อความสองทิศทางจะจัดการกับข้อความบางส่วนอย่างไร เหมาะสำหรับการแสดงข้อมูลที่ผู้ใช้ป้อนแบบตรงตามต้นฉบับ หรือการบังคับทิศทางเฉพาะให้กับตัวอย่างโค้ดภายในข้อความที่ไหลต่อเนื่อง

ช่องกรอกข้อมูล

ช่องป้อนข้อมูลจะสืบทอดค่า dir จากองค์ประกอบแม่ สำหรับข้อความที่ผู้ใช้ป้อนซึ่งมีทิศทางแตกต่างกัน เช่น แอปแชตที่มีผู้ใช้หลายภาษา ให้กำหนด dir="auto" กับช่องป้อนข้อมูลแต่ละช่อง เพื่อให้แสดงผลได้ถูกต้องตามเนื้อหา

การทดสอบเค้าโครง RTL

เบราว์เซอร์ช่วยให้คุณดูตัวอย่าง RTL ได้โดยกำหนด document.documentElement.dir = "rtl" ชั่วคราวในคอนโซลของ DevTools ตรวจสอบทิศทางของไอคอน การเติมระยะภายใน/ระยะขอบ ตำแหน่งแถบเลื่อน และตรวจว่าไม่มีองค์ประกอบใดใช้ค่าซ้าย/ขวาที่กำหนดตายตัว ทั้งที่ควรใช้ start/end

ทิศทางของ CSS แตกต่างจากทิศทางของเค้าโครง

คุณสมบัติ direction ของ CSS และแอตทริบิวต์ dir ของ HTML ให้ผลเหมือนกันกับเค้าโครงส่วนใหญ่ ควรใช้แอตทริบิวต์ HTML เพราะเทคโนโลยีสิ่งอำนวยความสะดวก โปรแกรมส่งอีเมล และตัวประมวลผลอื่น ๆ สามารถอ่านค่าได้ ขณะที่คุณสมบัติ CSS มีผลเฉพาะการแสดงผลในเบราว์เซอร์

ตรวจสอบความรู้

เหตุใดจึงควรใช้คุณสมบัติเชิงตรรกะของ CSS เช่น margin-inline-start แทน margin-left เมื่อรองรับภาษาที่ใช้ RTL

สรุป

dir="rtl" บน <html> จะพลิกทิศทางพื้นฐานสำหรับเว็บไซต์ภาษาอาหรับ/ฮีบรู/เปอร์เซีย/อูรดู คุณสมบัติเชิงตรรกะของ CSS (margin-inline-start, padding-block-end) จะปรับตามโดยอัตโนมัติ เค้าโครงเฟล็กซ์บ็อกซ์/กริดจะสะท้อนโดยไม่ต้องแก้ไข พลิกไอคอนที่บอกทิศทาง ใช้ text-align: start/end และใช้ dir="auto" กับเนื้อหาจากผู้ใช้ที่ไม่ทราบทิศทาง

คำถามที่พบบ่อย

บทเรียน “dir=rtl สำหรับข้อความจากขวาไปซ้าย” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “dir=rtl สำหรับข้อความจากขวาไปซ้าย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “dir=rtl สำหรับข้อความจากขวาไปซ้าย”

เปิดใช้การจัดวาง RTL สำหรับภาษาอาหรับ ฮีบรู และภาษา RTL อื่น ๆ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “dir=rtl สำหรับข้อความจากขวาไปซ้าย” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ
dir=rtl สำหรับข้อความจากขวาไปซ้าย
องค์ประกอบ bdi และ bdo
charset และการจัดการ Unicode: อักขระพิเศษ

← กลับไปที่ HTML Academy