CSS Logical Properties Converter: เขียน CSS รองรับ RTL ได้โดยไม่ต้องเดา

ถ้าคุณเคยส่งงานเว็บที่ภาษาอังกฤษดูสวยสมบูรณ์ แต่พอผู้ใช้ที่อ่านภาษาอาหรับหรือฮีบรูเปิดขึ้นมาแล้วเลย์เอาต์พังทั้งหน้า ตัวการหลักก็คือ physical properties ครับ เพราะโค้ดบรรทัดเดียวอย่าง margin-left: 16px สมมติว่า "ด้านซ้าย" คือจุดเริ่มต้นของเนื้อหาเสมอ ซึ่งสำหรับคนที่อ่านจากขวาไปซ้ายราว 400 ล้านคนทั่วโลก สมมติฐานนี้ไม่เป็นจริงเลย ข่าวดีคือ CSS ยุคใหม่แก้ปัญหานี้ไว้แล้วด้วย logical properties และเครื่องมือ CSS Logical Properties Converter ฟรี ช่วยให้การย้ายโค้ดไปใช้เป็นเรื่องง่าย

logical properties อธิบายระยะห่างโดยอิงกับทิศทางการไหลของข้อความ ไม่ใช่ขอบจริงของหน้าจอ โดย block axis จะเดินตามการไหลของบล็อกเนื้อหา (บนลงล่างในข้อความภาษาอังกฤษปกติ) ส่วน inline axis จะเดินตามทิศทางการอ่าน (ซ้ายไปขวาในภาษาอังกฤษ แต่ขวาไปซ้ายในภาษาอาหรับ) เพราะการแมปที่ถูกต้องขึ้นอยู่ทั้ง writing-mode และ direction ของเลย์เอาต์ การแปลง margin-top เป็น margin-block-start หรือ padding-left เป็น padding-inline-start ด้วยมือจึงเสี่ยงพลาดสูง เครื่องมือนี้ทำการแมปให้ทันที ทำงานฝั่ง client 100% ไม่มีข้อมูลออกจากเบราว์เซอร์

ในบทความนี้คุณจะได้เห็นว่าทำไม logical properties ถึงสำคัญ เครื่องมือทำงานสองทิศทางอย่างไร และวิธีอ่านการแมประหว่าง physical กับ logical สำหรับภาษา RTL และ vertical writing modes

ทำไมต้องใช้ CSS Logical Properties Converter?

• แปลงได้สองทิศทาง สลับระหว่างโหมด to-logical กับ to-physical ได้ จะอัปเดตสไตล์ชีตเก่าให้ทันสมัย หรือแปลงดีไซน์แบบ logical กลับเป็นไวยากรณ์คลาสสิกเพื่อดีบักก็ทำได้
• รองรับ writing mode เลือก horizontal-tb, vertical-lr หรือ vertical-rl แล้วเครื่องมือจะแมปแต่ละด้านกับแกนที่ถูกต้อง เหมือนสิ่งที่เบราว์เซอร์ทำจริง
• รองรับ direction เลือก LTR หรือ RTL แล้วดูว่า margin-left กลายเป็น margin-inline-start ในบริบทภาษาอังกฤษ แต่กลายเป็น margin-inline-end ในบริบทภาษาอาหรับ ซึ่งเป็นจุดกำเนิดบั๊ก internationalization ที่พบบ่อยที่สุด
• ครอบคลุม margin, padding และ border สามตระกูล property ที่สมมติฐานเรื่องทิศทางทำลายเลย์เอาต์มากที่สุด รองรับทั้งแบบระบุด้านเดี่ยวและรูปย่อ
• เป็นส่วนตัวและทันที ทุกอย่างทำงานฝั่ง client CSS ของคุณไม่ถูกส่งออกจากแท็บ ไม่ต้องสมัครสมาชิก และผลลัพธ์ปรากฏระหว่างพิมพ์
• เป็นทั้งเครื่องมือเรียนรู้ การเห็น declaration เปลี่ยนแบบเรียลไทม์เป็นวิธีเร็วที่สุดในการเข้าใจโมเดล block axis และ inline axis ที่เป็นรากฐานของ CSS Logical Properties

ฟีเจอร์หลัก

จุดที่ควรรู้เพิ่มเติม:

• เครื่องมือ parse CSS declaration ธรรมดา คุณวางทั้ง rule body หรือบรรทัดเดียวอย่าง padding-left: 12px; ก็ได้ผลลัพธ์ที่แทนที่ได้ตรง ๆ
• declaration ที่ไม่รู้จักจะผ่านไปเหมือนเดิมโดยไม่ถูกแตะ สไตล์ชีตของคุณจึงไม่พัง
• ตัวนับ warning บอกว่ามี declaration กี่รายการที่ความหมายเปลี่ยน ช่วยตอบได้ว่าคอมโพเนนต์ไหนอ่อนไหวต่อทิศทางจริง ๆ

วิธีใช้งาน

1. เปิดเครื่องมือ เข้าไปที่ CSS Logical Properties Converter โหลดทันทีและใช้งานได้เต็มรูปแบบเมื่อหน้าเว็บแสดงแล้ว
2. วาง CSS ของคุณ วาง declaration แบบ physical เช่น margin-top: 16px; padding-left: 12px; border-right: 2px solid; ลงในช่อง input
3. เลือกทิศทางการแปลง คงโหมด to-logical ไว้เพื่อทำให้โค้ดทันสมัย หรือสลับเป็น to-physical เมื่อต้องแปลงดีไซน์แบบ logical กลับเป็นไวยากรณ์คลาสสิก
4. ตั้งค่าบริบทการเขียน เลือก writing mode (ปกติคือ horizontal-tb) และ direction (LTR สำหรับภาษาอังกฤษหรือไทย, RTL สำหรับภาษาอาหรับและฮีบรู) สองค่านี้กำหนดการแมปทั้งหมด
5. คัดลอกผลลัพธ์ แผง output จะแสดง declaration ที่แปลงแล้ว คัดลอกกลับเข้าสไตล์ชีตหรือคอมโพเนนต์ได้เลย

Physical Axis กับ Logical Axis ต่างกันอย่างไร

หัวใจของเรื่องนี้อยู่ตรงนี้ ขอลงลึกสักหน่อย

block axis เดินตามการไหลของเนื้อหา ใน horizontal-tb (ค่าเริ่มต้นทุกที่) บล็อกเนื้อหากองจากบนลงล่าง block axis จึงเป็นแนวตั้ง โดย block-start คือด้านบนและ block-end คือด้านล่าง แต่ใน vertical-rl ข้อความไหลเป็นคอลัมน์แนวตั้งที่เริ่มจากขวา block axis กลายเป็นแนวนอน และ block-start คือขอบด้านขวา

inline axis เดินตามทิศทางการอ่าน ในข้อความ LTR inline-start คือขอบซ้ายและ inline-end คือขอบขวา ในข้อความ RTL inline axis จะพลิก inline-start กลายเป็นขอบขวา ส่วน block axis ไม่สนใจทิศทางเลย การแยกอิสระจากกันนี้แหละที่ทำให้ logical properties ปลอดภัยต่อทิศทาง

ในบริบท horizontal-tb LTR ค่าเริ่มต้น การแมปเป็นดังนี้

รูปแบบเดียวกันนี้ใช้กับ padding (padding-top กลายเป็น padding-block-start) และ border (border-left-width กลายเป็น border-inline-start-width) รูปย่อสี่ค่าก็เรียงลำดับเดียวกัน คือ block-start, block-end, inline-start, inline-end

อะไรพลิกเมื่อใช้ RTL สลับ direction เป็น RTL แล้วมีเฉพาะด้าน inline ที่เปลี่ยน margin-inline-start จะ resolve เป็นขอบขวา ทำให้ declaration เดียวรองรับทั้งเลย์เอาต์ภาษาอังกฤษและอาหรับ ส่วน margin-block-start ไม่ถูกกระทบ ด้านบนยังเป็นด้านบน

อะไรพลิกเมื่อใช้ vertical-rl แกนทั้งคู่หมุน block-start ย้ายจากบนมาทางขวา และ inline-start (ใน LTR) ย้ายจากซ้ายไปด้านบน padding-block-start: 24px ที่เคยเพิ่มพื้นที่เหนือหัวข้อในข้อความแนวนอน จะกลายเป็นเพิ่มพื้นที่ทางขวาในโหมดคอลัมน์แนวตั้ง ซึ่งตรงกับสิ่งที่งานพิมพ์ภาษาญี่ปุ่นและจีนตัวเต็มคาดหวัง

ความจริงเรื่อง browser support logical properties สำหรับ margin, padding และ border รองรับในเบราว์เซอร์หลักทุกตัวตั้งแต่ปี 2021 และ longhand ครบทุกรูปแบบภายในต้นปี 2023 สำหรับผู้ชมยุคใหม่ คุณใช้ใน production ได้ทันทีโดยไม่ต้องมี polyfill ควรคง fallback แบบ physical ไว้ก่อนหน้า แล้วตามด้วย logical declaration เฉพาะเมื่อต้องรองรับเบราว์เซอร์องค์กรรุ่นเก่ามากเท่านั้น

ตัวอย่างก่อนและหลังสำหรับเลย์เอาต์ภาษาอาหรับ สมมติมีคอมโพเนนต์การ์ดที่สร้างเพื่อภาษาอังกฤษ

/* ก่อนแปลง — พังในบริบท RTL */
.card {
  margin-top: 24px;
  padding-left: 16px;
  border-right: 3px solid #6366f1;
  text-align: left;
}

หลังผ่านตัวแปลงโดยตั้ง direction เป็น RTL ผลลัพธ์แบบ logical คือ

/* หลังแปลง — ถูกต้องทั้ง LTR และ RTL */
.card {
  margin-block-start: 24px;
  padding-inline-start: 16px;
  border-inline-end: 3px solid #6366f1;
  text-align: start;
}

ในภาษาอังกฤษการ์ดแสดงผลเหมือนเดิมทุกพิกเซล ในภาษาอาหรับเส้นขอบตกแต่งและ padding จะย้ายไปด้านขวาอัตโนมัติ โดยไม่ต้องเขียนกฎซ้ำและไม่ต้อง override ด้วย dir="rtl"

กรณีใช้งานจริง

ทำให้คอมโพเนนต์เดิมรองรับหลายภาษา

โค้ดเบสส่วนใหญ่เต็มไปด้วย physical properties ที่นักพัฒนาเขียนโดยไม่เคยคิดถึง RTL วาง declaration ของคอมโพเนนต์เข้าตัวแปลง ดู warning แล้วส่งเวอร์ชันที่เป็นกลางต่อทิศทางออกไป การตรวจคอมโพเนนต์ละสิบนาทีช่วยตัดบั๊ก internationalization ทั้งกลุ่มก่อนที่ผู้ใช้จะรายงาน

อินเทอร์เฟซผสมภาษาอาหรับ ฮีบรู และไทย

สินค้าจริงมักมีหลายอักษร แดชบอร์ดภาษาอาหรับอาจฝังชื่อแบรนด์ภาษาอังกฤษ, ตัวระบุโค้ด Latin หรือชื่อสินค้าภาษาไทย เพราะ logical properties ผูกระยะห่างกับการไหลของข้อความ ไม่ใช่ด้านตายตัว เนื้อหาหลายทิศทางจึงเรียงตัวถูกต้องโดยไม่ต้องมีสไตล์ชีตแยกต่อภาษา และภาษาไทยที่ไหลแบบ LTR ก็ผสมกับเพื่อนบ้าน RTL ได้เนียนใน flex หรือ grid เดียวกัน

งานดีไซน์ข้อความแนวตั้ง

ปกหนังสือ, สเปรดนิตยสาร, ป้ายและงานทดลอง typography แบบเอเชียตะวันออกมักใช้ writing-mode: vertical-rl แทนที่จะนั่งหมุน padding-left ทุกบรรทัดในหัว ให้ตั้ง writing mode ในตัวแปลง แล้วรับค่า block และ inline ที่ถูกต้องได้ทันที

อนาคตปลอดภัยสำหรับโค้ดใหม่

คอมโพเนนต์ใหม่ที่เขียนด้วย logical properties จะทำงานได้ในทุกบริบทที่จะเจอ ทั้งโลแคลใหม่ แถบข้างที่สลับด้าน และเวอร์ชันแนวตั้งหรืองานพิมพ์ การปรับนิสัยการเขียนตั้งแต่วันนี้ถูกกว่าการย้อนไปเก็บงานเรื่องทิศทางในภายหลังเสมอ

แนวปฏิบัติที่ดี

• ใช้ logical properties ในโค้ดใหม่ทั้งหมด ถือว่า margin-left ในคอมโพเนนต์ที่เขียนใหม่เป็นกลิ่นโค้ด แล้วเลือก margin-inline-start เป็นค่าเริ่มต้น
• ทดสอบทั้งสองทิศทาง ลองพลิก dir="rtl" บน wrapper ตอนพัฒนาแล้วยืนยันว่าไม่มีอะไรกระโดด ตัวนับ warning ของตัวแปลงจะชี้จุดที่ควรดู
• อย่าลืม text-align text-align: left มีปัญหา RTL เหมือน margin-left ใช้ text-align: start และ text-align: end ด้วยเหตุผลเดียวกัน
• แปลงทีละตระกูล property เริ่มจาก margin แล้ว padding แล้ว border จะทำให้ diff อ่านง่ายและจับ regression ได้ไว
• รักษาความสม่ำเสมอของรูปย่อ การผสมรูปย่อ physical กับ logical ในกฎเดียวก่อนเรื่องลำดับการใช้ค่า เลือกสไตล์เดียวต่อหนึ่งกฎ
• จดบันทึกบริบทไว้ ถ้าคอมโพเนนต์จำเป็นต้องใช้ physical properties จริง ๆ เช่น overlay แผนที่ที่ตรึงมุมบนซ้ายของ viewport ให้เขียนคอมเมนต์อธิบายเหตุผลไว้

เริ่มแปลง CSS ของคุณวันนี้

บั๊กเรื่องทิศทางมักมองไม่เห็นตอนทดสอบภาษาอังกฤษเพียงอย่างเดียว แล้วกลายเป็นเรื่องน่าอายใน production เปิด CSS Logical Properties Converter วางคอมโพเนนต์ลงไป สลับตัวเลือก direction แล้วดูด้วยตาคุณเองว่าสไตล์ชีตของคุณอ่อนไหวต่อทิศทางแค่ไหน ฟรี ทำงานในเบราว์เซอร์ทั้งหมด และใช้เวลาน้อยกว่าอ่านย่อหน้านี้สองรอบ

Related Tools You Might Like:

• CSS Unit Converter — แปลง px, rem, em, pt และอื่น ๆ
• Tailwind Class Sorter — จัดเรียง utility classes ให้อ่านง่ายและสม่ำเสมอ
• CSS Selector Tester — ทดสอบ selector กับ HTML ตัวอย่างได้ทันที

ขอให้สนุกกับการแปลงโค้ด

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

ถ: physical properties กับ logical properties ใน CSS ต่างกันอย่างไร?

ตอบ: physical properties เช่น margin-left อ้างอิงขอบของหน้าจอตายตัว ส่วน logical properties เช่น margin-inline-start อ้างอิงจุดเริ่มของการไหลของข้อความ ในเลย์เอาต์ LTR ทั้งสองตรงกัน แต่ในโหมด RTL หรือ vertical writing mode ทั้งคู่จะแยกจากกัน และมีเฉพาะเวอร์ชัน logical ที่ยังถูกต้อง

ถ: ตัวแปลงรองรับ property อะไรบ้าง?

ตอบ: ตระกูล margin, padding และ border ซึ่งเป็น property ที่ทิศทางสำคัญที่สุด ครอบคลุมทั้งสี่ด้าน physical พร้อมรูปย่อ แปลงได้สองทิศทาง และประเมินตาม writing mode กับ direction ที่คุณเลือก

ถ: logical properties ใช้ได้กับทุกเบราว์เซอร์หรือไม่?

ตอบ: ในทางปฏิบัติคือใช้ได้ เบราว์เซอร์หลักทุกตัวรองรับ logical properties ของ margin, padding และ border ตั้งแต่ปี 2021 และ longhand ครบถ้วนตั้งแต่ต้นปี 2023 จึงใช้ใน production ได้โดยไม่ต้องมี polyfill สำหรับผู้ชมยุคใหม่

ถ: การแปลง margin-left จะเปลี่ยนหน้าตาเลย์เอาต์ภาษาอังกฤษของฉันหรือไม่?

ตอบ: ไม่ ในบริบท horizontal-tb LTR ค่าเริ่มต้น margin-inline-start resolve เป็นขอบเดียวกับ margin-left พอดี ดีไซน์เดิมจึงแสดงผลเหมือนเดิมทุกพิกเซล ประโยชน์จะปรากฏทันทีที่โค้ดชุดเดียวกันถูกเปิดดูในบริบท RTL

ถ: CSS ของฉันถูกส่งไปเซิร์ฟเวอร์หรือไม่?

ตอบ: ไม่เลย ตัวแปลงทำงานฝั่ง client 100% ในแท็บเบราว์เซอร์ของคุณ สิ่งที่คุณวางจึงไม่ถูกอัปโหลด ไม่ถูกจัดเก็บ และไม่ถูกบันทึกที่ใด