Catégories
Astuces et Design

Changer les tons de peau des emojis par programme

Alors, vous savez combien d'emoji ont des tons de peau différents? Les tons de peau Emoji sont extrêmement populaires, en particulier sur le texte et les réseaux sociaux. L'emoji au poing noir levé (✊🏿) a été élu "Emoji le plus 2020" par les World Emoji Awards d'Emojipedia.

Chaque ton est un modificateur et de nombreux emoji sont composés de modificateurs et d'encodages de base qui correspondent à des caractères spécifiques. Malheureusement, toutes les bibliothèques d'emojis ne prennent pas en charge les modificateurs. Mais, compte tenu de leur popularité, les modificateurs de teint emoji sont plus qu'une fonctionnalité «agréable à avoir». De plus, ils constituent une manière intelligente de travailler car ils nous permettent d'écrire un code plus modulaire et plus efficace.

C'est ce que nous faisons dans cet article: découvrez comment utiliser les modificateurs d'émojis par programmation. De cette façon, si vous êtes déjà bloqué sans prise en charge du teint de la peau ou si vous souhaitez créer des variantes personnalisées d'autres emoji, vous saurez comment faire!

Rencontrez l'échelle Fitzpatrick

Les modificateurs de teint ont été officiellement ajoutés aux emoji en 2015 dans le cadre d'Unicode 8.0. Ils sont basés sur l'échelle de Fitzpatrick, qui est une classification formelle des tons de peau humaine. Le graphique suivant montre comment les caractères emoji correspondent aux types Fitzpatrick:

Caractère du teint Type de Fitzpatrick
🏻 1-2
🏼 3
🏽 4
🏾 5
🏿 6

Dans le cas d'utilisation le plus simple, lorsqu'un de ces caractères est ajouté à un emoji prenant en charge les modificateurs de teint, cela changera le teint de la peau de l'emoji.

Une autre façon de dire que: 👶 + 🏽 = 👶🏽

Appliquer des modificateurs de teint avec CSS

Pour permuter entre les tons de peau emoji à l'aide de CSS, nous commencerions par le caractère emoji de base (👶), puis nous ajouterions le ton de peau à l'aide du ::after pseudo-sélecteur.

En plus d'utiliser les caractères emoji rendus, nous pourrions utiliser les codes hexadécimaux Unicode à la place:

Suppression et échange de modificateurs de teint avec JavaScript

Et si l'emoji avec lequel vous travaillez a déjà un modificateur de teint appliqué? Pour cela, nous devons aller au-delà du CSS. Voici un exemple utilisant JavaScript:

Que se passe t-il ici? Tout d'abord, nous commençons avec un bébé emoji avec Fitzpatrick Type 4. Nous le passons ensuite dans la fonction removeModifier, qui recherche l'un des modificateurs de teint et le supprime de la chaîne. Maintenant que nous avons l'emoji sans modificateur, nous pouvons ajouter le modificateur que nous voulons.

Bien que cette approche fonctionne avec de nombreux emoji, nous rencontrons des problèmes lorsque d'autres modificateurs sont introduits. C’est pourquoi nous devons maintenant parler de…

Travailler avec des séquences ZWJ

Les séquences de jointure de largeur nulle (ZWJ) sont comme les mots composés d'Unicode. Ils se composent de deux ou plusieurs emoji joints par le menuisier de largeur zéro, U+200D.

Les séquences ZWJ sont les plus couramment utilisées pour ajouter des modificateurs de genre aux emoji. Par exemple, une personne qui soulève des poids, plus ZWJ, plus le signe féminin, équivaut à une femme qui soulève des poids (️🏋️ + ♀︎ = 🏋️‍♀️).

Il y a quelques points importants à garder à l'esprit lorsque vous travaillez avec des séquences ZWJ:

  • Les séquences ne sont que des recommandations. Ils proviennent du consortium Unicode et ne sont pas garantis pour être pris en charge sur toutes les plates-formes. S'ils ne sont pas pris en charge par une plate-forme, une séquence de secours d'emoji ordinaires sera affichée à la place.
  • Les modificateurs de teint, s'ils sont présents, doivent être inclus après l'emoji mais avant le ZWJ.
  • Certaines séquences ZWJ incluent plusieurs emoji qui ont chacun des modificateurs de teint différents.

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

  • Les modificateurs de teint de peau doivent être insérés immédiatement après tout emoji de base plutôt que d'être simplement ajoutés à la fin de l'emoji.
  • S'il y a plusieurs emoji dans une séquence ZWJ qui ont des modificateurs de teint, les modificateurs devront être remplacés pour chacun de ces emoji.

Limites

À partir de cet exemple, vous remarquerez peut-être la limitation de la cohérence. La vue de l'éditeur montre chacun des caractères d'une séquence ZWJ séparément, à l'exception des modificateurs de teint, qui sont immédiatement appliqués à leur emoji correspondant. La console ou les vues de résultats, par contre, tenteront de rendre le caractère pour toute la séquence.

La prise en charge de cela varie selon la plate-forme. Certains éditeurs peuvent tenter de rendre les séquences ZWJ, et tous les navigateurs ne prendront pas en charge les mêmes ensembles de séquences ZWJ.

De plus, pour ajouter des tons chair dans une séquence ZWJ, il faut savoir ce qui est utilisé comme emoji de base. Bien que cela soit relativement simple dans une situation où les emoji sont fournis par une collection connue, les choses deviennent plus difficiles si nous voulons être en mesure de gérer les entrées arbitraires d'un utilisateur.

Sachez également que les solutions CSS de cet article ne sont pas compatibles avec les séquences ZWJ.

Questions pour guider le développement

Je vous propose quelques questions que vous voudrez peut-être vous poser lorsque vous concevez un système qui doit gérer les modificateurs de teint emoji:

  • Ai-je le contrôle sur les emoji avec lesquels mon système interagira?
  • Ma bibliothèque d'emojis contient-elle des informations sur les emojis compatibles avec les modificateurs de 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 que, entre les réponses à ces questions et les exemples que nous avons examinés ici, vous aurez tout ce dont vous avez besoin pour prendre en charge les modificateurs de teint emoji dans les situations où vous en avez besoin.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *