อีโมจิคืออะไร ?
อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่ อิโมิจิเป็นตัวอักษร (อักขระ) จากชุดอักขระ UTF-8 (Unicode)
UTF-8 ครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก
HTML charset Attribute
หากต้องการแสดงหน้าเพจ HTML อย่างถูกต้อง เว็บเบราว์เซอร์ต้องทราบชุดอักขระที่ใช้ในเพจ
สิ่งนี้ระบุไว้ในแท็ก<meta>
<meta charset="UTF-8">
หากไม่ได้ระบุ UTF-8 จะเป็นชุดอักขระเริ่มต้นใน HTML
อักขระ UTF-8
เราไม่สามารถพิมพ์อักขระ UTF-8 จำนวนมากบนแป้นพิมพ์ได้ แต่สามารถแสดงโดยใช้ตัวเลขได้เสมอ (เรียกว่าentity numbers)
เช่น A คือ 65 B คือ 66 C คือ 67
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>การแสดงผล A B C</p>
<p>การแสดงผล A B C</p>
</body>
</html>
การแสดงผล A B C
การแสดงผล A B C
อธิบายตัวอย่าง
<meta charset="UTF-8">
element ใช้ระบุชุดอักขระเพื่อให้เบราว์เซอร์เข้าใจว่าคุณกำลังแสดงอักขระ คุณต้องขึ้นต้นentity number ด้วย &#และลงท้ายด้วย ; (อัฒภาค)
อีโมจิคาแรคเตอร์
อิโมจิยังเป็นอักขระจากตัวอักษร UTF-8 เช่น
- 😄 คือ 128516
- 😍 คือ 128525
- 💗 คือ 128151
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>การแสดงผลอีโมจิหน้ายิ้ม</h1>
<p>😀</p>
</body>
</html>
การแสดงผลอีโมจิหน้ายิ้ม
😀
เนื่องจากอิโมจิเป็นอักขระ จึงสามารถคัดลอก แสดง และปรับขนาดได้เช่นเดียวกับอักขระอื่นๆ ใน HTML
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>การปรับขนาดอีโมิจิ</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
การปรับขนาดอีโมิจิ
😀 😄 😍 💗
สัญลักษณ์อีโมจิบางตัวใน UTF-8
อีโมจิ | ค่า |
---|---|
🗻 | 🗻 |
🗼 | 🗼 |
🗽 | 🗽 |
🗾 | 🗾 |
🗿 | 🗿 |
😀 | 😀 |
😁 | 😁 |
😂 | 😂 |
😃 | 😃 |
😄 | 😄 |
😅 | 😅 |