Todo comenzó con Emoji: tipografía en color en la Web | Programar Plus

“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.

Una fila de diez emoji sonrientes amarillos que muestran la diferencia en la forma en que diferentes navegadores y aplicaciones representan el mismo personaje.  Algunas son simples sonrisas y otras son grandes sonrisas que muestran los dientes.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.

Un mensaje de texto con dos burbujas de chat.  La burbuja superior muestra una pistola de agua junto al texto y la burbuja inferior muestra una pistola.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?

Una fila de cuatro corazones en puntos, amarillo biselado, amarillo plano y rosa con mechones de cabello, respectivamente.🤮 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

Una captura de pantalla de la fuente Gilbert con colores brillantes de dos tonos en cada carácter.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.

(Visited 4 times, 1 visits today)