ทำเว็บด้วย AI แล้วภาษาไทยเพี้ยน? แก้ปัญหา font ไม่ขึ้น ตัดคำผิด วันที่ พ.ศ. และ export PDF ภาษาไทยให้ถูกต้อง

เว็บที่สร้างด้วย AI มักมีภาษาไทยเพี้ยนเพราะ library และค่าเริ่มต้นส่วนใหญ่ถูกออกแบบมาสำหรับภาษาอังกฤษ ไม่ใช่เพราะ AI เขียนโค้ดไม่เป็น ปัญหาที่เจอบ่อยมี 5 จุดคือ font ไม่ขึ้นหรือสระลอย ตัดคำกลางคำ วันที่และตัวเลขไม่เป็นแบบไทย export PDF หรือ CSV แล้วตัวอักษรกลายเป็นสี่เหลี่ยม และการค้นหาหรือตรวจสอบข้อมูลที่ไม่รองรับตัวอักษรไทย ทั้งหมดนี้แก้ได้ด้วยการบอก AI ให้ชัดตั้งแต่ใน prompt แรก และเช็กตาม checklist ก่อน deploy

บทความนี้จะไล่ทีละจุดว่าอาการเป็นแบบไหน เกิดจากอะไร แก้ยังไง และควรสั่ง Claude Code, Codex หรือ Cursor ด้วยคำพูดแบบไหนเพื่อไม่ให้ต้องกลับมาแก้ซ้ำ

ทำไมภาษาไทยถึงเพี้ยน ทั้งที่ AI เขียนโค้ดเก่งมาก

AI เรียนรู้จากโค้ดตัวอย่างจำนวนมหาศาล และโค้ดตัวอย่างเหล่านั้นแทบทั้งหมดใช้ข้อความภาษาอังกฤษ ดังนั้นเวลาเราสั่งให้ "ทำหน้า dashboard" โดยไม่พูดถึงภาษาไทย AI จะหยิบค่าเริ่มต้นที่คุ้นเคยมาใช้ เช่น font Inter, การตัดข้อความด้วยช่องว่าง, รูปแบบวันที่แบบ MM/DD/YYYY, และ regular expression ที่รับเฉพาะ a ถึง z

ภาษาไทยมีลักษณะเฉพาะ 3 อย่างที่ทำให้ค่าเริ่มต้นเหล่านี้ใช้ไม่ได้

1. ไม่มีช่องว่างระหว่างคำ ทำให้ระบบตัดคำแบบอังกฤษมองทั้งประโยคเป็นคำเดียว
2. มีสระและวรรณยุกต์ที่ลอยอยู่บนหรือล่างตัวอักษร ทำให้ font ที่ไม่มีตาราง Thai ขึ้นผิดตำแหน่ง หรือถูกตัดหายเมื่อ line-height แคบเกินไป
3. ใช้ปีพุทธศักราชและมีเลขไทย ซึ่ง library วันที่และตัวเลขส่วนใหญ่ไม่เปิดใช้โดยอัตโนมัติ

ข่าวดีคือ browser สมัยใหม่รองรับภาษาไทยได้ดีมากอยู่แล้ว ปัญหาส่วนใหญ่เกิดจากโค้ดที่ไป "ปิด" ความสามารถนั้นโดยไม่ตั้งใจ

ปัญหาที่ 1 font ไม่ขึ้น สระลอย หรือวรรณยุกต์ถูกตัด

อาการที่เจอ: ตัวอักษรไทยขึ้นเป็น font ระบบที่ดูไม่เข้ากับส่วนอังกฤษ หัวข้อที่มีสระอุหรือไม้โทถูกตัดขอบหายไปครึ่งหนึ่ง หรือข้อความไทยดูเล็กกว่าอังกฤษในบรรทัดเดียวกัน

สาเหตุ: AI มักเลือก font อย่าง Inter หรือ Roboto ซึ่งไม่มีตัวอักษรไทย browser จึงไป fallback เป็น font ของเครื่องผู้ใช้ ส่วนเรื่องสระถูกตัดเกิดจาก line-height ที่ตั้งไว้แน่นมากตามแบบอังกฤษ เช่น 1 หรือ 1.1 ซึ่งไม่พอสำหรับวรรณยุกต์ที่ซ้อนบนสระ

วิธีแก้

1. เลือก font ที่มีชุดอักษรไทยตั้งแต่แรก เช่น Noto Sans Thai, Sarabun, IBM Plex Sans Thai, Prompt หรือ Kanit ทั้งหมดมีบน Google Fonts
2. ถ้าใช้ Next.js ให้ใช้ next/font/google และระบุ subsets เป็น thai กับ latin ทั้ง 2 ค่า ไม่อย่างนั้นจะโหลดมาเฉพาะตัวอังกฤษ
3. ตั้ง line-height ของข้อความไทยไม่ต่ำกว่า 1.5 และหัวข้อไม่ต่ำกว่า 1.3
4. ใน Tailwind ให้แก้ fontFamily ใน config ให้ font ไทยอยู่ลำดับแรก และปิดท้ายด้วย sans-serif เสมอ

ตัวอย่าง prompt สั้นที่ใช้ได้เลย: "เว็บนี้เนื้อหาหลักเป็นภาษาไทย ใช้ font Noto Sans Thai สำหรับทุกส่วน โหลด subsets thai และ latin ตั้ง line-height ไม่ต่ำกว่า 1.5 และห้ามตัดส่วนบนของตัวอักษรในทุก component ที่จำกัดความสูง"

ปัญหาที่ 2 ตัดคำผิด ขึ้นบรรทัดกลางคำ

อาการที่เจอ: คำว่า "ประกันภัย" ถูกแบ่งเป็น "ประกัน" บรรทัดหนึ่งและ "ภัย" อีกบรรทัด ซึ่งยังพออ่านได้ แต่แย่กว่านั้นคือ "คว" ไปอยู่ท้ายบรรทัดและ "าม" ไปขึ้นบรรทัดใหม่ หรือข้อความไทยยาวทะลุขอบการ์ดออกไปโดยไม่ขึ้นบรรทัดเลย

สาเหตุ: browser ตัดคำไทยได้เองด้วยพจนานุกรมภายใน แต่ AI มักใส่ CSS อย่าง word-break: break-all เพื่อแก้ปัญหาข้อความอังกฤษยาว ซึ่งไปทำลายการตัดคำไทยให้กลายเป็นตัดทุกตัวอักษร ส่วนอาการทะลุขอบเกิดจาก white-space: nowrap หรือการใส่ข้อความไทยในที่ที่ไม่มีช่องว่างให้ browser หาจุดตัด

วิธีแก้

1. ห้ามใช้ word-break: break-all กับข้อความไทย ถ้าต้องกันข้อความอังกฤษยาวทะลุ ให้ใช้ overflow-wrap: anywhere แทน
2. ระบุ lang="th" ที่ tag html เพื่อให้ browser เลือกกฎตัดคำที่ถูกต้อง
3. ถ้าเป็นข้อความแบบตัดสั้นพร้อมจุดไข่ปลา ให้ใช้ line-clamp ของ Tailwind แทนการตัดจำนวนตัวอักษรใน JavaScript เพราะการตัดที่ตัวอักษรที่ 50 อาจไปตัดตรงกลางสระพอดี
4. งานที่ต้องตัดคำฝั่ง server เช่น ทำ tag หรือสร้าง summary ให้ใช้ library ตัดคำไทยโดยเฉพาะ แล้วสั่ง AI ให้เรียกใช้ library นั้นแทนการ split ด้วยช่องว่าง

ปัญหาที่ 3 วันที่ พ.ศ. ค.ศ. เขตเวลา และรูปแบบตัวเลข

อาการที่เจอ: แสดงวันที่เป็น 11/4 ทำให้ผู้ใช้ไทยสับสนว่าเป็นวันที่ 11 หรือเดือน 11 ปีขึ้นเป็น ค.ศ. ทั้งที่ลูกค้าคุ้นกับ พ.ศ. ยอดเงินขึ้นเป็น 1234.5 แทนที่จะเป็น 1,234.50 บาท หรือตารางนัดหมายคลาดไป 7 ชั่วโมงเพราะ server อยู่ต่างประเทศ

สาเหตุ: AI ใช้ค่าเริ่มต้นของ JavaScript ซึ่งเป็น locale ของเครื่องที่รัน และ server ส่วนใหญ่ตั้ง timezone เป็น UTC

วิธีแก้แบบที่ใช้กับทุก framework

1. เก็บวันที่ใน database เป็น ISO 8601 พร้อม timezone เสมอ แล้วแปลงเป็นรูปแบบไทยเฉพาะตอนแสดงผล อย่าเก็บ พ.ศ. ลง database เด็ดขาดเพราะคำนวณต่อยาก
2. ตอนแสดงผลใช้ Intl.DateTimeFormat หรือ toLocaleDateString ด้วยค่า th-TH ซึ่งจะได้ปี พ.ศ. และชื่อเดือนไทยทันทีโดยไม่ต้องลง library เพิ่ม
3. ถ้าใช้ dayjs หรือ date-fns ให้สั่ง AI โหลด locale th และ plugin สำหรับ Buddhist era
4. ตั้ง timezone เป็น Asia/Bangkok ทั้งใน environment variable ของ server และในฟังก์ชันแปลงวันที่
5. แสดงตัวเลขเงินด้วย Intl.NumberFormat แบบ th-TH พร้อม currency THB จะได้สัญลักษณ์บาทและทศนิยม 2 ตำแหน่งอัตโนมัติ

ตัวอย่างงานจริงที่ต้องคำนวณตัวเลขแบบไทยคือ Keptung ที่สร้างบิลจากรูปใบเสร็จแล้วหารเงินกับเพื่อน โดยคำนวณส่วนลด VAT และ service charge ตามยอดจริง งานประเภทนี้ถ้าทศนิยมและการปัดเศษผิดแม้แต่สตางค์เดียว ผู้ใช้จะสังเกตเห็นทันที

ปัญหาที่ 4 export PDF, Excel, CSV และ Word แล้วภาษาไทยกลายเป็นสี่เหลี่ยม

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

อาการแยกตามชนิดไฟล์

เรื่อง PDF มี 2 แนวทางให้เลือก แนวทางแรกคือใช้ library อย่าง pdf-lib หรือ jsPDF แล้วฝัง font ไทย ข้อดีคือเบาและรันบน serverless ได้ ข้อเสียคือต้องจัดการ layout เองและการตัดคำไทยใน PDF จะไม่ฉลาดเท่า browser แนวทางที่ 2 คือเขียนรายงานเป็นหน้า HTML ธรรมดาแล้วใช้ Playwright หรือ Puppeteer สั่ง print เป็น PDF ข้อดีคือภาษาไทยถูกต้องเหมือนที่เห็นบนหน้าเว็บทุกประการ ข้อเสียคือต้องมี server ที่รัน browser ได้ และใช้ memory มากกว่า

ถ้าจะให้แนะนำ งานรายงานที่มีตารางเยอะและต้องดูสวยควรใช้แนวทางที่ 2 ส่วนงานง่ายอย่างใบเสร็จหรือ label สั้น ใช้แนวทางแรกก็พอ

ตัวอย่างผลงานคนไทยที่ทำเรื่องนี้โดยตรงคือ Tetono Doc Converter ที่แปลงไฟล์ระหว่าง PDF กับ Word บีบอัด PDF และอ่านข้อความจากภาพด้วย OCR ภาษาไทย โดยระบุว่าประมวลผลบน server ในไทยและลบไฟล์ทันที ส่วนฝั่งไฟล์ Word มี thai-docx-skill ซึ่งเป็น Agent Skill สำหรับสร้างไฟล์ Word ให้แสดงข้อความภาษาไทยได้ถูกต้อง เจ้าของทดลองใช้ใน Claude และ Claude Code แล้ว ถ้าคุณกำลังให้ AI สร้างเอกสารภาษาไทย การโหลด skill แบบนี้เข้าไปจะประหยัดเวลาลองผิดลองถูกไปได้มาก

อีก 2 ตัวอย่างที่มีฟีเจอร์ export ในงานจริงคือ Stock Scan ที่ส่งออกรายงานสินค้าคงเหลือและความเคลื่อนไหวเป็น Excel หรือ PDF และ KiloEV ที่ให้เจ้าของรถไฟฟ้าส่งออกประวัติการชาร์จเป็น CSV ทั้ง 2 ชิ้นสร้างด้วย Next.js และอยู่บน Vercel ซึ่งเป็น stack ที่คนทำเว็บด้วย AI ใช้กันมาก ดังนั้นถ้าคุณจะทำฟีเจอร์แบบเดียวกัน ให้เตรียมเรื่อง font และ BOM ไว้ตั้งแต่ต้น

ปัญหาที่ 5 ค้นหา เรียงลำดับ และตรวจสอบข้อมูลที่ไม่รู้จักภาษาไทย

จุดนี้มักไม่เห็นตอนทดสอบเพราะคนทำมักพิมพ์ข้อมูลทดสอบเป็นอังกฤษ แต่พอเปิดให้ผู้ใช้จริงจะเจอทันที

อาการที่พบบ่อย

1. ฟอร์มสมัครสมาชิกแจ้งว่า "ชื่อไม่ถูกต้อง" เมื่อกรอกชื่อภาษาไทย เพราะ AI ใส่ regular expression ที่รับเฉพาะตัวอักษรอังกฤษ
2. ช่อง "ความยาวไม่เกิน 50 ตัวอักษร" นับผิด เพราะสระและวรรณยุกต์ถูกนับเป็นตัวอักษรแยก ทำให้ผู้ใช้พิมพ์ได้น้อยกว่าที่ควร
3. การเรียงชื่อตามตัวอักษรไม่เป็นไปตามลำดับ ก ไก่ ถึง ฮ นกฮูก เพราะใช้การเทียบ byte ธรรมดา
4. slug ของ URL กลายเป็นค่าว่าง เพราะฟังก์ชันสร้าง slug ลบตัวอักษรที่ไม่ใช่ a ถึง z ทิ้งหมด
5. ค้นหาคำว่า "กาแฟ" ไม่เจอบทความที่มีคำว่า "กาแฟสด" เพราะ full text search ของ database ไม่ตัดคำไทย

วิธีแก้

1. ตรวจสอบชื่อด้วยเงื่อนไข "ไม่ว่างและไม่มีตัวอักษรพิเศษที่อันตราย" แทนการบังคับว่าต้องเป็น a ถึง z
2. เรียงลำดับด้วย localeCompare พร้อมค่า th หรือตั้ง collation ของ database ให้เป็นภาษาไทย ถ้าใช้ Supabase ซึ่งเป็น Postgres สามารถกำหนด collation แบบ ICU สำหรับภาษาไทยได้ตอนสร้างตาราง
3. สร้าง slug จาก id หรือ transliterate แยกต่างหาก และอนุญาตให้ URL มีภาษาไทยได้ถ้าเหมาะกับงาน เพราะ browser และ Google รองรับ
4. การค้นหาภาษาไทยแบบง่ายให้ใช้ ILIKE หรือ contains ไปก่อน ถ้าข้อมูลเยอะค่อยพิจารณา search service ที่รองรับการตัดคำไทย
5. ทดสอบทุกฟอร์มด้วยข้อมูลไทยจริง เช่น ชื่อที่มีสระอำ ชื่อที่มีไม้ไต่คู้ และที่อยู่ที่มีเลขไทย

Checklist 10 ข้อก่อน deploy เว็บภาษาไทย

เช็กลิสต์นี้ใช้เวลาไม่ถึง 15 นาที แต่ตัดปัญหาที่ผู้ใช้จะเจอได้เกือบหมด

บอก AI ยังไงให้ภาษาไทยถูกตั้งแต่แรก

การแก้ทีละจุดหลัง deploy เหนื่อยกว่าการบอกครั้งเดียวตั้งแต่ต้นมาก วิธีที่ได้ผลที่สุดคือเขียนข้อกำหนดภาษาไทยไว้ในไฟล์คำสั่งประจำโปรเจกต์ เช่น CLAUDE.md สำหรับ Claude Code, AGENTS.md สำหรับ Codex หรือไฟล์ rules ของ Cursor เพราะ AI จะอ่านทุกครั้งที่เริ่มทำงาน ไม่ต้องย้ำใน prompt ทุกรอบ

ตัวอย่างข้อความที่ใส่ในไฟล์นั้น

1. ผู้ใช้หลักเป็นคนไทย ข้อความใน UI เป็นภาษาไทยทั้งหมด ศัพท์เทคนิคเขียนอังกฤษ
2. font หลัก Noto Sans Thai โหลด subsets thai และ latin line-height ไม่ต่ำกว่า 1.5
3. ห้ามใช้ word-break: break-all ใช้ overflow-wrap: anywhere แทน
4. วันที่เก็บเป็น ISO ใน database แสดงผลด้วย locale th-TH เป็น พ.ศ. timezone Asia/Bangkok
5. ตัวเลขเงินใช้ Intl.NumberFormat th-TH currency THB
6. ไฟล์ CSV ทุกไฟล์ต้องมี UTF-8 BOM
7. PDF ทุกไฟล์ต้องฝัง font ไทย และทดสอบด้วยข้อความ "ปู่กู้ซื้อตู้" ก่อนส่งมอบ
8. validation ทุกช่องต้องรับตัวอักษรไทยได้ ห้ามใช้ regex ที่จำกัดเฉพาะ a ถึง z
9. ทดสอบด้วยข้อมูลภาษาไทยจริงทุกครั้งก่อนบอกว่าเสร็จ

เมื่อเจอปัญหาระหว่างทาง ให้บอก AI ด้วยอาการที่เห็นและสิ่งที่คาดหวัง ไม่ใช่แค่ "ภาษาไทยเพี้ยน" เช่น "ในหน้า report ตัวอักษรไทยใน PDF เป็นสี่เหลี่ยม ส่วนบนหน้าเว็บปกติ ต้องการให้ PDF ใช้ font เดียวกับหน้าเว็บ" AI จะวินิจฉัยได้ตรงจุดและไม่ไปรื้อส่วนที่ไม่เกี่ยว

สรุป

ภาษาไทยเพี้ยนในเว็บที่สร้างด้วย AI ไม่ใช่ปัญหาใหญ่ แต่เป็นปัญหาที่ "ไม่เห็นจนกว่าจะเปิดใช้จริง" ทั้ง 5 จุดที่เล่ามา คือ font การตัดคำ วันที่และตัวเลข การ export ไฟล์ และการจัดการข้อมูล ล้วนแก้ได้ด้วยการตั้งค่าไม่กี่บรรทัด สิ่งที่สำคัญกว่าโค้ดคือการสร้างนิสัย 2 อย่าง คือเขียนข้อกำหนดภาษาไทยไว้ในไฟล์คำสั่งประจำโปรเจกต์ และทดสอบด้วยข้อมูลไทยจริงก่อน deploy ทุกครั้ง

ถ้าอยากดูว่าคนไทยคนอื่นจัดการเรื่องเอกสารและข้อมูลภาษาไทยในงานจริงยังไง ลองเปิดดูผลงานอย่าง Tetono, thai-docx-skill, Keptung, Stock Scan และ KiloEV ที่รวมอยู่ใน applnw.com แล้วสังเกตว่าแต่ละชิ้นเลือกวิธีแสดงผล export และคำนวณตัวเลขแบบไหน จะช่วยให้คุณตัดสินใจกับงานของตัวเองได้เร็วขึ้นมาก