Recherche et copie d'emoji

Qu’est-ce qu’un outil de recherche et de copie d’emoji ?#

Les emoji ont l’air de caractères uniques, mais sous le capot la plupart ne le sont pas. Le visage souriant 😀 est un seul point de code Unicode ; le cœur rouge ❤️ en est deux (un cœur de base plus un sélecteur de variante qui force son affichage en emoji coloré plutôt qu’en glyphe de texte simple) ; le drapeau de la Chine 🇨🇳 est deux lettres indicatrices de région collées. Quand vous avez besoin de l’emoji lui-même, cela n’a pas d’importance — vous collez simplement le glyphe. Mais dès que vous avez besoin de son point de code pour une documentation, de son entité HTML pour une page web, de son échappement JavaScript pour un littéral de chaîne ou de son échappement CSS pour une règle content:, les emoji multi-points-de-code cassent les outils naïfs qui découpent sur les unités UTF-16 et produisent des moitiés de substitution corrompues.

Cette page est un catalogue d’emoji consultable qui gère tout cela correctement. Vous cherchez par nom ou mot-clé dans votre langue, parcourez neuf catégories, cliquez sur n’importe quel emoji et le copiez dans l’un des cinq formats — glyphe, point de code, HTML, JavaScript ou CSS — chacun généré en parcourant le glyphe point de code par point de code, donc ❤️ et 🇨🇳 sortent corrects.

Comment l’utiliser#

La mise en page est une barre latérale (recherche + catégories) à gauche et une grille + panneau de détail à droite.

1. Trouvez l’emoji. Soit saisissez dans la zone de recherche, soit cliquez sur une catégorie dans la barre latérale (Smileys et émotions, Personnes et corps, Animaux et nature, Nourriture et boisson, Activité, Voyage et lieux, Objets, Symboles, Drapeaux). La recherche correspond au nom et aux mots-clés dans votre langue, et aussi au nom anglais et au point de code — donc saisir heart ou 1F600 fonctionne dans n’importe quelle locale.
2. Cliquez sur un emoji dans la grille. Le panneau de détail sous la grille se remplit avec le glyphe, son nom localisé et sa version Unicode.
3. Copiez dans le format dont vous avez besoin. Le panneau de détail propose cinq boutons de copie :
   • Emoji — le glyphe lui-même, pour la messagerie, les docs ou un outil de design.
   • Point de code — la forme U+... (jointe par des espaces quand il y en a plusieurs), pour la documentation ou une recherche Unicode.
   • HTML — une référence de caractère numérique décimale, pour coller dans du HTML brut.
   • JS — un échappement à accolades ES2015, pour un littéral de chaîne JavaScript ou TypeScript.
   • CSS — un échappement CSS, à utiliser dans content: ou une règle ::after.

Caractéristiques principales#

• Cinq formats de copie, un clic chacun. Pas de conversion manuelle entre glyphe, point de code et les formes d’échappement HTML/JS/CSS — chaque emoji est disponible dans les cinq.
• Correct sur les emoji multi-points-de-code. Les échappements sont générés en itérant le glyphe par point de code Unicode, pas par unité UTF-16. Un cœur rouge ❤️ produit un \u{2764}\u{FE0F} propre, pas une paire de substitution brouillée.
• Recherche consciente de la locale qui reste interlingue. Les noms et mots-clés sont localisés, mais l’anglais est toujours indexé aussi, plus le point de code brut — donc smile, le mot localisé ou 1F600 atteignent tous le même emoji.
• Neuf catégories. Les catégories d’emoji Unicode standard, chacune avec un glyphe représentatif dans la barre latérale, pour naviguer quand vous n’avez pas de terme de recherche.
• Convivial clavier et lecteur d’écran. La grille est une listbox avec navigation par flèches, et le panneau de détail est une région aria-live qui annonce le nom et le point de code au fil du déplacement.

Exemple commenté#

Copiez le cœur rouge ❤️ dans les cinq formats. Cliquez dessus dans la catégorie Symboles (ou cherchez heart), et le panneau de détail affiche :

• Emoji : ❤️
• Point de code : U+2764 U+FE0F
• HTML : ❤️
• JS : \u{2764}\u{FE0F}
• CSS : \2764 \FE0F

Remarquez qu’il y a deux points de code, pas un. U+2764 est le cœur de base (un caractère de texte simple qui existait avant les emoji) ; U+FE0F est le sélecteur de variante-16, un point de code de largeur nulle dont le seul rôle est de dire au moteur de rendu « affiche le caractère précédent dans sa forme emoji colorée, pas comme un glyphe de texte noir ». Retirez le sélecteur et certaines plateformes affichent un cœur de style texte ; gardez-le et vous obtenez le cœur emoji rouge. Chaque format ici préserve les deux points de code, c’est pourquoi coller l’entité HTML dans une page affiche quand même le cœur coloré.

Contrastez avec le visage souriant 😀, qui est un seul point de code (U+1F600). Ses formes se réduisent à 😀, \u{1F600} et \1F600 — un échappement chacune, parce qu’il n’y a qu’un seul point de code à encoder. La différence entre les deux est exactement pourquoi un outil qui parcourt les points de code (plutôt que de supposer qu’un glyphe égale un point de code) compte.

FAQ#

Quel format dois-je copier pour ce que je fais ?#

Pour un message de messagerie, un document ou une maquette de design, copiez Emoji — le glyphe est universel. Pour une documentation technique ou un rapport de bug référençant un caractère précis, copiez le Point de code (U+1F600). Pour du source HTML brut, HTML (😀) est le plus sûr car il ne peut pas être abîmé par des problèmes d’encodage. Pour une chaîne JavaScript ou TypeScript, JS (\u{1F600}). Pour une valeur CSS content:, CSS (\1F600).

Pourquoi le cœur rouge affiche-t-il deux points de code ?#

Parce que ❤️ est une séquence, pas un seul caractère. Le point de code de base U+2764 est le cœur texte ; U+FE0F est un sélecteur de variante qui demande le style de présentation emoji. Certains emoji vont plus loin et utilisent un lieur de largeur nulle pour combiner plusieurs glyphes en un seul (un emoji de famille est construit ainsi), et les drapeaux sont toujours une paire de lettres indicatrices de région. Cet outil parcourt le glyphe par point de code avant de générer les échappements, donc chaque point de code de la séquence est préservé.

Pourquoi \u{1F600} et non 😀 ?#

Les deux sont des représentations JavaScript valides du même emoji, mais elles fonctionnent différemment. 😀 est une paire de substitution — deux unités de code UTF-16 qui n’ont de sens qu’ensemble, l’ancienne façon d’encoder les caractères au-dessus de U+FFFF. \u{1F600} est l’échappement de point de code ES2015, qui écrit directement le point de code réel et est bien plus lisible. Cet outil émet la forme point de code parce qu’elle est non ambiguë et moderne ; si vous avez besoin de la forme de substitution, la valeur du point de code vous dit exactement quoi convertir.

L’emoji est différent sur mon téléphone et sur mon ordinateur — pourquoi ?#

Unicode définit ce que chaque emoji signifie, mais chaque plateforme (Apple, Google, Microsoft, Samsung) dessine son propre artwork, donc le même point de code s’affiche avec une image différente sur chacune. Le point de code, l’entité HTML et chaque échappement sont identiques entre plateformes — seuls les pixels diffèrent. Si une cohérence visuelle exacte compte (une campagne de marque, par exemple), vous livreriez votre propre jeu d’images emoji plutôt que de vous fier à la police de la plateforme ; pour la plupart des usages, le rendu natif de la plateforme est ce que vous voulez.