คู่มือใช้งาน
อักษรพิเศษกับฟอนต์ ทำไมบางตัวแสดงได้และบางตัวเป็นสี่เหลี่ยม
เข้าใจความสัมพันธ์ระหว่าง Unicode, glyph, ฟอนต์สำรอง และระบบปฏิบัติการ พร้อมวิธีเลือกอักษรพิเศษที่รองรับกว้างและแก้ปัญหาตัวสี่เหลี่ยม
SPECIAL CHARACTERS GUIDE
อักษรพิเศษกับฟอนต์ ทำไมบางตัวแสดงได้และบางตัวเป็นสี่เหลี่ยม
Unicode ไม่ใช่ฟอนต์
Unicode กำหนดตัวตนและรหัสของอักขระ ส่วนฟอนต์เก็บรูป glyph ที่ใช้วาด หากฟอนต์ไม่มีรูป ระบบต้องหาฟอนต์อื่นหรือแสดงกล่อง ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “Unicode ไม่ใช่ฟอนต์” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง code point ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “Unicode ไม่ใช่ฟอนต์” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ code point เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ Unicode ไม่ใช่ฟอนต์ ก่อนเลือกสัญลักษณ์
- ทดลองกับ code point และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
ระบบ fallback เลือกฟอนต์แทน
เบราว์เซอร์และระบบปฏิบัติการค้นฟอนต์สำรองตามภาษาและสัญลักษณ์ ทำให้ตัวหนึ่งในประโยคอาจมาจากคนละฟอนต์กับตัวรอบข้าง ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “ระบบ fallback เลือกฟอนต์แทน” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง glyph ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “ระบบ fallback เลือกฟอนต์แทน” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ glyph เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ ระบบ fallback เลือกฟอนต์แทน ก่อนเลือกสัญลักษณ์
- ทดลองกับ glyph และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
อีโมจิต้องพึ่งทั้งข้อมูลและชุดภาพ
ลำดับอีโมจิใหม่อาจอยู่ในข้อความครบแต่ระบบเก่าไม่รู้วิธีรวม ZWJ หรือไม่มีภาพ จึงแสดงแยกตัวหรือเป็นสี่เหลี่ยม ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “อีโมจิต้องพึ่งทั้งข้อมูลและชุดภาพ” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง fallback font ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “อีโมจิต้องพึ่งทั้งข้อมูลและชุดภาพ” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ fallback font เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ อีโมจิต้องพึ่งทั้งข้อมูลและชุดภาพ ก่อนเลือกสัญลักษณ์
- ทดลองกับ fallback font และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
เอกสารและภาพออกแบบมีเงื่อนไขต่างกัน
ไฟล์ต้นฉบับอาจเปลี่ยนฟอนต์เมื่อส่งต่อ ควรฝังฟอนต์ตามสิทธิ์หรือส่ง PDF เมื่อหน้าตาต้องคงที่ ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “เอกสารและภาพออกแบบมีเงื่อนไขต่างกัน” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง tofu □ ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “เอกสารและภาพออกแบบมีเงื่อนไขต่างกัน” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ tofu □ เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ เอกสารและภาพออกแบบมีเงื่อนไขต่างกัน ก่อนเลือกสัญลักษณ์
- ทดลองกับ tofu □ และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
เลือกชุดที่รองรับกว้าง
เครื่องหมายพื้นฐานและอักขระที่อยู่ในมาตรฐานมานานมักปลอดภัยกว่า แต่ยังต้องทดสอบกับแพลตฟอร์มและขนาดที่ใช้จริง ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “เลือกชุดที่รองรับกว้าง” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง code point ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “เลือกชุดที่รองรับกว้าง” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ code point เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ เลือกชุดที่รองรับกว้าง ก่อนเลือกสัญลักษณ์
- ทดลองกับ code point และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
ขั้นตอนแก้ตัวสี่เหลี่ยม
อัปเดตระบบ เปลี่ยนฟอนต์ ตรวจ code point ลดลำดับซับซ้อน และใช้สัญลักษณ์สำรอง โดยไม่ดาวน์โหลดฟอนต์จากแหล่งไม่น่าเชื่อถือ ประเด็นนี้เป็นส่วนสำคัญของกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyph เพราะรูปที่เห็นเพียงอย่างเดียวไม่บอกว่าผู้รับจะอ่าน ตีความ หรือใช้งานต่ออย่างไร โดยเฉพาะเมื่อกลุ่มเป้าหมายคือผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร ซึ่งพบข้อความผ่านอุปกรณ์และแพลตฟอร์มหลายรูปแบบ
เมื่อนำหัวข้อ “ขั้นตอนแก้ตัวสี่เหลี่ยม” ไปใช้ ให้เริ่มจากใจความปกติ กำหนดหน้าที่ของสัญลักษณ์ แล้วทดลองตัวอย่างอย่าง glyph ในตำแหน่งจริง เปรียบเทียบแบบไม่ตกแต่ง แบบเรียบ และแบบเต็ม จากนั้นเลือกแบบที่ยังอ่านออก ค้นหาได้ และคัดลอกต่อโดยไม่ต้องอธิบายวิธีแก้ให้ผู้รับ
สำหรับหัวข้อ “ขั้นตอนแก้ตัวสี่เหลี่ยม” เกณฑ์ตรวจรอบสุดท้ายควรรวมความหมาย ความยาว ฟอนต์ การตัดบรรทัด และการเข้าถึง โดยใช้ glyph เป็นกรณีทดสอบ พร้อมจำไว้ว่า การเห็นตัวอักษรบนเครื่องผู้เขียนไม่ได้รับประกันว่าผู้รับทุกอุปกรณ์จะเห็นเหมือนกัน หากข้อความเกี่ยวข้องกับเงิน งาน ความปลอดภัย หรือชื่อบัญชี ควรเก็บข้อมูลสำคัญเป็นอักษรปกติและให้อักษรพิเศษทำหน้าที่สนับสนุนเท่านั้น
- กำหนดเป้าหมายของ ขั้นตอนแก้ตัวสี่เหลี่ยม ก่อนเลือกสัญลักษณ์
- ทดลองกับ glyph และเวอร์ชันข้อความปกติ
- ตรวจบนมือถือและแพลตฟอร์มปลายทางก่อนเผยแพร่
Original Practical Lab
แยกปัญหารหัสออกจากปัญหาฟอนต์
แสดงอักขระเดียวกันด้วยฟอนต์หลายชุดและคัดลอกกลับเป็นข้อความ เพื่อพิสูจน์ว่าสิ่งที่เปลี่ยนคือรูป ไม่ใช่รหัส
A ★ ก
♞ ∑ →
🫎 👩💻
วิธีตรวจผลด้วยตัวเอง
- 1.ตรวจ code point ก่อนเปลี่ยนฟอนต์
- 2.ใช้ fallback font ที่รองรับสคริปต์นั้น
- 3.ไม่แปลงเป็นรูปภาพเพื่อแก้ปัญหาข้อความโดยไม่จำเป็น
คำถามที่พบบ่อย
บทความ อักษรพิเศษกับฟอนต์ ทำไมบางตัวแสดงได้และบางตัวเป็นสี่เหลี่ยม เหมาะกับใคร?
เหมาะกับผู้ใช้ทั่วไป นักออกแบบ นักพัฒนาเว็บ และผู้จัดทำเอกสาร รวมถึงผู้ที่ต้องการเลือกสัญลักษณ์โดยดูทั้งความสวย ความหมาย และการใช้งานจริง
คัดลอกตัวอย่างจาก อักษรพิเศษกับฟอนต์ ทำไมบางตัวแสดงได้และบางตัวเป็นสี่เหลี่ยม ไปใช้ได้ทันทีหรือไม่?
คัดลอก code point และตัวอย่างอื่นไปทดลองได้ แต่ต้องตรวจข้อจำกัด ความยาว ฟอนต์ และกฎของแอปหรือเกมปลายทางก่อนยืนยันทุกครั้ง
ทำไมกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyphจึงแสดงผลต่างกันได้?
ข้อมูล Unicode อาจเหมือนกัน แต่ฟอนต์ ระบบปฏิบัติการ และแอปเป็นผู้วาด glyph จึงมีรายละเอียดต่างกัน โดยเฉพาะตัวอย่างอย่าง tofu □
ควรทำอย่างไรเมื่อ code point ทำให้ข้อความอ่านยาก?
ลดจำนวน ใช้รูปแบบที่เกี่ยวข้องกับกลไกการแสดงผล Unicode ผ่านฟอนต์และระบบสำรอง glyphเพียงหนึ่งชุด และกลับไปใช้ข้อความปกติกับข้อมูลสำคัญ โดยเก็บเวอร์ชันสำรองไว้เสมอ