📜 ⬆️ ⬇️

Twitter opens the source code of the engine, replacing Emodzhi in pictures

Here we will talk about the symbols, pictures and how to display them.

In Japanese, they are called “絵 文字” (where “絵” means “picture” and “文字” is “symbol”) or “え も じ”, and the pronunciation of this name can be conveyed in various ways: by Hepburn - Polivanov is “Emoji”, in Kirichzi at Tassadar is “Emoji”, according to Sergey Gris - “Emodzhi” through soft “ gi ”. I like this last variant most of all, and I will use it both in the title and in the text.

What is emoji? These are miniature pictograms and ideograms that can be inserted into the text in much the same way as letters.
')
Emodzhi numerous. The first Emodji set (which Kurita invented for i-mode technology in 1998 or 1999) contained 172 characters, which consisted of only 12 × 12 pixels. Ten years later, in Unicode 6.0 (2010), it was already 722 Emodzhi, and this year’s standard (Unicode 7.0) added about a quarter of a thousand Emodzhi.

Emoji is diverse. Among them are emotion signs (emoticons round-headed or with animal ears, as well as various gestures and poses), zodiac signs, chess pieces, dice faces, card suits, love hearts, sacred symbols, some computer interface icons (GUI), arrows, ticks, crosses (direct and oblique), asterisks, snowflakes, designations of various types of transport, miniature images of modern household appliances and household appliances, tools and tools, designations of various weather forecast options, various asthenia, flowers, animals, dishes (mainly Japanese national cuisine), phases of the moon, hours of the day, festivals, seasons, musical instruments, sports, attractions, various buildings (hotel, religious, hospital, factory ...), and so on , and so on.

And I used the expression “almost the same” just above because Emodzhi still cannot be fully regarded as ordinary characters. There are two reasons for this.

First, in Unicode, most Emoji’s code is written in more than four hexadecimal digits (Unicode characters with this property are sometimes called astral, and they are not only Emodzhi characters), and in UTF-16 encoding, they do not correspond to two but four bytes. This subtlety of coding in some circumstances (for example, in the .length () ” property of a string in the JavaScript language) leads to the fact that one emoji is considered to be two ordinary characters during the calculation of the total length of a string, including in relation to Twitter restriction (140 characters per microblogging record), including - in the official Twitter application for Android, as far as I could see.

Secondly, Emoji symbols are conceived as consisting of several parts of different colors (this is how they differ from ordinary symbols of ordinary text, which completely accept the color of the text). If text is displayed on the screen by an engine that does not have any idea about this feature of emoji, then emoji become monochrome (for example, black and white in black text on a white background) and produce a somewhat worse (less recognizable) impression (because the reader is forced to rely only on the form, but not on the color - as if he were a victim of color blindness).

Emoji support is far from everywhere.

The Firefox browser relies on the built-in text output engine, and right now it displays emodzhi always monochrome. Some other browsers for text output, on the contrary, rely on the capabilities of the operating system - and then the support of emodzhi depends on the version of the operating system.

In the Android system, support for emoji appeared in version 4.4 (at the end of 2013).

On Apple systems, Emoji support in accordance with Unicode began in iOS 5 (on mobile devices) and in OS X Lion (on the rest), that is, in 2011; until that time, emoji was less, and their encoding was different.

In Windows, support for full-color emoji appeared in Windows 8.1, but display of monochrome emoji can be achieved in earlier versions of Windows by installing a font containing these symbols on them (Microsoft's Segoe UI Symbol font, for example).

Strictly speaking, any open and free font that contains a lot of emoji (well, for example, the font Gdouros Symbola ) can be added to your operating system and use. However, there are two important problems: firstly, in some systems it is difficult or impossible to add a new font (such as Android and Chrome OS, for example), and secondly, emoji will be monochrome if the system does not support their multi-color too.

Looking at such a disgrace, Twitter invented an effective crutch in the JavaScript language, which can replace ordinary emodzhi (Unicode characters) directly in the browser with such pictures (in PNG format), on which the corresponding symbol is drawn in a ready and correct (color) form. Pictures for this purpose were made by The Iconfactory - and 872 PNG-files in several sizes (16 × 16, 36 × 36, 72 × 72), and their vector analogues. This approach, to a certain extent, made it possible to circumvent the problem of displaying color pictograms and ideograms in browsers.

The recent news is that on November 6 (on Thursday last week) on Twitter (following the public requests) they opened the source code of their engine Emodzhi, posted the source code on GitHub .

Without delay (on the same day), the Twitter tool for replacing emodzhi with pictures was launched in Wordpress .

Without delay (on the same day), both the engine itself and the illustrations were provided with free hosting on MaxCDN, so you can connect them to yourself with a simple code:

<script src="//twemoji.maxcdn.com/twemoji.min.js"></script> 

(Immediately I will say that replacing Emodzhi with pictures does not happen automatically: the connected code will also have to be called by passing it a javascript line or a DOM element.)

Installing the finished package to your site (via bower , component or npm ) is also supported.

There is a preview page where you can see the view of all the images of Emoji Twitter (The Iconfactory), see the work of the replacement engine.

The Wordpress blog also mentions the existence of a site where you can familiarize yourself with the look that emoji have on different operating systems and devices.

Source: https://habr.com/ru/post/362825/


All Articles