Emoji sous le capot

Au cours des dernières semaines, Nikita Prokopov a implémenté le support emoji pour Skija . Il a décidé de partager quelques petits détails sur la façon dont cette "plus grande innovation dans la communication humaine depuis l'invention de la lettre " fonctionne sous le capot.



Note du traducteur: Habr ne prend pas en charge les emoji, j'ai donc dû sortir et remplacer les emoji par des images.

Unicode

Chaque caractère sur un ordinateur est codé avec un nombre. L'encodage le plus populaire est Unicode, et les deux sous-variables les plus courantes sont UTF-8 et UTF-16.



Unicode alloue 2 ²¹ (2 millions) caractères appelés "points de code". Sur ces deux millions, seuls environ 150 000 caractères sont actuellement définis. Toutes les langues, mortes et vivantes, et autres décorations étaient entassées dans ces 150 000 symboles. Vous pouvez utiliser des polices différentes à l' arrière d'écriture et vers le bas à l' envers: ainsi que pour afficher «GHz» comme un seul glyphe: .



Réalisé à la flèche de droite à deux têtes avec des plumes et deux lignes verticales: ou Semiglazov Monster . Et le canard:







Faites attention au bloc avec les hiéroglyphes égyptiens (U + 13000 - U + 1342F), il y a beaucoup de choses intéressantes:

Emoji de base

Les emoji ne sont que des caractères Unicode, qui se trouvent ici U + 1F300-1F6FF et ici U + 1F900-1FAFF:







Les emojis se comportent comme des lettres ordinaires, vous pouvez faire toutes les opérations avec eux, comme avec des lettres ( environ traduites: mais pas sur Habré! ). Lorsque vous tapez «A», l'ordinateur voit U + 0041. Lorsque vous tapez, l' ordinateur voit U + 1F335.

Les emoji sont des polices

Pourquoi sont-ils affichés sous forme d'images? Polices bitmap. Vous pouvez créer des png amusants pour les glyphes au lieu de vecteurs ennuyeux en noir et blanc.







Chaque système d'exploitation est livré avec une police emoji préinstallée. Sur macOS / iOS, il s'agit de l'Apple Color Emoji. Windows - Segoe UI Emoji, Android - Noto Color Emoji.



Les émojis, comme les polices, ont un aspect différent sur différents appareils. Certaines applications ont leur propre emoji: WhatsApp, Twitter, Facebook.

Polices de secours

Vous écrivez le texte dans une police, comment les emoji y tiennent-ils? Et pourquoi le texte russe semble-t-il médiocre dans le Clubhouse ou sur Medium?







Ici, vous tapez le caractère U + 1F419 et votre police est, par exemple, San Francisco. Mais la police San Francisco n'a pas de glyphe pour U + 1F419, donc votre système d'exploitation commence à rechercher une autre police qui a un tel glyphe.



U + 1F419 n'est disponible que dans Apple Color Emoji. Donc , vous voyez ceci: .

Quelle que soit la police que vous utilisez, les emojis se ressemblent.

Sélecteur de variation-16

Certains emojis sont nés sous la forme d'icônes en 1993, dans les sections Symboles divers U + 2600-26FF ou Dingbats U + 2700-27FF:







Ces glyphes sont comme des lettres, en noir et blanc. De nombreuses polices ont les leurs (U + 2702 BLACK SCISSORS):







Apple Color Emoji a sa propre version:







Comment le système d'exploitation sait-il quoi afficher ou s'il a le même code U + 2702?



Rencontrez U + FE0F, également connu sous le nom de VARIATION SELECTOR-16. Ceci est un indice pour que le moteur de rendu de texte passe en emoji.







Simple, élégant et pas besoin de mettre en évidence de nouveaux points de code. ont la même signification , mais un style d'image légèrement différent.

Clusters de graphèmes

Ici, nous sommes confrontés à un autre problème - nos emoji ne sont plus un point de code, mais deux. Cela signifie que nous avons besoin d'un moyen de définir les limites du symbole.



Un groupe de graphèmes nous aidera. Un groupe de graphèmes est une séquence de points de code qui est considérée comme un seul glyphe lisible par l'homme.



Les grappes de graphèmes ont été inventées non seulement pour les émojis, mais elles sont également applicables aux alphabets réguliers. Est un seul cluster de graphèmes, même s'il se compose de deux points de code: U + 0055 UPPER-CASE U suivi de U + 0308 COMBINING DIAERESIS.



Les clusters de graphèmes posent beaucoup de complexité pour les programmeurs. Tu ne peux pas juste faire substring(0, 10)



pour prendre les 10 premiers caractères - vous pouvez diviser l'emoji en deux.



L'inverse de la ligne doit être fait intelligemment. U + 263A U + FE0F a du sens, mais pas U + FE0F U + 263A.







Enfin, vous ne pouvez pas simplement appeler .length



string. Eh bien, vous pouvez, mais le résultat vous surprendra. Si vous êtes un développeur, essayez de l'exécuter dans la console de votre navigateur.



Conseil du programmeur: si vous travaillez avec du texte, procurez-vous une bibliothèque axée sur les clusters de graphèmes. Pour C, C ++ et JVM, cela peut être ICU , Swift fait tout correctement par défaut, pour les autres - faites-le vous-même.







Cette chose a une longueur de 65 et ne peut pas être divisée. Vivez avec maintenant.

Modificateur de teint

La plupart des emojis humains représentent une personne jaune abstraite. Lorsque le ton de la peau a été ajouté en 2015, au lieu d'ajouter un nouveau point de code pour chaque combinaison emoji et ton de peau, seuls cinq nouveaux points de code ont été ajoutés: U + 1F3FB..U + 1F3FF



Ils ne doivent pas être utilisés seuls, mais doivent être ajoutés à emoji existant ... Ensemble, ils forment une ligature: si nous imprimons (U + 1F44B WAVING HAND SIGN), puis (U + 1F3FD MEDIUM SKIN TONE MODIFIER), alors nous obtenons qu'il



n'a pas son propre point de code (il s'agit d'une séquence de deux: U + 1F44B U + 1F3FD), mais a son propre aspect et sa propre sensation. Au total, à l'aide de cinq modificateurs, ~ 280 émojis humains ont été transformés en 1680 variations. Voici quelques danseurs:

Menuisier de largeur nulle

Disons que votre amie vient de vous envoyer une photo d'une pomme qu'elle fait pousser dans son jardin. Vous devez répondre - comment? Vous pouvez envoyer WOMAN EMOJI (U + 1F469) avec un tampon de riz SHEAF OF RICE (U + 1F33E) attaché . En fin de compte, cela fonctionnera , mais si vous giflez U + 200D entre eux, vous obtenez un agriculteur:



U + 200D s'appelle Zero-width Joiner, ou ZWJ pour faire court. Cela fonctionne de la même manière que ce que nous avons vu avec le teint, mais cette fois, vous pouvez combiner deux émojis autonomes en un seul. Toutes les combinaisons ne fonctionnent pas, mais beaucoup le font, parfois de manière surprenante!



Quelques exemples:







Une incohérence étrange que j'ai remarquée est que la couleur des cheveux se fait via ZWJ, tandis que le ton de la peau n'est qu'un modificateur emoji sans ZWJ. Pourquoi? Je n'ai aucune idée.







Malheureusement, certains emojis ne sont pas implémentés en combinaison avec ZWJ. Je considère cela comme une occasion manquée:







Comment imprimer ZWJ? Certainement pas. Mais vous pouvez le copier à partir d'ici: «». Remarque: il s'agit d'un caractère spécial, alors attendez-vous à ce qu'il se comporte étrangement. Vous ne le voyez pas, mais il l'est. ( note per: dans l'article original, il y en a, mais Habr ne le permet pas )



Un autre grand domaine où ZWJ est à cheval est la configuration des familles et des relations. Voici une petite histoire pour illustrer:

Drapeaux

Les drapeaux de pays font partie de la norme Unicode, mais pour une raison quelconque, ils ne sont pas implémentés sous Windows. Si vous lisez ceci dans un navigateur Windows, désolé!



Les drapeaux n'ont pas de points de code dédiés. Au lieu de cela, ce sont des ligatures à deux lettres.







Gauche - Windows, droite - Mac



Certes, ils n'utilisent pas de vraies lettres. Au lieu de cela, l'alphabet «lettre de symbole d'indicateur régional» (U + 1F1E6..1F1FF) est utilisé. Ces lettres ne sont utilisées que pour composer des drapeaux.



Que se passe-t-il si vous associez deux lettres aléatoires? Pas grand chose: (sauf que l'édition de texte commence à se comporter étrangement).



Si vous voulez expérimenter, n'hésitez pas à copier et combiner à partir de cet alphabet:



Il existe 258 combinaisons de deux lettres valides. Pouvez-vous tous les trouver?



Un effet secondaire amusant de la ligature à deux lettres:

Séquences d'étiquettes

Les ligatures à deux lettres sont cool, mais ne voulez-vous pas être plus cool? Que diriez-vous des ligatures de 32 lettres? Voici les séquences de balises.



Une séquence d'étiquettes est une séquence d'emojis réguliers, suivie d'un autre type de lettres latines (U + E0020..E007E), se terminant par U + E007F CANCEL TAG.



Ils ne sont actuellement utilisés que pour ces trois drapeaux: Angleterre, Ecosse et Pays de Galles:

Keycaps

Pas super excitant, mais nécessaire pour être complet: les séquences de keycaps utilisent une autre convention.



Il ressemble à ceci: prenez un nombre * ou #, transformez-le en un emoji avec U + FE0F, enveloppez-le dans un carré avec U + 20E3 COMBINANT CLÉ D'INCLINAISON







Il y en a 12:

Mises à jour Unicode

Unicode est mis à jour chaque année et les emoji sont au cœur de chaque version. Par exemple, dans Unicode 13 (mars 2020), 55 nouveaux émoticônes ont été ajoutés.



Au moment d'écrire ces lignes, ni les derniers Mac OS (11.2.3) ni iOS (14.4.1) ne prennent en charge les emoji de type Unicode 13:



voici ce que je vois en mars 2021:



mais grâce à la magie de ZWJ, je peux toujours comprendre ce qui se passe n'est tout simplement pas de la manière la plus optimale.

Conclusion

Pour résumer, il existe sept façons d'encoder les emoji:

1. Point de code unique
2. Point de code unique + sélecteur de variation-16
3. Modificateur de teint
4. Séquençage avec un jointeur de largeur nulle
5. Drapeaux
6. Séquence de balises
7. Séquence keycap

Les méthodes de 1 à 4 peuvent être combinées pour créer un article plutôt complexe:







Si vous êtes un programmeur, n'oubliez pas de toujours utiliser la bibliothèque ICU pour:

• extraction de sous-chaîne
• mesures de longueur de ligne
• chaîne inversée

Le mot clé googling est "Grapheme Cluster". Cela s'applique aux émoticônes, aux signes diacritiques occidentaux, aux polices induites et coréennes, alors soyez prudent.

---

• Premier système de contrôle série de Russie pour un moteur bicarburant avec séparation fonctionnelle des contrôleurs
• Il y a plus de lignes de code dans une voiture moderne que ...
• Cours en ligne gratuits en automobile, aérospatiale, robotique et ingénierie (50+)
• McKinsey: repenser les logiciels et l'architecture électroniques dans l'automobile