Cambiar los tonos de piel de los emoji mediante programación
Entonces, ¿sabes cuántos emoji tienen diferentes tonos de piel? Los tonos de piel de los emojis son extremadamente populares, especialmente en mensajes de texto y en las redes sociales. El emoji del puño negro levantado (✊ ) fue votado como “El emoji más 2020” por los World Emoji Awards de Emojipedia.
Cada tono es un modificador y muchos emoji se componen de modificadores y codificaciones base que se asignan a caracteres específicos. Desafortunadamente, no todas las bibliotecas de emoji admiten modificadores. Pero, dada su popularidad, los modificadores de tono de piel de emoji son más que una característica “agradable de tener”. Además, son una forma inteligente de trabajar porque nos permiten escribir código más modular y eficiente.
Eso es lo que estamos haciendo en este artículo: descubrir cómo trabajar con modificadores de emoji mediante programación. De esta manera, si alguna vez te quedas sin compatibilidad con el tono de piel, o quieres crear variaciones personalizadas de otros emoji, ¡sabrás cómo hacerlo!
Conoce la escala Fitzpatrick
Los modificadores de tono de piel se agregaron oficialmente a los emoji en 2015 como parte de Unicode 8.0 . Se basan en la escala de Fitzpatrick , que es una clasificación formal de los tonos de piel humana. El siguiente cuadro muestra cómo los caracteres emoji coinciden con los tipos de Fitzpatrick:
Carácter del tono de piel | tipo fitzpatrick |
---|---|
1-2 | |
3 | |
4 | |
5 | |
6 |
En el caso de uso más simple, cuando uno de estos caracteres se agrega a un emoji que admite modificadores de tono de piel, cambiará el tono de piel del emoji.
Otra forma de decir eso: + =
Aplicar modificadores del tono de piel con CSS
Para cambiar entre tonos de piel de emoji usando CSS, comenzaríamos con el carácter emoji base ( ) y luego agregaríamos el tono de piel usando el ::after
pseudo-selector.
Además de usar los caracteres emoji renderizados, podríamos usar los códigos hexadecimales Unicode:
Eliminar e intercambiar modificadores de tono de piel con JavaScript
¿Qué pasa si al emoji con el que estás trabajando ya se le ha aplicado un modificador de tono de piel? Para eso, necesitaremos ir más allá de CSS. Aquí hay un ejemplo usando JavaScript:
¿Que está pasando aqui? Primero, comenzamos con un emoji de bebé con Fitzpatrick Type 4. Luego lo pasamos a la función removeModifier, que busca cualquiera de los modificadores de tono de piel y lo elimina de la cadena. Ahora que tenemos el emoji sin modificador, podemos agregar el modificador que queramos.
Si bien este enfoque funciona con muchos emoji, nos encontramos con problemas cuando se introducen otros modificadores. Por eso ahora tenemos que hablar de…
Trabajar con secuencias ZWJ
Las secuencias de unión de ancho cero (ZWJ) son como las palabras compuestas de Unicode. Consisten en dos o más emoji unidos por el conector de ancho cero U+200D
.
Las secuencias ZWJ se utilizan con mayor frecuencia para agregar modificadores de género a los emoji. Por ejemplo, una persona levantando pesas, más ZWJ, más el signo femenino, equivale a una mujer levantando pesas (️ ️ + ♀︎ = ️♀️).
Hay algunas cosas importantes que debes tener en cuenta al trabajar con secuencias ZWJ:
- Las secuencias son sólo recomendaciones . Provienen del Consorcio Unicode y no se garantiza que sean compatibles con todas las plataformas. Si no son compatibles con una plataforma, se mostrará una secuencia alternativa de emojis normales.
- Los modificadores del tono de piel, si están presentes, deben incluirse después del emoji pero antes del ZWJ.
- Algunas secuencias de ZWJ incluyen varios emoji, cada uno de los cuales tiene diferentes modificadores de tono de piel.
Dada esta información, debemos realizar los siguientes cambios en el ejemplo de código anterior:
- Los modificadores de tono de piel deben insertarse inmediatamente después de cualquier emoji base en lugar de simplemente agregarse al final del emoji.
- Si hay varios emoji en una secuencia ZWJ que tienen modificadores de tono de piel, entonces será necesario reemplazar los modificadores para cada uno de esos emoji.
Limitaciones
En este ejemplo, puede notar la limitación de coherencia. La vista del editor muestra cada uno de los personajes en una secuencia ZWJ por separado, con excepción de los modificadores de tono de piel, que se aplican inmediatamente a sus emoji correspondientes. La consola o las vistas de resultados, por otro lado, intentarán renderizar el personaje durante toda la secuencia.
La compatibilidad con esto variará según la plataforma. Algunos editores pueden intentar renderizar secuencias ZWJ y no todos los navegadores admitirán los mismos conjuntos de secuencias ZWJ.
Además, agregar tonos de piel en una secuencia ZWJ requiere saber qué se utiliza como emoji base. Si bien esto sería relativamente simple en una situación en la que los emoji provienen de una colección conocida, las cosas se vuelven más difíciles si queremos poder manejar entradas arbitrarias de un usuario.
Además, tenga en cuenta que las soluciones CSS de esta publicación no son compatibles con las secuencias ZWJ.
Preguntas para guiar el desarrollo
Reuní algunas preguntas que tal vez quieras hacerte cuando estés diseñando un sistema que necesite manejar modificadores de tono de piel de emoji:
- ¿Tengo control sobre con qué emoji interactuará mi sistema?
- ¿Mi biblioteca de emojis tiene información sobre qué emojis admiten modificadores de tono de piel?
- ¿Mi sistema necesita agregar, eliminar o cambiar los modificadores?
- ¿Mi plataforma admite secuencias ZWJ? ¿De ser asi, cuales?
- ¿Mi sistema necesita admitir secuencias ZWJ con múltiples modificadores de tono de piel ?
Con suerte, entre las respuestas a estas preguntas y los ejemplos que hemos visto aquí, tendrá todo lo que necesita para admitir modificadores de tono de piel emoji en situaciones en las que los necesite.
Deja un comentario