The road of emoji exploration

What is emoji?

Http://www.baike.com/wiki/emoji

The emoji emoji, created in the 1990s by NTT DoCoMo Chestnut Tanaka (Shigetaka kurit), is derived from Japanese (the meaning of えもじ,e-moji,moji in Japanese is character).

Emoji can make digital communication as human-face communication, to avoid the wrong message.

Since emoji was added to Apple's iOS 5 input method, the emoji began to sweep around the globe, and the emoji has now been adopted by most modern computer systems that are compatible with Unicode encoding.

Mobile phone operating system ios,android,windowsphone;

Computer: Windows,mac OS x features emoji emoticons

QQ and other chat tools also added emoji expression for the user to use

Windows (supports Windows 8, Windows 8.1, Windows 10, Windows RT only)

Taskbar Right-toolbar-on-Screen keyboard, and then a white keyboard appears on the taskbar, click Open, in the lower left corner of the screen keyboard, a smiley face is marked by a large number of emoji expression, which also contains facial expression.

Emoji for various emoji:

http://coocy.github.io/emoji/

The chaos of character set

http://wpceo.com/supporting-emoji-on-php-mysql/

Speaking of the history of Emoji that is a long time, here is a brief introduction of Emoji in the IOS system changes in history.

Do not know when, the Japanese like hair Emoji expression icons, so the Japanese operators DoCoMo, KDDI, SoftBank launched their own Emoji character set.

In these character sets, a Emoji expression is actually a UTF8 character, this is different from QQ or the expression,

When a user sends a text message, a Emoji "image" occupies only one character, which is quite handy.

Apple's IOS and Mac OS X systems have built-in fonts for Apple color Emoji (apple colored emoji) to display Emoji emoticons,

IOS has a Emoji input keyboard, you can enter a variety of Emoji emoji icons,

Select "Emoji" input in Mac OS X using OPTION + Command + T to bring up the input keyboard.

The font files in Mac OS X are located in/system/library/fonts/apple Color Emoji.ttf.

Technically, a single Emoji expression is actually a character encoded using UTF8, and Apple began to support the display of Emoji in IOS4,

It was SoftBank's plan. Among the three operators in Japan, the UTF8 code used to denote the same expression is not the same (see comparison list),

We have to do a conversion between them to display correctly. With the same smiley face as an example, SoftBank is represented as U+e04a,kddi and u+e488.

Https://en.wikipedia.org/wiki/Emoji

From onwards, some emoji character sets has been incorporated into Unicode,

A standard system for indexing characters,

Which have allowed them to being used outside Japan and to be standardized across different operating systems.

Fortunately 2010, emoji expression character encoding Unicode organization unified.

Starting with IOS5, Apple began to support the standard Unified coded Emoji expression.

Apple has added more than 300 Emoji expressions to IOS6 and Mac OS X 10.8, and SoftBank encoding has not been upgraded because it has been phased out by history.

Now (2016-5-17) iOS has evolved to IS09, older devices can be upgraded to the new system.

Table of correspondence between three character sets and Unicode:

Http://www.unicode.org/Public/UNIDATA/EmojiSources.txt

PHP tools for converting between three character sets and Unicode:

Https://github.com/iamcal/php-emoji

Emoji the relationship between the Unicode encoding and the UTF8 storage code:

Http://punchdrunker.github.io/iOSEmoji/table_html/index.html

Web Application Considerations

Because emoji is not supported in the input method of the PC, or is not supported by the system. If you apply on the Web, there are some considerations:

Analysis:

1, emoji as part of the Unicode character set, should be supported by the operating system (System support, input method support, such as the existing mobile phone Android system, WIN8 system is also supported),

But given the platform compatibility of Web pages, it is best to have Emoji input and display in a picture-based manner.

Therefore, you need to select the front-end emoji plugin library.

2, due to historical reasons, Japan's operators DoCoMo, KDDI, SoftBank launched their own Emoji character set, the old iphone (IOS6) using SoftBank encoding,

Emoji that may appear to be configured between devices is garbled, but consider Unicode encoding format has become a specification sometimes (6 years),

Existing systems have been implemented as a basis, so it is sufficient to apply only emoji characters to Unicode codes.

Emoji display of wireless devices that are not compatible with legacy systems.

3, the page input, the stipulation only uses the front-end plugin on the Web interface to provide the standard emoji input method.

Similar to the mobile phone, such as the emoji input method, do not allow input. Avoid the device compatibility issues described in 2.

Front End Emoji Library survey Emojify.js

http://hassankhan.me/emojify.js/

A Javascript module to convert Emoji keywords to images

You can only emoji keywords (for example: smile:) Convert to a smiley face icon, no input is provided. Based on the picture scheme, the image size is 3.8M.

Js-emoji

Https://github.com/iamcal/js-emoji

A JS Emoji Conversion Library

Js-emoji-display emoji in the browser, everywhere

Ibid., no input is provided. Do not directly maintain pictures, refer to pictures in another item. The image size is 3.4M.

Https://github.com/github/gemoji/tree/master/images/emoji/unicode

One-signal/emoji-picker

Https://github.com/one-signal/emoji-picker

Add a slick emoji selector to input fields and Textareas on your website.

Provides input and does not provide picture display. Depending on the image, the image size is 3.2M.

IE8 not supported.

Jquery-emoji-picker-master

Https://github.com/wedgies/jquery-emoji-picker

A JQuery Picker for emojis

Provides input, the input tool implementation does not use the picture, displays the system support to prevail. The advantages are small in size.

I test: IE8 not supported.

Program recommendation

Scenario 1: If picture input and display emoji are perfectly supported,

You need to refer to the two Emoji JS library image size doubled.

Advantages: More visualization.

Cons: Image size 8M, and two libraries (display and configuration library) Picture style inconsistent.

And the configuration page does not provide echo for configuration items. (One-signal/emoji-picker)

Scenario 2: Provide only input functions, select jquery-emoji-picker-master that do not depend on the image implementation.

Emoji displays dependent system support.

Advantage: The whole cubby is smaller.

Cons: The display in the input box, and the display in the status page, need to depend on the system character display.

Considering that emoji belongs to new things, need to support the system,

Similar to Android, Win7 on the effect of partial support, WIN8 has full support, IOS6 above.

Considering the flash occupancy, as well as the blending and maintenance costs of two sets of libraries, it is not recommended to 1, and consider emoji forward compatibility (new system), recommended scenario 2.

About the calibration considerations:

Emoji Unicode characters, occupy a variable byte, the page can release the length of the check, let the background implementation. or whether you can implement the byte checksum of JS.

Jquery-emoji-picker effect

Win8 + Firefox

Win8+ie

Data-uri

Https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs

Already supported data : the Protocol browser has opera 7.20 and later, Safari and Konqueror. Internet Explorer 7 and the following versions are not supported, and Internet Explorer 8 and later only support images in the data URIs format in CSS files.

Http://www.cnblogs.com/hustskyking/p/data-uri.html

Due to the early emergence of the current mainstream browsers basically support the data URI:

• Firefox
• Opera 7.2+
• Chrome (all editions)
• Safari (all editions)
• Internet Explorer 8+

However, some browsers have restrictions on the use of the data URI:

Http://caniuse.mojijs.com/Home/Html/item/key/datauri/index.html

The road of emoji exploration