คุณสมบัติ writing-mode ใช้กำหนดทิศทางการไหลของข้อความ ว่าจะวางแนวนอน (horizontal) หรือแนวตั้ง (vertical)
ค่าที่ใช้ได้
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
horizontal-tb- แนวนอน บนลงล่าง (ค่าเริ่มต้น, ภาษาอังกฤษ/ไทย)vertical-rl- แนวตั้ง ขวาไปซ้าย (ภาษาญี่ปุ่น/จีนแบบดั้งเดิม)vertical-lr- แนวตั้ง ซ้ายไปขวา (ภาษามองโกล/หมาน)
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> p { writing-mode: vertical-rl; } </style> </head> <body> <h1>Demo Heading</h1> <p>This is demo text.</p> </body> </html>
ตัวอย่างเพิ่มเติม
<!DOCTYPE html> <html> <head> <style> p.demo1 { word-spacing: 1cm; color: blue; writing-mode: vertical-rl; } p.demo2 { word-spacing: 40px; writing-mode: horizontal-tb; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>
คำอธิบาย
ตัวอย่างที่ 2 เปรียบเทียบ vertical-rl (ข้อความภาษาอังกฤษหมุน 90 องศา อ่านจากบนลงล่าง คอลัมน์ใหม่อยู่ซ้ายเดิม) กับ horizontal-tb (ปกติ) พร้อมแสดง word-spacing ทำงานในทั้งสองโหมด
คุณสมบัติที่เกี่ยวข้อง:
text-orientation- ทิศทางตัวอักษรในโหมดแนวตั้ง (mixed, upright, sideways)direction- ทิศทางการอ่าน (ltr, rtl)unicode-bidi- จัดการข้อความสองทิศทาง
