Émoticône, smiley, émoji, on entend souvent ces termes. Mais connaissez-vous la différence entre eux ?
Je vous présente ici des définitions provenant de plusieurs sources, même si toutes les sources ne s'entendent pas sur certaines différences entre ces trois concepts.
Selon l'Office québécois de la langue française1, l'émoticône est un :
Dessin réalisé en combinant plusieurs caractères typographiques, le plus souvent utilisé afin d'illustrer un propos ou de traduire l'état d'esprit du destinataire.
Autrement dit, une émoticône est une suite de caractères qui peuvent être interprétés comme un dessin et qui représentent une émotion.
L'émoticône est parfois appelée émoticône typographique ou émoticône de style occidental.
Ex : :-)
Il existe également une représentation japonaise des émoticônes, inspirée des mangas, appelée kaomoji.
Ex : (^_^)
Ex : « hausser les épaules » (shrug) et un kaomoji qui emprunte des caractères japonais : ¯\_(ツ)_/¯
Par extension, on utilise parfois le mot émoticône pour représenter les smileys (voir différence plus bas).
Ceci peut être constaté sur le site de Termium Plus du gouvernement du Canada2, qui présente une définition élargie de l'émoticône :
Symbole ou image dans un message qui exprime l'humeur de son auteur.
Le smiley est un caractère graphique qui représente une émotion. Il est parfois appelé émoticône graphique ou binette.
Wikipédia rajoute3 :
Par extension, le terme est employé pour désigner d’autres visages, pas nécessairement jaunes ni souriants.
Ex : 
Selon l'Office québécois de la langue française4, l'émoji est un :
Petit pictogramme utilisé dans les communications électroniques et les pages Web, qui permet d'exprimer une émotion ou d'illustrer un propos.
Bien que le mot émoji ressemble à émotion, Wikipédia5 apporte une nuance intéressante.
Le mot emoji signifie littéralement « image » (e) + « lettre » (moji) ; la ressemblance avec « émotion » est un jeu de mot interculturel.
Autrement dit, un émoji est un caractère graphique qui représente un dessin comique, qui peut représenter une émotion ou pas.
Le groupe des émojis inclut les smileys.
Ex : 
Il est à noter que l'apparence des émojis peut être différente selon l'application utilisée.
Source du tableau : https://unicode.org/emoji/charts/full-emoji-list.html
Si le sens de certains émojis est clair (bonhomme sourire, bonhomme qui rit, bonhomme qui pleure), certains autres émojis ont une signification moins évidente.
Je vous invite à consulter le site https://emojipedia.org/ pour en apprendre plus sur le sens des émojis que vous utilisez.
Fait intéressant, vous pouvez obtenir la signification d'un émoji directement dans la page de recherche du moteur DuckDuckGo (https://duckduckgo.com).
Simplement coller l'émoji dans la barre de recherche (vous pouvez l'insérer avec⌃ Ctrl+⌘ Cmd+Espace) et la signification apparaîtra.
Il existe plusieurs façons de représenter un émoji.
À chaque émoji correspond un point de code Unicode (Unicode code point), c'est-à-dire un numéro normatif qui le représente de façon unique. Par exemple, le bonhomme sourire correspond au point de code U+1F600 ou U+1F603 (version grands yeux) ou encore U+F604 (version yeux rieurs).
Vous trouverez la liste complète des émojis et de leur point de code Unicode ici : https://unicode.org/emoji/charts/full-emoji-list.html ou ici : https://emojiterra.com/list/.
L'émoji est donc un caractère et non une image. Ceci fait en sorte qu'il est possible de copier-coller un émoji dans un texte.
Il est possible de tester la valeur d'un point de code Unicode dans la console JavaScript de Google Chrome.
On placera le point de code Unicode entre apostrophes, guillemets ou guillemets obliques (backticks : `). On replacera le « U+ » par « \u » puis la valeur qui suit le U+ sera placée entre accolades, par exemple `\u{1F600}`.
Un point de code Unicode débute par « U+ » suivi d'un nombre hexadécimal unique. Ce nombre hexadécimal pourra être utilisé dans différents contextes.
Chaque langage ou technologie a sa propre façon d'indiquer qu'un nombre est dans sa représentation hexadécimale. Ainsi, selon le contexte, le « U+ » sera remplacé par d'autres caractères, par exemple :
Pour stocker l'émoji, comme pour stocker un caractère, les logiciels utilisent un encodage particulier. Un émoji est encodé sur 4 octets. Par exemple, le bonhomme sourire est représenté comme ceci : \xF0\x9F\x98\x80 ou \xF0\x9F\x98\x83 (version grands yeux) ou encore \xF0\x9F\x98\x84 (version yeux rieurs).
Les émojis ont également une représentation sous forme de shortname, parfois appelé shortcode. Par exemple :grinning: ou :smiley: (version grands yeux) ou encore :smile: (version yeux rieurs). Ces représentations sont utilisées dans différentes applications, par exemple GitHub, Trello, Discord ou YouTube.
Si les applications mobiles offrent généralement un clavier spécial pour insérer un émoji, il en va autrement sur un ordinateur de bureau.
Les usagers de Mac peuvent compter sur un raccourci-clavier pour faire afficher une fenêtre dans laquelle ils pourront choisir un émoji à insérer dans le texte : ⌃ Ctrl+⌘ Cmd+Espace.
Sous Windows, il faudra utiliser la technique du copier-coller (voir ci-bas).
Les émojis peuvent être affichés dans du code HTML à condition que la page Web utilise l'encodage UTF-8 (balise <meta charset="UTF-8">).
Il est à noter que certains émojis pourraient ne pas être supportés par certains navigateurs plus anciens.
La façon la plus simle pour afficher un émoji dans du code HTML consiste à faire du copier-coller de l'émoji, comme on le ferait avec n'importe quel caractère.
Vous pouvez voir tous les émojis à partir de la plupart des sites qui présentent les émojis. Le site suivant est intéressant puisqu'il copie l'émoji dès que vous cliquez dessus : https://emoji-maker.com/emoji_copy.
Une autre technique consiste à utiliser le code Unicode HTML de l'émoji. Ce code est obtenu en entourant le point de code Unicode par « &# » à gauche et « ; » à droite puis en remplaçant le « U+ » par un x. Par exemple, en entrant 😀 ou 😃 (version grands yeux) ou encore  (version yeux rieurs), vous obtenez un bonhomme sourire dans votre page Web.
Le même résultat sera obtenu en travaillant avec la valeur décimale du point de code Unicode, c'est-à-dire 😀 ou 😃 (version grands yeux) ou encore 😄 (version yeux rieurs).
Note sur l'accessibilité : pour que les lecteurs d'écrans puissent correctement interpréter les émojis, il faut les entourer de balises avec les attributs role et
Ex :
<span role="image" aria-label="coupe de vin">🍷</span>
Dans un programme JavaScript, on pourra représenter un émoji à l'aide de la fonction String.fromCodePoint().
Dans cette fonction, vous devez entrer le point de code Unicode de l'émoji en remplaçant « U+ » par « 0x », par exemple String.fromCodePoint(0x1F600).
Voici une démonstration à la console.
Fait intéressant, il est possible d'utiliser les émojis dans les règles CSS, par exemple dans une règle content.
On utilisera leur point de code Unicode en prenant soin de remplacer le « U+ » par « \0 » (barre oblique inverse zéro).
Ex :
ul.ingredients {
list-style: none;
text-align: left;
}
ul.ingredients li:before {
content: "\01F36A \0020"; /* un biscuit suivi d'un espace */
}
Résultat :
Pour certains émojis, il est possible de spécifier la couleur de la peau, le genre, la couleur des cheveux. On utilisera pour celà des modificateurs d'émojis.
La peau de certains émojis peut être modifiée à l'aide des modificateurs U+1F3FB à U+1F3FF.
Le genre peut être modifié pour quelques émojis à l'aide des modificateurs U+2640 (femme) et U+2642 (homme).
Contrairement au modificateur de peau, le modificateur de genre doit utiliser un liant sans chasse (en anglais : Zero Width Joiner ou ZWJ). Le code du liant sans chasse est U+200D.
Les cheveux peuvent être modifiés pour quelques émojis à l'aide des modificateurs U+1F9B0 à U+1F9B3.
Le modificateur de cheveux doit lui aussi utiliser un liant sans chasse (U+200D).
Le liant sans chasse (U+200D) permet également de combiner plusieurs émojis en un seul.
Voici quelques exemples amusants.
Puisque l'émoji est stocké sur 4 octets, un texte qui contient des émojis ne peut pas être stocké dans n'importe quelle base de données. Il faut que l'encodage supporte les caractères sur 4 octets.
Avec MySQL, il faut utiliser l'encodage utf8mb4.
Si vous tentez d'enregistrer du texte avec des émojis dans une base de données utf8, vous obtiendrez un message d'erreur du genre « SQLSTATE[HY000]: General error: 1366 Incorrect string value: '\\xF0\\x9F\\x98\\x84\\x0D\\x0A...' ».
S'il est impossible pour vous d'utiliser l'encodage utf8mb4, vous pouvez quand même travailler avec des émojis. Consultez l'astuce sur la fiche Enregistrer un émoji sans utf8mb4.
1. « Émoticône ». Office québécois de la langue française. http://gdt.oqlf.gouv.qc.ca/ficheOqlf.aspx?Id_Fiche=26544229
2. « Émoticone ». Termium Plus. https://www.btb.termiumplus.gc.ca/tpv2alpha/alpha-fra.html?lang=fra&i=1&srchtxt=%C3%A9moticone&codom2nd_wet=1#resultrecs
3. « Smiley ». Wikipédia. https://fr.wikipedia.org/wiki/Smiley
4. « Émoji ». Office québécois de la langue française. http://gdt.oqlf.gouv.qc.ca/ficheOqlf.aspx?Id_Fiche=26532301
5. « Émoji ». Wikipédia. https://fr.wikipedia.org/wiki/%C3%89moji
« Full Emoji List, v13.0 ». unicode.org. http://www.unicode.org/emoji/charts/full-emoji-list.html
« Complete Emoji List ». EmojiTerra. https://emojiterra.com/list/
« emoji cheat sheet ». Web FX. https://www.webfx.com/tools/emoji-cheat-sheet/
« Emoji Copy and Paste | Get Emoji | Emoji List ». Emoji maker. https://emoji-maker.com/emoji_copy
« Emojipedia ». Emojipedia. https://emojipedia.org/
« Smileys, émoticônes, émojis : Quelles différences ? ». allbranded.fr. https://www.allbranded.fr/Smileys-emoticones-emojis-Quelles-differences/
« Smiley Face and Emoji Meanings ». Webopedia. https://www.webopedia.com/quick_ref/textmessageabbreviations_02.asp
« How To Insert Emojis In HTML ». linuxwebdevelopment.com. https://linuxwebdevelopment.com/how-to-insert-emojis-in-html/
« https://www.kirupa.com/html5/emoji.htm ». Kirupa. https://www.kirupa.com/html5/emoji.htm
« Kaomoji: Japanese Emoticons ». Kaomoji. http://kaomoji.ru/en/
« Emoji Modifiers and Sequence Combinations ». Wisdom. https://eng.getwisdom.io/emoji-modifiers-and-sequence-combinations/
« Everything You Need To Know About Emoji ». Smashing magazine. https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/
▼Publicité
