Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Emoji and web application

4.82/5 (9 votes)
27 Nov 2013CPOL3 min read 67.5K   1.4K  
Emoji; is the Japanese term for the ideograms or smileys used mostly in Japanese electronic messages and webpages.

I am back after few months or so of not blogging. Have you heard something called “Emoji”?

iPad Emoji Keyboard

Emoji; is the Japanese term for the ideograms or smileys used mostly in Japanese electronic messages and webpages. These small images are starting to appear more and more outside Japan. Originally meaning pictograph, the word emoji literally means “picture” (e) + “letter” (moji).
Refer: http://en.wikipedia.org/wiki/Emoji

If you want to know what the emoji meanings check the following cheat sheet
http://www.emoji-cheat-sheet.com/

Although originally only available in Japan, some emoji character sets have been incorporated into Unicode (Unicode 6.0 in 2010), allowing them to be used elsewhere as well. The core emoji set, as of Unicode 6.0 consists of 722 characters.

More recent iOS, Android, Windows 8 and OS X (Mountain Lion +) display Emoji natively, regardless of the typeface. But how we display that on all other desktop and the web application? When you are viewing Emoji with unsupported device or browser, Emoji shows up as squares or foreign text. You can convert them to a viewable format just by pasting it in the box above then viewing it in the preview.

There are several open source JavaScript libraries and the projects support for this. The most comprehensive seems to be Github’s Gemoji project.

Following are some of other good projects and scripts

For more info about Emoji Unicode table, please check below URL: http://apps.timwhitlock.info/emoji/tables/unicode

Emoji and Database

Emojis are UTF-8 encoded symbols. Therefore, to save the Emoji on the database, your database column should supports for the UTF-8 encoding.

Emoji and MySQL

To store the Emoji in the MySQL, you have to modify the table character set to support UTF-8. Please keep in mind starting from iOS5, Emoji is represented as 4-byte characters. That means your MySQL table charset should be set as utf8mb4. (Earlier version of iOS Emoji worked well with utf8 charset). utf8mb4 support is dependent on the MySQL version that you use. MySQL 5.5+ works fine with 4-byte characters when properly configured.

SQL
create table MyEmoji (emojicolumn VARCHAR(255) CHARACTER SET utf8mb4) default character set utf8mb4;

Make Sure Followings,

HTML
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<?php
 header('Content-type: text/html; charset=utf-8');
?>
  1. Your database table character set is: utf8mb4 
  2. Your PHP application character set is: UTF-8
  3. In the application database connection character set is: utf8mb4

Emoji and MSSQL 

SQL Server does not support UTF-8 by default. However, it supports UCS2 to store Unicode characters. (UCS2 is typically UTF-16). SQL server handles the UTF-8 conversion automatically. However, keep in mind, MS SQL VARCHAR column type does not support for this. Instead of that you have to use NVARCHAR column type. Then you must precede all Unicode strings with a prefix N when you deal with Unicode string constants in SQL Server 

For more information: http://support.microsoft.com/kb/239530 

SQL
CREATE TABLE [dbo].[MyEmoji](
    [EmojiColumn] [nvarchar](255) NULL
)
INSERT INTO MyEmoji (EmojiColumn) VALUES (N'EncodedString'

 Make sure followings,

 

  1.  Your database table column is: nvarchar 
  2. You are sending in Unicode data by adding an N in front of the encoded string

 

How to enable Emoji keyboard in iOS and Android 

EmoJi for PHP

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)