เรื่องปวดหัวของฟอนต์ไทยกับบราวเซอร์

gibbo
17 Apr 2008

มีเรื่องหนึ่งที่ทำให้ผมปวดหัวเสมอมา เกี่ยวกับการปั้นเว็บไซต์ภาษาไทย ก็คือ เรื่องฟอนต์ ใช่ว่าฟอนต์ไทยจะไม่สวยนะครับ ฟอนต์สวยๆมีให้เลือกใช้ฟรีเยอะแยะ ไม่เชื่อก็ลองไปดูที่ f0nt.com โดย iannnnn และสาวกคนรักฟอนต์ชาวไทย หรือถ้าเป็นฟอนต์แบบทางการหน่อยก็จะมี ฟอนต์แห่งชาติ ของ nectec , tep club fonts ของ ชมรมการจัดพิมพ์อิเล็คทรอนิกไทย แล้วก็ ฟอนต์จาก sipa แต่ฟอนต์เหล่านี้แทบจะเอามาใช้กับเนื้อหาในเว็บไม่ได้เลย เพราะผู้ใช้งานทั่วๆไปคงไม่ค่อยดาวน์โหลดมาไว้ในเครื่องเท่าไหร่ ยกเว้นคนที่ทำงานด้านกราฟิค ซึ่งก็ไม่ได้เอามาใช้กับเนื้อหาโดยตรง แต่เอามาใช้ในรูปแบบไฟล์กราฟิคแทนตัวอักษรมากกว่า

บางคนบอกว่า ก็ทำเป็นไฟล์กราฟิคซะก็สิ้นเรื่อง! แต่มันไม่สิ้นเรื่อง เพราะผมคิดว่า ตัวหนังสือในเอกสาร (xHTML) ก็ควรแสดงผลในรูปแบบเอกสาร และแยกต่างหากจากการตกแต่ง อาจจะฟังคล้ายกับ หลักการแยกเนื้อหากับสไตล์ออกจากกัน ของ W3C ที่คนทำเว็บยุคใหม่ควรต้องรู้ แต่ผมกำลังพูดถึงปัญหาที่เล็กกว่านั้นครับ เช่น ทำไมวรรณยุกต์มันถึงลอยโด่งอย่างนั้นใน firefox? , ทำไมเปลี่ยน font-family ใน css แล้วก็ยังแสดงผลภาษาไทยด้วยฟอนต์ตัวเดิมอีก? , ทำไมฟอนต์เดียวกัน ดูใน MacOS กับ Windows ไม่เหมือนกัน?

ผมไม่ได้หมายความว่าฟอนต์ไทยมีปัญหานะครับ แต่ผมมีปัญหากับการจัดการตำแหน่ง (space) ของตัวอักษรไทยที่แสดงผลผ่านบราวเซอร์ เพราะภาษาไทยมีเอกลักษณ์ที่ต่างจากภาษาอังกฤษ เช่น ภาษาของเราเวลาเขียนเป็นประโยคไม่ต้องเว้นว่างระหว่างคำ , พยัญชนะไทยมี หัว บางตัวก็มี ขมวด ด้วย (เช่น ฉ , น , ห , ม , ฬ , ฌ ,​ฮ) บางตัวก็มี หาง มาเติม (เช่น ป , ช , ฟ , ฤ) บางตัวก็พิเศษกว่านั้นคือมี ฐาน มาด้วย (เช่น ฐ , ญ , ฏ) , ภาษาไทยมีสระกับวรรณยุกต์ทั้งด้านบนและด้านล่าง ถ้าเป็นประโยคธรรมดาก็ไม่มีปัญหาอะไร แต่พอต้องใช้มันเป็นชื่อหัวข้อ (Heading) มันจะดูล้นพิกล ยิ่งใช้คำไทยปนอังกฤษก็ยิ่งไปกันใหญ่ ฯลฯ

ผมกำลังดูว่าจะมีทางแก้ปัญหาที่ว่าได้อย่างไร แม้จะใช้ css ช่วยได้บางส่วน หรือ เลี่ยงไปใช้ heading เป็นภาษาอังกฤษ แต่มันก็ดูเป็นทางแก้แบบเอาตัวรอดเท่านั้น มันน่าจะมีวิธีแก้ที่ยั่งยืนกว่านี้สิ หรือว่ามันเป็นปัญหาด้านเทคนิคที่ผมไม่เข้าใจ? จะหาคำตอบได้ที่ไหนเนี่ย?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.