เกิดอะไรขึ้น
หน้าภาษาอังกฤษของเราดูดีด้วย line-height 1.5 เราเลยใช้ค่าเดียวกันกับหน้าภาษาไทย แต่พอเป็นภาษาไทย สระและวรรณยุกต์ที่อยู่บนและล่างตัวอักษรเริ่มดูอึดอัด และบางจุดก็โดนตัดให้เห็นชัด
ปัญหาเห็นชัดที่สุดในบรรทัดที่มีสระกับวรรณยุกต์ซ้อนกัน คือสระและวรรณยุกต์อยู่เหนือพยัญชนะตัวเดียวกัน มักไปชนบรรทัดบน หรือถูกตัดเมื่ออยู่ใน container
ทำไมถึงเป็นแบบนั้น
ตัวอักษรละตินส่วนใหญ่อยู่ระหว่าง baseline ถึง cap height มีหางยื่นลงมาไม่กี่ตัว ส่วนภาษาไทยมีสระและวรรณยุกต์ที่ซ้อนอยู่เหนือพยัญชนะ และบางตัวอยู่ใต้พยัญชนะ แต่ละบรรทัดจึงต้องการพื้นที่แนวตั้งทั้งสองด้านมากกว่า
ตัว line-height เองไม่ได้ตัดอะไร การตัดเกิดเมื่อกล่องแคบเกินไปและมีอย่างอื่นตัดส่วนที่ล้น เช่น overflow hidden, ความสูงคงที่ หรือเอฟเฟกต์ข้อความ gradient ที่ใช้ background-clip line-height ที่แคบแค่ทำให้กรณีเหล่านี้เกิดง่ายขึ้นมาก
ตอนนี้เราทำอย่างไร
เราปรับ line-height ของ body text ภาษาไทยเป็นราว 1.7 และปัญหาสระโดนตัดก็หายไปทั้งเว็บไซต์ เราใช้ค่าแบบไม่มีหน่วยเพื่อให้ปรับตามขนาดฟอนต์ของแต่ละ element
หัวข้อเช็กแยกต่างหาก ตัวอักษรขนาดใหญ่มีพื้นที่เพิ่มที่ต้องเติมน้อยกว่าตามสัดส่วน จึงมักดูพอดีด้วยค่าที่น้อยกว่า เรายังทดสอบกับคำที่มีสระและวรรณยุกต์ซ้อนกัน ไม่ใช่แค่พยัญชนะเฉย ๆ เพราะปัญหามักโผล่ตรงนั้นก่อน
:lang(th) body {
line-height: 1.7;
}
/* Headings usually need less, so tune them separately */
:lang(th) h1,
:lang(th) h2 {
line-height: 1.4;
}เช็กลิสต์สั้น ๆ
- 1ตั้ง line-height ของ body ภาษาไทยเป็นค่าไม่มีหน่วยราว 1.7
- 2ทดสอบกับคำที่มีสระและวรรณยุกต์ซ้อนกัน
- 3เช็กหัวข้อแยกต่างหากและปรับค่าให้เหมาะ
- 4ดู overflow hidden หรือความสูงคงที่ใน container ที่ใส่ข้อความไทย
จำไว้สั้น ๆ
อย่าเอา line-height ของภาษาละตินมาใช้กับภาษาไทยตรง ๆ และทดสอบกับสระและวรรณยุกต์ที่ซ้อนกันเสมอ