ทำเว็บทดสอบ Kerning ฟอนต์ไทยมาฝากครับ

[iannnnn]

สวัสดีครับ

เนื่องจากผมทำฟอนต์ลิงอยู่ แล้วหงุดหงิดใจที่มันหาวิธีทดสอบ kerning ลำบากมากเลย
ก็เลยนึกได้ว่า เออ เราก็หลอก AI ให้เขียนเว็บขึ้นมาก็ได้นี่หว่า

ขอบคุณการมีอยู่ของ Gemini จริงๆ นี่ใช้เวลาทำชั่วโมงเดียวก็เสร็จ (ทีแรกว่าจะนอน )
อาศัยว่าเฆี่ยนตีมันหน่อย ปรับไปปรับมา ถูกใจละ  เลยเอามาบอกต่อครับ








ลองเล่นเลยยย 

anndo.com/k

ส่วนฟีเจอร์ของเว็บ เนื่องจากง่วงแล้ว ให้ เไ สรุปให้ละกันครับ

Instant Font Loader (Serverless)
- ระบบ Drag & Drop: สามารถลากไฟล์ฟอนต์นามสกุล .ttf, .otf, .woff จากเครื่องมาวางเพื่อเปลี่ยนฟอนต์ได้ทันที
- System Font Support: สามารถพิมพ์ชื่อฟอนต์ที่มีอยู่ในเครื่อง (เช่น Arial, Sukhumvit Set) เพื่อเรียกมาทดสอบได้โดยไม่ต้องอัปโหลด

Smart Matrix Generator
- ระบบสร้างชุดข้อความอัตโนมัติ (Matrix Pattern) สำหรับตรวจ Kerning หน้า-หลัง
- รองรับหลายภาษาและหมวดหมู่: ภาษาไทย (รวมสระ, วรรณยุกต์, เลขไทย), ภาษาอังกฤษ, ตัวเลขอารบิก และสัญลักษณ์พิเศษ
- Smart Toggle: สามารถเลือกเปิด-ปิดเฉพาะชุดตัวอักษรที่ต้องการทดสอบได้แบบ Real-time โดยไม่ลบข้อความส่วนอื่นทิ้ง

Interactive Physics Engine
- Momentum Scrolling: ระบบ Drag Mode ที่จำลองแรงเฉื่อย (Inertia) และความหนืด ทำให้การลากหน้าจอมีความลื่นไหลเหมือนใช้งานบนมือถือ
- Precision Zooming: รองรับการซูม 2 รูปแบบ คือการหมุนเมาส์ (Scroll wheel) และฟีเจอร์ Press-to-Zoom (คลิกค้างเพื่อซูม 30%) โดยใช้ตำแหน่งเมาส์เป็นจุดศูนย์กลางในการซูม

UI/UX Design
- Spectrum Color Bar: แถบเลือกสีธีมแบบไล่เฉดสีบรรทัดเดียว (Single-line) แสดงผลเต็มความกว้าง
- Floating Options Panel: หน้าต่างเครื่องมือแบบลอยตัว สามารถลากย้ายตำแหน่งได้และพับเก็บ (Collapse) ได้
- Smart Sliders: แถบปรับค่า Font Size, Line Height และ Letter Spacing พร้อมระบบ Hover to Reset (เมื่อนำเมาส์ไปชี้ที่หัวข้อ ตัวเลขจะเปลี่ยนเป็นปุ่มรีเซ็ตค่าเริ่มต้น)

Performance & Polish
- Dark Mode Default: เริ่มต้นใช้งานด้วยธีมสีเข้มเพื่อถนอมสายตาและเน้นการมองเห็นช่องไฟ
- No Reflow Zooming: ใช้เทคนิค CSS Transform ในการซูม ทำให้ตำแหน่งตัวอักษรและบรรทัดไม่ขยับ (Reflow) ช่วยให้ตรวจสอบจุดผิดพลาดได้แม่นยำ
- 100% Client-side: ประมวลผลบน Browser ทั้งหมด ไม่มีการส่งข้อมูลไปที่ Server

ทำไมมันดูโม้จัง เอาเถอะ

[iannnnn]

อัปเดตเวอร์ชัน 3 ครับ
ตื่นมารื้อยกใหญ่ และเพิ่มความสามารถในการทดสอบพวกสระวรรณยุกต์ 2 ชั้นได้ด้วย

ส่วนเวอร์ชัน 2 ทำเมื่อคืนก่อนนอน ประมาณตี 4 ได้
คืออยากให้มันรันในมือถือได้ด้วย ซึ่งเอาจริงเปิดในคอมพ์ดีกว่าเยอะเลย
แต่พอสมองมันแล่นแล้วไม่ยอมหลับ เหมือนดีดม้า

[iannnnn]

13 ม.ค.69



เพิ่มปุ่ม "ลอเร็ม"
- ใส่ข้อความไว้ทดสอบการพิมพ์ โดยโหลดมาจากคลังคำศัพท์
- คลังคำ เอามาจาก TNC: THAI NATIONAL CORPUS (Third Edition) แต่เป็นแบบ CSV สถิติของพยางค์ ในภาษาไทย
- เขียน python ดึงคำที่ใช้บ่อยที่สุดมา 2,000 คำ แปลงเป็น text แยกคำเพื่อการแรนดอม
- เมื่อกดลอเร็ม มันจะสุ่มคำมาแสดงตามภาพแหละ (ปุ่มอื่นจะถูกปิดการใช้งาน)

เพิ่มโหมดตัดคำ
- พอทำลอเร็มก็เจอปัญหาว่ามันเป็นบรรทัดเดียวยาวพรืดดดดด เลยทำโหมด Word Wrap ขึ้นมา
- กดแล้วก็จะตัดคำให้พอดี ไม่ล้นจอ มีประโยชน์เวลาสั่งพรินต์ลงกระดาษด้วย

นอกนั้นก็แก้ไข UI เล็กๆ น้อยๆ เช่น
- ยุบพื้นที่แสดงชื่อฟอนต์ด้านบน รวมกับ textbox ที่ไว้กรอกชื่อฟอนต์
- โหมดชุดคำเริ่มเยอะ เลยทำเป็นบรรทัดละ 3 ปุ่ม

สนุกจัง

[kenchiro]

เวลาลองใส่ฟอนต์ลงไปแล้ว ระยะห่างระบบจัดให้ใช่มั๊ยครับว่าควรจะเป็นแบบนี้ ถ้า save ออกมาได้เลย จะได้มั๊ยครับ

[iannnnn]

ไม่ค่อยเข้าใจคำถามครับ แต่ตัวเว็บนี้จะเอาไว้ทดสอบ และตั้งค่าระยะบรรทัดได้ตามใจชอบครับ
เวลาทำฟอนต์เสร็จก็สามารถเอามาลองพิมพ์เล่นๆ ได้ครับ

แต่สำหรับการเซฟ (เป็นภาพ) ก็อาจแคปหน้าจอ หรือสั่งพรินต์ได้ในเว็บเลยครับ

[kenchiro]

ขอโทษครับ อ่านคำถามเองก็ งงๆ เวลาเราเอาฟอนต์อัพไปที่เว็บ เว็บจะกำหนดระยะห่างที่ควรจะเป็นให้ดูได้เลย
เราจะสามารถ save ระยะห่าง ที่เว็บแสดงลงในฟอนต์นั้นๆ  เพื่อให้ได้ระยะห่างของตัวอักษรตามที่เห็นในเว็บได้เลยมั๊ยครับ หรือ ต้องมากำหนด Kerning เอาเอง

[iannnnn]

อ๋อ เว็บที่ทำ มีหน้าที่แค่ preview ครับ (ไม่ใช่ Font Editor)

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

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