การใช้อีโมจิใน HTML


อีโมจิคืออะไร ?

อิโมจิดูเหมือนรูปภาพหรือไอคอน แต่ไม่ใช่ อิโมิจิเป็นตัวอักษร (อักขระ) จากชุดอักขระ 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>การแสดงผล &#65; &#66; &#67;</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>&#128512;</p>

</body>
</html>

การแสดงผลอีโมจิหน้ายิ้ม

😀

เนื่องจากอิโมจิเป็นอักขระ จึงสามารถคัดลอก แสดง และปรับขนาดได้เช่นเดียวกับอักขระอื่นๆ ใน HTML

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>การปรับขนาดอีโมิจิ</h1>

<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

</body>
</html>

การปรับขนาดอีโมิจิ

😀 😄 😍 💗


สัญลักษณ์อีโมจิบางตัวใน UTF-8

อีโมจิค่า
🗻&#128507;
🗼&#128508;
🗽&#128509;
🗾&#128510;
🗿&#128511;
😀&#128512;
😁&#128513;
😂&#128514;
😃&#128515;
😄&#128516;
😅&#128517;