Changer les tons de peau des emoji programmatiques

Modificateur de teint emoji: Guide de traitement programmatique

Ce n'est pas un secret que les emoji ont plusieurs couleurs de peau. Surtout dans le texte et les médias sociaux, ils sont très populaires. ✊? (Rising Black Fist) Les emojis ont même été nommés "Meilleurs emoji de 2020" par le prix Emoji World Emoji d'Emojipedia.

Chaque couleur de peau est un modificateur, et de nombreux emojis sont composés de modificateurs et d'encodages de base qui correspondent à des caractères spécifiques. Malheureusement, toutes les bibliothèques Emoji ne prennent pas en charge les modificateurs. Mais compte tenu de sa popularité, les modificateurs du teint emoji sont bien plus que la fonction «glaçage sur le gâteau». De plus, ils sont également un moyen de travail intelligent car ils nous permettent d'écrire du code plus modulaire et plus efficace.

Par conséquent, le but de cet article est de comprendre comment traiter les modificateurs d'emoji par programme. De cette façon, si vous rencontrez des situations où les tons de peau ne sont pas pris en charge ou que vous souhaitez créer des variantes personnalisées d'autres emojis, vous savez quoi faire!

Méthode de classement du teint Fitzpatrick

Le modificateur du teint a été officiellement ajouté aux emoji en 2015 dans le cadre de Unicode 8.0. Ils sont basés sur la méthode de l'évaluation du teint Fitzpatrick, une classification formelle des tons de peau humaine. Le tableau suivant montre comment les personnages des emoji correspondent au type Fitzpatrick:

Dans le cas d'utilisation le plus simple, lorsque l'un de ces caractères est attaché à un emoji qui prend en charge le modificateur du teint, il modifie le teint de l'emoji.

Autrement dit: ? ? = ??

Appliquer les modificateurs de couleur de peau à l'aide de CSS

Pour basculer entre les tons de peau des emoji à l'aide de CSS, nous commencerons avec le caractère emoji de base (?), Puis attacher les tons de peau en utilisant ::after pseudo.

En plus d'utiliser des caractères emoji rendus, nous pouvons également utiliser un code hexadécimal Unicode:

Utilisez JavaScript pour éliminer et changer les modificateurs de couleur de peau

Et si les emoji traités ont déjà appliqué le modificateur du teint? Pour ce faire, nous devons aller au-delà de CSS. Voici un exemple utilisant JavaScript:

Que se passe-t-il ici? Tout d'abord, nous commençons par un bébé emoji avec Fitzpatrick Type 4. Il est ensuite transmis à la fonction de removeModifier , qui recherche tout modificateur de teint et le supprime de la chaîne. Maintenant que nous avons des emojis sans modificateurs, nous pouvons ajouter tous les modificateurs que nous aimons.

Bien que cette approche fonctionne pour de nombreux emojis, nous avons des problèmes lors de l'introduction d'autres modificateurs. C'est pourquoi nous devons discuter maintenant ...

Traitement des séquences ZWJ

La séquence du connecteur à largeur zéro (ZWJ) est comme le mot composé d'Unicode. Ils se composent de deux emojis ou plus reliés par un connecteur à largeur zéro U 200D.

Les séquences ZWJ sont le plus souvent utilisées pour ajouter des modificateurs de genre aux emojis. Par exemple, un haltérophile plus ZWJ, plus un symbole féminin, équivaut à une femme d'haltérophilie (️? ️ ♀︎ =? ️‍♀️).

Lors du traitement des séquences ZWJ, vous devez faire attention aux points suivants:

• Ces séquences ne sont que des suggestions. Ils proviennent de l'alliance Unicode et ne sont pas garantis d'être pris en charge sur chaque plate-forme. Si la plate-forme ne les prend pas en charge, une séquence de secours d'émojis régulière sera affichée.
• Si un modificateur de teint est présent, il doit être inclus après les emoji mais avant ZWJ.
• Certaines séquences ZWJ contiennent plusieurs emojis, chacun avec un modificateur de teint différent.

Compte tenu de ces informations, nous devons apporter les modifications suivantes à l'exemple de code précédent:

• Le modificateur du teint doit être inséré après tout emoji de base, pas seulement attaché à la fin des emoji.
• S'il y a plusieurs emojis dans la séquence ZWJ avec des modificateurs de teint, vous devez remplacer le modificateur pour chaque emoji.

limite

À partir de cet exemple, vous pouvez remarquer les limites de la cohérence. La vue de l'éditeur affiche chaque caractère de la séquence ZWJ, à l'exception du modificateur de teint, qui est immédiatement appliqué à leurs emojis correspondants. D'un autre côté, la console ou la vue de résultats essaiera de rendre les caractères de toute la séquence.

La prise en charge de cela varie d'une plate-forme à l'autre. Certains éditeurs peuvent essayer de rendre les séquences ZWJ, et tous les navigateurs ne prennent pas en charge le même ensemble de séquences ZWJ.

De plus, l'ajout de tons de peau à la séquence ZWJ nécessite de savoir ce qui est utilisé comme emoji de base. Bien que cela soit relativement simple dans le cas où les emojis sont fournis par des collections connues, les choses peuvent devenir plus difficiles si nous voulons pouvoir gérer les entrées arbitraires de l'utilisateur.

Notez également que la solution CSS dans cet article n'est pas compatible avec les séquences ZWJ.

Problèmes guidant le développement

J'ai réglé quelques questions que vous pourriez avoir besoin pour vous poser lors de la conception d'un système qui doit traiter les modificateurs du teint emoji:

• Puis-je contrôler avec quels emojis mon système interagira?
• Ma bibliothèque emoji contient-elle des informations sur les emojis prennent en charge les modificateurs du teint?
• Mon système doit-il ajouter, supprimer ou modifier les modificateurs?
• Ma plate-forme prend-elle en charge les séquences ZWJ? Si oui, lesquels?
• Mon système doit-il prendre en charge les séquences ZWJ avec plusieurs modificateurs de teint?

Espérons qu'avec les réponses à ces questions et les exemples que nous voyons ici, vous aurez tout ce dont vous avez besoin pour soutenir les modificateurs du teint emoji en cas de besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!