คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL
สร้างเลย์เอาต์สองทิศทางอย่างแท้จริงที่พลิกอัตโนมัติสำหรับภาษาอาหรับและฮีบรูด้วยคุณสมบัติเชิงตรรกะ
คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตั้งค่า RTL ใน HTML
ประกาศ RTL ใน HTML ด้วยแอตทริบิวต์ dir และ lang ที่สอดคล้องกัน:
<div dir="rtl" lang="ar" class="rtl-box">مرحبا بكم في تخطيط RTL</div>
dir="rtl" ใน CSS
คุณยังสามารถกำหนดทิศทางใน CSS ได้ ซึ่งมีประโยชน์สำหรับการทดสอบหรือส่วนที่ใช้ RTL เพียงบางส่วน:
<div dir="rtl">هذا العنصر باتجاه RTL</div>
การทดสอบการสลับ LTR/RTL
การทดสอบอย่างรวดเร็ว: เพิ่ม dir="rtl" ให้กับ <html> เมื่อใช้คุณสมบัติเชิงตรรกะ เค้าโครงควรกลับด้านได้อย่างถูกต้อง แต่เมื่อใช้คุณสมบัติเชิงกายภาพ คุณจะเห็นว่าส่วนใดต้องแก้ไข
สิ่งที่ปรับโดยอัตโนมัติ
เมื่อกำหนด dir="rtl" สิ่งต่อไปนี้จะกลับทิศทางโดยอัตโนมัติด้วยคุณสมบัติเชิงตรรกะ:
- การจัดแนวข้อความ (start/end)
- ระยะขอบและระยะ内ใน (inline-start/end)
- เส้นขอบ (inline-start/end)
- การลอย (inline-start/end)
- การกำหนดตำแหน่ง (inset-inline-start/end)
สิ่งที่ NOT ปรับโดยอัตโนมัติ
แม้จะใช้คุณสมบัติเชิงตรรกะ สิ่งต่อไปนี้ยังต้องจัดการสำหรับ RTL:
- ภาพพื้นหลังที่มีเนื้อหาบอกทิศทาง
- ไอคอน SVG ที่มีความหมายตามทิศทาง เช่น ลูกศรและเครื่องหมายเชฟรอน
- การแปลง เช่น
translateX()— ใช้translateX(calc(-1 * var(--offset)))ร่วมกับตัวบ่งชี้ทิศทาง - การกำหนดตำแหน่งแบบสัมบูรณ์ด้วยค่าพิกเซลที่ระบุโดยตรง
การกลับด้านไอคอน SVG
CSS มีวิธีที่เป็นระเบียบสำหรับกลับด้านไอคอนตามทิศทางใน RTL:
<div dir="rtl"><span class="icon-arrow"></span> Mirrored arrow in RTL</div>
ตัวแปร CSS ที่รับรู้ทิศทาง
เทคนิคใช้ตัวแปร CSS สำหรับค่าที่รับรู้ทิศทาง:
<div dir="rtl" class="drawer">Drawer</div>
ตัวอย่าง RTL ในทางปฏิบัติ
องค์ประกอบการ์ดที่ใช้คุณสมบัติเชิงตรรกะ:
<div dir="rtl" class="card"><span class="card__icon">🔔</span><span class="card__text">تنبيه جديد</span></div>
font-size และ RTL
แบบอักษรภาษาอาหรับบางแบบดูใหญ่หรือเล็กกว่าแบบอักษรอักษรละตินเมื่อใช้ขนาดพิกเซลเท่ากัน หากจำเป็น ให้กำหนด font-size แยกตามระบบการเขียน:
<p>Default text (16px)</p>
<p lang="ar">نص عربي (17px)</p>
เครื่องมือทดสอบ
DevTools ของเบราว์เซอร์สามารถจำลองเค้าโครงแบบสองทิศทางได้ นอกจากนี้ ให้ใช้แผนผังการช่วยเหลือการเข้าถึงของ Chrome เพื่อตรวจสอบว่าลำดับการอ่านเป็นไปตามลำดับเชิงตรรกะ ไม่ใช่ลำดับที่แสดงทางภาพสำหรับโปรแกรมอ่านหน้าจอ
รายการตรวจสอบ RTL ในโลกจริง
รายการตรวจสอบ RTL:
- ระยะขอบและระยะ内ในทั้งหมดใช้คุณสมบัติเชิงตรรกะ
- เส้นขอบทั้งหมดใช้ inline-start/end
- การจัดแนวข้อความใช้ start/end
- ไอคอนบอกทิศทางกลับด้านด้วย scaleX(-1)
- ตำแหน่งแบบสัมบูรณ์ใช้ inset-inline-* เมื่อจำเป็น
- คอนเทนเนอร์ที่เลื่อนได้เลื่อนจากขอบที่ถูกต้อง
ตรวจสอบอย่างรวดเร็ว
การแปลง CSS ใดเป็นวิธีที่ง่ายที่สุดในการกลับด้านไอคอนลูกศร SVG ที่บอกทิศทางในเค้าโครง RTL
สรุปทบทวน
กำหนด dir="rtl" ให้กับองค์ประกอบ html เพื่อใช้เค้าโครง RTL คุณสมบัติเชิงตรรกะจะปรับระยะขอบ ระยะ内ใน เส้นขอบ และการจัดแนวโดยอัตโนมัติ ส่วนพิกเซลจริงในการแปลงและการกำหนดตำแหน่งแบบสัมบูรณ์ยังต้องพิจารณา RTL ด้วยตนเอง กลับด้านไอคอนบอกทิศทางด้วย scaleX(-1) ทดสอบโดยสลับ dir="rtl" ที่องค์ประกอบรากของคุณ
เรียนรู้ CSS ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL”
สร้างเลย์เอาต์สองทิศทางอย่างแท้จริงที่พลิกอัตโนมัติสำหรับภาษาอาหรับและฮีบรูด้วยคุณสมบัติเชิงตรรกะ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุใดจึงต้องใช้คุณสมบัติเชิงตรรกะ: การทำให้เป็นสากล
- ทิศทางบล็อกและอินไลน์
- มาร์จิน แพดดิง และเส้นขอบเชิงตรรกะ
- คุณสมบัติเชิงตรรกะในเลย์เอาต์ RTL