ตัวแปลง CSS Logical Properties
แปลง CSS properties แบบ physical (margin-top, padding-left, border-right) เป็น logical (margin-block-start, padding-inline-start) รองรับ LTR/RTL และ
Loading tool...
ตัวแปลง CSS Logical Properties คืออะไร?
ตัวแปลง CSS Logical Properties แปลง CSS declarations แบบ physical เช่น margin-top และ padding-left ให้เป็น logical เช่น margin-block-start และ padding-inline-start ตามสเปก CSS Logical Properties and Values รวมถึงแปลงกลับเป็น physical โดยคำนวณแกนตาม writing mode และทิศทางข้อความที่เลือก ทำให้ LTR/RTL และอักษรแนวตั้ง map ได้ถูกต้อง
ประโยชน์หลัก
- เขียน stylesheet เดียวที่ใช้ได้ทั้งภาษาซ้ายไปขวาและขวาไปซ้าย
- ปรับ layout ให้เข้ากับ vertical writing modes โดยไม่ต้องเพิ่มกฎพิเศษ
- ยกระดับ CSS เดิมให้เป็น logical properties ตามมาตรฐาน
- แปลง logical properties กลับเป็น physical สำหรับ browser เก่าหรือเครื่องมือเก่า
กรณีการใช้งาน
- •ทำ localization ของ design system สำหรับตลาดอาหรับหรือฮิบรู
- •สร้างเว็บหลายภาษาที่ใช้ CSS codebase ร่วมกัน
- •Refactor stylesheet เดิมให้เป็น logical properties สมัยใหม่
- •เรียนรู้ว่า block และ inline axes map กันอย่างไรในแต่ละ writing mode
วิธีใช้ตัวแปลง CSS Logical Properties
- วาง CSS ของคุณ: วาง CSS declarations แบบ physical ที่ต้องการแปลง เช่น margin-left: 12px; หรือ padding-top: 16px;
- เลือกโหมดการแปลง: เลือก Physical เป็น Logical เพื่อทำ CSS ให้ทันสมัย หรือ Logical เป็น Physical เพื่อสร้าง fallback สำหรับเครื่องมือเก่า
- ตั้งค่า writing mode และ direction: เลือก horizontal-tb, vertical-rl หรือ vertical-lr แล้วเลือก LTR หรือ RTL เพื่อให้ start/end ถูกต้อง
- คัดลอกผลลัพธ์: ตรวจสอบ declarations ที่แปลงแล้วและคลิกคัดลอกเพื่อนำไปใช้ใน stylesheet ของคุณ
คุณสมบัติหลัก
- แปลงได้สองทิศทาง: physical properties เป็น logical และย้อนกลับ
- รองรับ longhand properties ของ margin, padding, border และ inset
- รองรับ writing modes: horizontal-tb, vertical-rl และ vertical-lr
- ตระหนักถึงทิศทาง: พลิก inline-start/inline-end ตาม LTR หรือ RTL
- รองรับมุมโค้ง เช่น border-top-left-radius เป็น border-start-start-radius
- แจ้งเตือน shorthand declarations ที่ต้องขยายเป็น longhand ก่อน
คำถามที่พบบ่อย
CSS logical properties คืออะไร?
Logical properties เช่น margin-inline-start และ padding-block-end อ้างอิงจากการไหลของข้อความ (inline และ block axes) แทนการระบุด้านกายภาพ (left/right/top/bottom) ทำให้กฎเดียวปรับตัวได้กับทุก writing mode และ direction
เมื่อไรควรใช้ margin-inline-start แทน margin-left?
ใช้ logical properties เมื่อ layout ควรกลับด้านในภาษา RTL (อาหรับ, ฮิบรู) หรือปรับตัวตาม vertical writing modes ส่วนการตกแต่งที่ผูกกับด้านกายภาพจริง ๆ (เช่น เงาที่ขอบซ้ายเสมอ) ใช้ physical properties ได้ตามปกติ
ตัวแปลงรองรับ shorthand เช่น margin: 0 auto หรือไม่?
ไม่รองรับ Shorthand อย่าง margin, padding และ inset ขยายค่าต่างกันตามแต่ละแกน เครื่องมือจะส่งผ่านและแจ้งเตือน ขยายเป็น longhand ก่อน (เช่น margin-top, margin-inline) เพื่อการแปลงที่แม่นยำ
การแปลงทำในเบราว์เซอร์ของฉันหรือไม่?
ใช่ การ parse และแปลงทั้งหมดทำงานฝั่งไคลเอนต์ด้วย JavaScript ล้วน CSS ของคุณไม่ถูกส่งออกจากเครื่อง ปลอดภัยสำหรับ stylesheet ที่เป็นความลับทางการค้า