“La tipografía en la web es de un solo color: los caracteres son negros o rojos, nunca negros y rojos… Luego, los emoji aparecieron en escena, se convirtieron en parte de Unicode y, por lo tanto, podían expresarse mediante caracteres, o” glifos “en la terminología de fuentes. El sonriente y levitante hombre de negocios y el infame montón de caca se convirtieron en verdaderos hermanos de letras, números y signos de puntuación “.
– Roel Nieskens
Usar emojis en el código es fácil. Dirígete a emojipedia y copia y pega uno.
En HTML:
O en CSS:
Y JavaScript también:
(Alternativamente, puede especificar emoji con un punto de código Unicode).
Sin embargo, es posible que tenga un problema …
Perdido en la traducción: problema de coherencia de Emoji
La diversidad de emoji en las plataformas puede no parecer un problema importante. Sin embargo, estas inconsistencias a veces radicales dan lugar a una drástica falta de comunicación. Infamemente, el emoji de “cara sonriente con ojos sonrientes” termina como una mueca de dolor en los sistemas Apple más antiguos.
Esto fue tan importante que incluso The Washington Post lo cubrió.
Un emoji de pistola de agua inofensivo y juguetón puede aparecer como un arma de fuego mortal.
Cortesía de Emojipedia.
¿Y quién sabe cuántos romances se vieron frustrados por el emoji de corazón peludo absolutamente extraño de Google?
🤮 Desde entonces, Google ha rectificado
Unicode estandariza lo que debe representar cada emoji con una descripción concisa, pero el diseño visual depende de las distintas plataformas.
¡Fuentes de color al rescate!
¿La solución? Usa una fuente de emoji. Adobe ha lanzado una fuente llamada EmojiOne y Twitter Twemoji de código abierto. Es probable que sigan más.
@font-face {
font-family: 'emoji';
src: url('emojione-svg.woff2')
format('woff2');
}Si un usuario escribe en un HTML input o textarea, verán tu elegante emoji personalizado. ❤️
Una entrada en Firefox.
Las fuentes emoji también tienen la ventaja de evitar la pixelación que se ve en los emoji rasterizados a escala. Si desea emoji realmente grande, una fuente SVG-in-Opentype es claramente la mejor opción.
A la izquierda, un emoji de cara de perro estándar de Apple que parece pixelado. A la derecha, caracteres emoji suaves SVG-in-Opentype de Emojione y Twemoji, respectivamente. ¡Unicode (derecha) claramente no especifica una raza!
Soporte del navegador
Confusamente, las fuentes de color no son un estándar sino cuatro 🙄. OpenType es el formato de fuente utilizado en la web. Cuando se agregaron emoji a Unicode, los grandes jugadores se dieron cuenta de que era necesario agregar soporte multicolor a OpenType de alguna manera. Diferentes empresas propusieron una diversidad de soluciones. Las fuentes siguen siendo .ttf, .woff o .woff2, pero internamente son un poco diferentes. Reuní esta tabla de soporte usando una herramienta llamada Chromacheck:
| Cromo | Safari | Borde | Firefox | |
|---|---|---|---|---|
| Tipo de SVG en abierto | ❌ | ❌ | ✅ | ✅ |
| COLR / CPAL | ✅ | ✅ | ✅ | ✅ |
| SBIX | ✅ | ✅ | ✅ | ❌ |
| CBDT / CBLC | ✅ | ❌ | ✅ | ❌ |
Hemos aprendido por qué se inventaron las fuentes de color. Pero no se trata solo de emoji …
Alfabetos multicolores
Fuente Gilbert
Las fuentes de color son una nueva tecnología, por lo que todavía no encontrará tantos tipos de letra para elegir. Si desea probar uno que sea gratuito y de código abierto, Bungee de David Jonathan Ross es una excelente opción.
Si bien algunas fuentes brindan compatibilidad total con emoji y otras ofrecen un alfabeto multicolor, Ten Mincho, una fuente comercial de Adobe, toma un rumbo diferente. En palabras de su material de marketing, la fuente tiene “una pequeña sorpresa escondida en los glifos”. De los 2666 emoji en el estándar Unicode, Ten Mincho ofrece una gama muy limitada en un estilo japonés distintivo.
El adorable conjunto de emojis personalizados de Ten Mincho
Los emoji se han convertido en un modo predominante de comunicación humana. Más de 60 millones de emoji se utilizan en Facebook todos los días. En Messenger, el número es aún más asombroso, cinco mil millones por día. Si está creando cualquier tipo de aplicación de mensajería, obtener emoji correctamente es realmente importante.