Agent Dev Thai Academyprinciples · patterns · architecture

Thai Type Pain + praneet-front skill drop

AI หยิบฟอนต์ไทยตัวเซฟเพราะไม่รู้กฎ line-height ต่ำ letter-spacing และ break-all ทำไทยพังเงียบๆ praneet-front รวมคู่ฟอนต์ 16 ตระกูลกับกฎ 7 ข้อ เปิด open source

เคยสังเกตมั้ย เว็บไทยที่ AI สร้างมันหน้าตาเหมือนกันหมด

ฟอนต์เดิม วางตัวเดิม ฟีลแบนๆ เหมือนกันทุกอัน — เพราะ AI มันหยิบฟอนต์ไทยตัวที่ปลอดภัยที่สุดตัวเดิมทุกครั้ง

ไม่ใช่เพราะมันโง่ มันแค่เรียนมาจาก code ที่เขียนเพื่อ Latin เป็นหลัก ฟอนต์ไทยดีๆ มีเป็นสิบตระกูล แต่มันไม่รู้จัก เลยเล่นเซฟ

แล้วพอมันลองออกนอกเซฟ ก็พังเงียบๆ — ไม่มี error layout ขึ้นปกติ แต่วรรณยุกต์ชนกัน สระอำแตก บรรทัดตัดกลางคำ

ที่เจอบ่อยสุด 3 อย่าง:

  • line-height ต่ำกว่า 1.55 → วรรณยุกต์โดนตัดหัว เพราะไทยสูงกว่า Latin
  • letter-spacing บนข้อความไทย → ถ่างสระออกจากพยัญชนะ สระอำ (ำ) พังก่อนเพื่อน
  • word-break: break-all → ไทยไม่มีช่องว่างระหว่างคำ มันเลยตัดมั่วกลางพยางค์

ปัญหาไม่ใช่ฟอนต์ไทยไม่ดี ปัญหาคือ AI ไม่รู้กฎ เลยได้แค่ตัวที่ปลอดภัย

เลยทำเป็น skill ไว้ — แปะเข้า project แล้วทุกครั้งที่สั่งงานภาษาไทย มันจะรู้กฎพวกนี้เอง แล้วกล้าหยิบฟอนต์ที่มีคาแรคเตอร์ ไม่ใช่ตัวเซฟตัวเดิม

ในนั้นมี:

  • คู่ฟอนต์ไทย+Latin 16 ตระกูล พร้อม URL จาก Google Fonts
  • กฎเหล็ก 7 ข้อที่ห้ามแหก
  • crash-test ให้ดูว่าแต่ละอันพังยังไง แล้วแก้ตรงไหน

เรื่องตลกคือ — ตอนทำเว็บ demo อันนี้ เปลี่ยน copy เป็นไทย เว็บมันแหกกฎตัวเองทันที h1 กับปุ่มมี letter-spacing อยู่ (กฎข้อ 1 ที่ห้าม) ต้องแก้เว็บก่อนถึงจะกล้าสอนคนอื่นได้

skill นี้เปิด open source เต็มตัว — ทั้งกฎ ทั้งฟอนต์ catalog ทั้ง crash-test อยู่บน GitHub หมด

ของแบบนี้ไม่ควรมีใครต้องนั่งซื้อหรือเดาเอาเอง มันควรเป็นของกลางที่คนไทยช่วยกันต่อ

ตอนนี้มี 16 ตระกูล แต่ฟอนต์ไทยดีๆ ยังมีอีกเยอะ — ใครรู้จักคู่ไหนที่เวิร์ค เพิ่ม font เข้า catalog, แก้กฎที่ยังไม่ครบ, หรือช่วยเติม direction ที่ยังขาด ส่ง PR เข้ามาได้เลย เครดิตใส่ให้ทุกคน

อยากให้มันเป็นที่ที่คนทำเว็บไทย — ทั้งคนเขียนโค้ดและคนออกแบบ — มาช่วยกันทำให้ฟอนต์ไทยบนเว็บมันดีขึ้นจริงๆ ไม่ใช่ของผมคนเดียว

ดูตัวอย่างจริง (พังสดๆ ในเบราว์เซอร์): https://praneetfront.com
โหลด skill + repo: https://github.com/agent-dev-thai/praneet-front

ฟรี เปิดหมด เอาไปใช้แล้วมาช่วยกันต่อ

— Agent Dev Thailand