CSS logical properties คืออะไร และเหตุใดจึงมีความสำคัญต่อการสนับสนุนหลายภาษา

Question

Accepted Answer

**Logical properties** อธิบายเลย์เอาต์ในแง่ของ **ทิศทางการไหลของเนื้อหา** (เริ่มต้น/สิ้นสุด, inline/block) แทนที่จะใช้ทิศทางทางกายภาพ (ซ้าย/ขวา/บน/ล่าง) นี่ทำให้สไตล์ชีตเดียวปรับตัวโดยอัตโนมัติสำหรับภาษาที่เขียนจากขวาไปซ้าย (อาหรับ ฮีบรู) หรือบนลงล่าง ## Physical vs logical ```css /* ❌ physical — hard-codes "left", breaks in RTL languages */ .card { margin-left: 1rem; padding-right: 2rem; text-align: left; border-left: 2px solid; } /* ✅ logical — follows the writing direction */ .card { margin-inline-start: 1rem; /* "start" = left in LTR, RIGHT in RTL */ padding-inline-end: 2rem; text-align: start; border-inline-start: 2px solid; } ``` ## สองแกน - **inline** — ทิศทางที่ข้อความไหล (แนวนอนในภาษาอังกฤษ; แกน "reading"). - **block** — ทิศทางที่บรรทัดเรียงซ้อน (แนวตั้งในภาษาอังกฤษ; แกน "paragraph"). ```css margin-inline: 1rem; /* left + right in LTR (both inline sides) */ margin-block: 2rem; /* top + bottom */ margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */ padding-block-end: 1rem; /* bottom in horizontal writing */ inset-inline-start: 0; /* logical version of left/right for positioning */ ``` ## เหตุใดจึงมีความสำคัญต่อ i18n ด้วย physical properties การสนับสนุนภาษาอาหรับหมายถึงการเขียนชุดสไตล์ที่สะท้อนกลับทั้งหมด (`margin-left` → `margin-right` เป็นต้น) ด้านหลัง `[dir="rtl"]` ด้วย logical properties **CSS เดียวกันก็ใช้งานได้** — ตั้ง `dir="rtl"` บน html และ `margin-inline-start` จะเปลี่ยนไปด้านขวาโดยอัตโนมัติ: ```html ``` ## นอกเหนือจาก RTL Logical properties ยังจัดการกับโหมดการเขียนแนวตั้ง (เช่น การจัดพิมพ์บางอย่างในเอเชียตะวันออก) และทำให้ `margin-inline: auto` เป็นวิธีที่ชัดเจนในการจัดแนวกลางไม่ว่าทิศทางใด ## เหตุใดจึงมีความสำคัญ สำหรับผลิตภัณฑ์ใดก็ตามที่ส่งไปหลายภาษา logical properties ช่วยกำจัดความจำเป็นในการรักษาสไตล์ชีต RTL ที่สะท้อนกลับ — ชุดกฎเดียวปรับตัวให้เข้ากับทิศทางการเขียน แม้แต่สำหรับไซต์ LTR เท่านั้น พวกมันก็เป็นรูปแบบความคิดที่สะอาดกว่า (เริ่มต้น/สิ้นสุด, inline/block) และเป็นค่าเริ่มต้นที่แนะนำมากขึ้นในCSS สมัยใหม่