Codificación de emojis, Unicode e internacionalización

Hola, gracias por esa gran introducción. Soy Naomi Meyer, y trabajo como ingeniera de desarrollo de software en Adobe, donde me dedico a la localización y la ingeniería de internacionalización para productos creativos como Adobe Fonts y Adobe Portfolio. Aquí es donde puedes encontrarme en línea, y si hay algo que te apasione o tengas opiniones fuertes al respecto, por favor házmelo saber. Me encantaría continuar esta conversación en línea.

Estoy segura de que la mayoría de nosotros hemos visto esto muchas veces en la etiqueta head de nuestro marcado HTML, y todos sabemos agregar esta línea meta charset UTF-8. Pero últimamente me ha fascinado conocer los detalles subyacentes de lo que realmente significa y hace este UTF-8. Así que estoy emocionada de compartir más detalles sobre qué es y por qué creo que es tan genial. Además, esto se conecta con esta peculiaridad de JavaScript que podemos ver aquí con estos emojis aparentemente de caracteres, cuando como cadenas en JavaScript tienen una longitud mucho mayor de lo esperado. Siéntete libre de probar esto tú mismo en tus herramientas de desarrollo. Sé que yo quería probarlo primero cuando vi algo así. Y parte de mi objetivo hoy es hablar sobre por qué esto es así, por qué la longitud de familyEmoji es igual a 11, por qué eso es cierto. Y proporcionar más detalles sobre la codificación subyacente que ocurre aquí y qué podemos hacer para manejarlo correctamente.

Hablando de emojis, personalmente los encuentro tanto encantadores como intrigantes desde una perspectiva de ingeniería, una perspectiva lingüística, una perspectiva de diseño creativo, una perspectiva sociológica cultural internacional y mucho más. Nuestra agenda para hoy es comenzar con un poco de historia de la codificación para comprender más de dónde venimos. Luego entraremos en el Consorcio Unicode y el algoritmo UTF-8. Luego hablaremos sobre cómo esto nos permite codificar emojis y diferentes idiomas en plataformas, dispositivos y sistemas operativos. En general, creo que es muy importante tener en cuenta estas grandes ideas al construir productos de software que se utilizan a nivel mundial. Esta es una especie de línea de tiempo, una línea de tiempo amplia, de lo que tocaremos hoy. Tenemos mucho que cubrir en estos 20 minutos. Comencemos de inmediato con la codificación.

Por supuesto, cuando estamos en nuestras computadoras y escribimos un emoji, una letra, un carácter en cualquier idioma, estos son interpretados por la máquina como ceros y unos. Veamos un poco cómo funciona eso. Para entender cómo funciona hoy, retrocedamos en el pasado a la década de 1960 de las primeras codificaciones. En los años 60, había estas grandes computadoras que llenaban toda una habitación. Esta es una imagen de una de la NASA. Los ingenieros de entonces idearon un sistema. Ese sistema se llama ASCII, el Código Estándar Americano para el Intercambio de Información. Esta imagen es de la primera versión que se publicó en 1963. ASCII se desarrolló a partir del código telegráfico. Originalmente se construyó para una clasificación más conveniente de listas, alfabéticamente por caracteres ascendentes, descendentes.

En 1963, ASCII se codificó en 128 caracteres exclusivamente en inglés en enteros de 7 bits. Así que creo que ASCII es bastante genial porque tiene sentido cómo se construyó.

Primero, tomamos un carácter, como la letra A, y le asignamos un número decimal ASCII, 65, que en binario es igual a 1, cinco ceros, uno, en el sistema original de 7 bits. Luego, después de 65 viene 66, que es B, y continuamos en orden alfabético hasta llegar a Z, que es el decimal ASCII 90. Luego, para pasar de caracteres en mayúscula a minúscula, solo cambiamos un bit, 32 letras, 32 más tarde, que es el número decimal ASCII 97. Y eso continúa en orden alfabético. Así que creo que es un sistema genial. Y un saludo a Tom Scott en este video en el que lo explica de manera muy clara.

ASCII tiene sentido, pero con el tiempo, hubo muchos errores. Estos errores surgieron porque los caracteres no ingleses, como los que se muestran aquí, incluyen diacríticos y acentos adicionales que se agregaron. ASCII originalmente funcionaba con siete bits. Pero luego las computadoras pasaron a ocho bits, y pasamos de 128 caracteres a 256 caracteres. Y diferentes países y sistemas de idiomas agregaron más caracteres con esos 128 adicionales. Y diferentes idiomas como el japonés, por ejemplo, hicieron su propio sistema completo. Tenían un sistema de codificación multibyte separado, ya sabes, y el japonés, el ruso, todos estos idiomas tenían un sistema de codificación diferente. Y eso estaba bien cuando funcionaban de forma independiente. Pero luego llegó Internet. Y con la World Wide Web, Internet rompió un poco las computadoras porque no había un sistema de codificación universal. Cuando dos sistemas de codificación no compatibles se encontraban, obteníamos este tipo de errores como los que vemos aquí con muchos signos de interrogación y muchos errores.

Así que, en 1991, con la World Wide Web, obtuvimos Unicode versión 1. Y Unicode fue diseñado para ser un estándar de codificación universal para resolver este problema de codificaciones de caracteres conflictivas. Unicode Today es una organización sin fines de lucro cuya misión es que todos en el mundo puedan usar su propio idioma en teléfonos y computadoras. La versión 1.0 de Unicode se publicó en octubre de 1991 y tenía 7,161 caracteres. Para comprender y pensar en Unicode, debes hacer un cambio mental en tus suposiciones sobre el lenguaje y los caracteres. Hay tres ideas importantes para tener en cuenta. Un reconocimiento a Dimitri Pavloutin, quien tiene un excelente artículo que recomiendo llamado `Lo que todo desarrollador de JavaScript debe saber sobre Unicode`. La primera idea a tener en cuenta son los caracteres abstractos. En lugar de pensar en letras de un alfabeto, es bueno pensar en caracteres abstractos y Unicode trata los caracteres en estos términos abstractos. En segundo lugar, tenemos los puntos de código.

Entonces, U más 0041, lo buscamos en Unicode, obtenemos la letra A mayúscula latina. Actualmente, el estándar Unicode define más de un millón de puntos de código. Y todos tienen una asignación uno a uno, lo que asegura que no haya colisión entre alfabetos de diferentes idiomas. El tercer punto a tener en cuenta es un plano. Básicamente, en pocas palabras, Unicode divide más de un millón de puntos de código en 17 planos o grupos. Estos planos se representan aquí.

Entonces, el primer plano, plano 0, es el plano multilingüe básico, también conocido como BMP. Y eso es la unificación de todos los conjuntos de caracteres anteriores. Incluye ASCII, caracteres chinos, japoneses y coreanos. Y esto es cómo se ve el BMP. Y creo que es fascinante ver la descomposición de los diferentes scripts incluidos. Puedes ver scripts del este asiático y los caracteres chinos, japoneses, coreanos incluyen muchos puntos de código adicionales. Entonces, el BMP consta de cuatro dígitos hexadecimales. Y luego, fuera del BMP, el plano 1 del BMP consta de cinco dígitos hexadecimales. Y el plano 16 consta de seis dígitos hexadecimales. Y fuera del BMP se encuentra el plano astral o los planos suplementarios.

Entonces, ¿cómo se relaciona esto con nuestra etiqueta de encabezado con UTF-8? Que todos, ya sabes, estamos acostumbrados a ver. Sabemos acerca de los puntos de código. Caracteres abstractos, como U más 0041 es A. Y sabemos acerca de las unidades de código o bits físicos, porque, ya sabes, las computadoras, a nivel de memoria, no usan puntos de código o caracteres abstractos. Necesitan una forma física de representar los puntos de código Unicode. Entonces, las computadoras traducen los puntos de código Unicode en bits físicos utilizando una traducción de codificación de caracteres, que realiza la transformación del punto de código en bits físicos. Y Unicode tiene este popular algoritmo de traducción de codificación de caracteres llamado Unicode Transformation Format o UTF, que hace este trabajo por nosotros. Y las codificaciones populares de UTF son UTF-8, UTF-16 y UTF-32. Entonces, UTF es realmente genial. Es reversible, por lo que las conversiones entre todas ellas se basan en algoritmos. Eso es difícil de decir.

Son rápidos y admiten una conversión sin pérdidas. UTF-8 es el más común en la web. UTF-16 es utilizado por Java y Windows. Y tanto UTF-8 como UTF-32 son utilizados por Linux y varios sistemas Unix.

Pero JavaScript es extraño. Así que, hay dos excelentes artículos que recomiendo encarecidamente de Matias Banards que profundizan más en JavaScript y Unicode. Pero básicamente, en resumen, el propio motor ECMAScript expone los caracteres según UCS2, no UTF-16. Por lo tanto, la codificación del motor de JavaScript puede tener estos extraños efectos negativos cuando JavaScript trabaja con Unicode.

Y esto es realmente importante tener en cuenta porque, como desarrolladores, hacemos mucha manipulación de cadenas. Hacemos ordenamiento, filtrado, búsqueda, consultas. Hay mucha lógica empresarial involucrada con las cadenas. Por lo tanto, es genial entender cómo se codifican estas cadenas para reducir los errores. Esta parte se ve extraña. Pasemos a la siguiente.

Entonces, algo que es un buen ejemplo de cómo JavaScript es un poco extraño con las cadenas es el ejemplo de una marca de combinación. En danés, tienes la letra A con un pequeño círculo encima que, en Unicode, son dos caracteres separados. Donde el círculo encima es una marca de combinación diseñada para modificar el carácter precedente. Entonces, si mostramos por consola estos dos puntos de código Unicode, obtenemos la marca de combinación A. Este es un ejemplo con una marca de combinación.

Otro ejemplo que tenemos aquí es café con la E acentuada. Y este es diferente porque si definimos, ya sabes, esta variable como drink con café con la E, podemos ver que drink.length, aunque parece que debería tener cuatro caracteres, en realidad en JavaScript se muestra como cinco caracteres. Y luego, si dividimos esta cadena en un array, podemos ver que el elemento final del array es ese acento final. Y así puede surgir mucha confusión cuando ignoramos el concepto de secuencias de unidades de código. Por lo tanto, es realmente importante tenerlo en cuenta para evitar errores de cadena como vemos aquí en café con acento.

Entonces, hay una gran solución que podemos usar y es string.prototype.normalize, que es un método que devuelve la forma de normalización Unicode de la cadena. Aquí está el enlace a la documentación de MDN. Creo que es fascinante. Entonces, si tomamos ese mismo ejemplo con café con acento y lo normalizamos, vemos que la longitud ahora es de cuatro. Y si lo dividimos en un array, no obtenemos ese acento como el elemento final. Por lo tanto, esta es una excelente herramienta para evitar errores de localización y pensar realmente en cómo estamos construyendo nuestras aplicaciones para que puedan ser internacionalizadas.

Así que recuerda esa línea de tiempo. Hay otro elemento importante en la línea de tiempo, y eso es en 2010 en la versión 6.0 de Unicode, Unicode agregó soporte para emojis.

Así que pasemos a hablar de emojis. Así que recuerda los planos Unicode. Fuera del BMP está el plano astral, y el plano astral o el plano suplementario es mayor a cuatro caracteres hexadecimales.

Debido a que todos los emojis están fuera del BMP, están en el plano astral, todos los emojis tienen cinco dígitos hexadecimales que requieren 21 bits para guardar en memoria. Pero UTF-16 requiere dos unidades de código de 16 bits para manejar eso. Así que con este ejemplo de la cara sonriente, que es el punto de código Unicode de U más uno f600, podemos ver que requerimos dos unidades de código. Así que se dividen en pares sustitutos donde tenemos una unidad de código sustituta alta y una unidad de código sustituta baja. Y esta es la matemática para obtener el par sustituto donde ingresamos el punto de código astral de la cara sonriente y devolvemos los dos pares sustitutos de alta y baja. Debido a esto, si tomamos la cara sonriente y la dividimos, podemos ver que hay dos caracteres allí que están corrompidos. Y la longitud de la cadena de la cara sonriente es dos, lo cual no es lo que uno pensaría. Y esto también es cierto para emojis más largos. Permíteme compartir rápidamente un ejemplo divertido. Si abrimos la consola y lo puedes hacer en tu navegador si quieres. Permíteme cerrar todas estas advertencias. Entonces, si hacemos simple family, ¿verdad? Esto es familia. Y en Mac puedes hacer control comando espacio para abrir tus emojis. Podemos ver que family.length es 11. Y si intentamos family.split, esos 11 caracteres se dividen en un array. Y luego, si intentamos con otro, hagamos como cantante con darkskin.length, vemos siete. Y si hacemos singer.split, nuevamente vemos siete. Y puedes probar esto con muchos emojis, y las longitudes son sorprendentes, lo cual es divertido. Así que permíteme mostrar esa diapositiva nuevamente. Entonces, la pregunta es, ¿por qué son siete? ¿Por qué son once? Y la respuesta es multifacética. Pero una de ellas es el unidor de ancho cero. El unidor de ancho cero no es en sí mismo un emoji, pero se utiliza en secuencias de emojis como pegamento para unir diferentes puntos de código de emoji y crear secuencias de emoji compuestos.

Otro emoji importante para tener en cuenta es el selector de variación, que toma una representación de texto plano del emoji, como este corazón que vemos aquí, y lo estiliza para mostrar caracteres de texto plano con su representación de emoji colorido. Así que tenemos un corazón estilizado, pero cuando tomamos el emoji de corazón más el selector de variación, que es U más F E O F, creamos el corazón estilizado.

Otra variante de emoji es el modificador de emoji. Y este es el modificador de tono de piel, y se basa en la escala de Fitzpatrick, que en realidad se utiliza en dermatología para diferencias en la exposición a la luz UV. Así que no es realmente una escala de raza o etnia aquí. Es una escala de dermatología. Y este modificador de tono de piel se agregó en Unicode 8.0. Así que si abrimos nuevamente ese ejemplo del cantante, podemos ver que la combinación del cantante es tomar el emoji de mujer, que nuevamente, con los pares sustitutos altos y bajos, tiene una longitud de dos, más el emoji modificador de tono de piel, más el emoji de unión de ancho cero, más el emoji de micrófono. Obtenemos la combinación total de emojis de cantante igual a todos esos combinados, lo cual creo que es genial y asombroso acerca de los emojis.

Así que terminemos, ya sabes, con los emojis hoy. Los emojis son como fuentes y tienen variaciones en diferentes plataformas. Aquí vemos en el navegador en Apple, Google, Facebook, todos estos diferentes emojis y cómo pueden representarse de manera diferente, al igual que las fuentes en el navegador. Y nuevamente con el emoji de abrazo, el emoji de fiesta y el emoji de cara llorando de alegría, que es uno de mis favoritos. Y luego creo que esto es divertido porque el emoji de teléfono celular o el emoji de teléfono móvil se ve como el teléfono del proveedor en diferentes fuentes. Y el emoji de hamburguesa, esto fue una gran controversia en Internet porque la ubicación del queso variaba si estaba en la carne o en el pan. Y la gente estaba muy molesta al respecto. Y luego el emoji de pistola, este realmente ha generado mucha discusión entre los expertos legales sobre si los emojis pueden ser admisibles como evidencia en un juicio. Y los diferentes proveedores realmente lo cambiaron para que pareciera más bien una pistola de juguete para tratar de evitar esta controversia.

Así que teniendo eso en cuenta, creo que es realmente importante saber que cualquiera puede proponer un nuevo emoji para la próxima versión de Unicode. Puedes ir a este enlace y es un proceso pero es posible. Por ejemplo, estos cuatro emojis que vemos aquí fueron todos propuestos externamente a Unicode. Así que el emoji de gota de sangre que vemos aquí, aparece en el documental Beyond the Emoji, que recomiendo. Y el objetivo de este fue romper el estigma de la menstruación. El emoji de mujer con el hiyab, alguien dijo, hey, uso un hiyab. No tengo ningún emoji que se parezca a mí. Quiero conseguir uno en Unicode. Y lo lograron. Y Jennifer A. Lee, que es una líder de emoji realmente increíble, es de origen chino y quería un dumpling que fuera parte de su cultura. Así que trabajó duro para que se incluyera un dumpling en los emojis.

Así que he asistido a la conferencia de Unicode, y aunque están haciendo un gran trabajo desde el punto de vista de ingeniería, la codificación es fascinante. El consorcio Unicode, las personas que determinan los emojis y realizan cambios para futuras versiones de Unicode, es bastante masculino y homogéneo. Por eso creo que es muy importante tener más transparencia sobre este proceso para que podamos tener más emojis disponibles y codificarlos en bits, porque no se trata solo de tener el icono correcto para describir lo que comiste para el almuerzo. Se trata del reconocimiento digital de la cultura, de quién tiene la representación en nuestro futuro lenguaje digital. ¿Cómo tienen en cuenta esas representaciones diferentes aspectos como la etnia, la religión, y más? Animo a las personas a aprender más sobre Unicode, a aprender más sobre cómo pueden proponer un nuevo emoji y a involucrarse en los entresijos del proceso de codificación.

Eso es todo lo que tengo. Muchas gracias.

Genial, muchas gracias. Oye, ¿cómo va todo? Hola, todo bien. Bien, bien, bien. Como estaba diciendo a algunos de mis compañeros chefs, qué presentación tan informativa. Estoy deseando tener una charla con mis amigos mañana y plantear aleatoriamente la pregunta de por qué el emoji de familia tiene 11 caracteres. Solo dirás, oh Chris, eres tan inteligente. Y yo diré, sí, lo soy. Genial.

Pero sí, tenemos varias preguntas de la audiencia a las que voy a responder. Así que primero, la primera pregunta es de Nix. Nix quiere saber, porque algunos emojis son compuestos, ¿se pueden reemplazar elementos de ellos para producir algo diferente? Oh, esa es una pregunta muy divertida. ¿Sabes qué? Me encantaría probar eso. No veo por qué no. Tiene sentido. Explora, inténtalo. Creo que tendría que ser válido, necesitaría un design en la fuente que hayas seleccionado. Así que si estás en un Mac, ya sabes, necesitaría haber un design de Apple para ese emoji. Y si lo hay, entonces probablemente puedas cambiarlos usando los diferentes caracteres Unicode si quieres. En lugar de usar el selector de emojis. Genial.

Y luego esta pregunta es de Rin y Amir. Querían saber cuál es tu emoji favorito y por qué. Me encantan los emojis porque hay muchas formas diferentes de usarlos. Y a menudo uso una amplia variedad. Y trato de usar los emojis menos populares. Pero creo que mi favorito de todos los tiempos es probablemente el emoji de cara con lágrimas, la cara de alegría con lágrimas, simplemente porque es feliz y divertido. ¿Tienes uno, Chris? Oh hombre, el mío suele ser, el mejor es simplemente este. Ya sabes, el gesto que dice, OK, ese es el mío. Ese es el mío.

Porque casi siempre es un hilo largo y simplemente no puedo leerlo todo. Y yo solo pienso, bien, genial. Sí, exacto. Te respondo enseguida. Sí, también me gusta el pulgar hacia arriba. Exactamente. Exactamente.

La gente entiende que no estoy ocupado, simplemente soy demasiado perezoso para responder.

Tenemos una pregunta de Cynthia y la pregunta es, si alguien está construyendo una aplicación similar a Twitter y luego estamos limitando los caracteres en el mensaje usando la longitud de la cadena para calcular la cantidad de caracteres, ¿cómo puedes asegurarte de que un emoji cuente como un solo carácter en lugar de a veces siete? Sí, esto es realmente interesante. Estaba pensando en hacer una demostración de Twitter porque Twitter cuenta cada emoji individual como dos caracteres. Así que puedes probarlo tú mismo, ya sabes, en Twitter puedes tener una cadena de solo As y luego si agregas un emoji al final, verás que un emoji cuenta como dos caracteres. Así que eso es algo a tener en cuenta. Y otra cosa fascinante sobre los emojis de Twitter es que ciertos hashtags, ya sabes, incluyen un emoji. Por ejemplo, he estado usando mucho eso, ya sabes, el hashtag Black Lives Matter últimamente. Y al final, Twitter incluye el emoji del puño. Y así que no sé el número exacto de caracteres, pero pensarías que solo serían los caracteres ABC y no el emoji cuando estás contando para el recuento de caracteres. Pero el emoji se incluye como dos caracteres en los hashtags que tienen emojis, si eso tiene sentido.

Y luego una pregunta que también tenía, porque tu charla me fascinó bastante, es que quería saber qué papel juega la diversidad de culturas y tradiciones en el design de emojis. Un papel importante. Eso es algo que creo que es realmente importante con los emojis, es tratar de mantenerlos representativos del mundo real de las personas que los usan. Ya sabes, si son estas pequeñas imágenes que existen en cada teléfono, cada computadora, en todo el mundo, en todos los idiomas diferentes, creo que para ser más accesibles, deben representar a las personas que los usan. Y por eso, ya sabes, usar diferentes modificadores de género o diferentes modificadores de tono de piel es realmente importante para incluir y manejar eso en la codificación, porque así podemos, ya sabes, hacer que los emojis sean tan diversos como las personas que los usan. Y creo que es realmente útil que todos aprendan más sobre Unicode y el consorcio silencioso que está trabajando detrás de escena para agregar nuevos emojis, porque cosas como, ya sabes, las mujeres con hiyab o el rickshaw o el emoji de dumpling, estos representan diferentes culturas que tal vez el consorcio original de Unicode no incluyó, y creo que es realmente importante que haya más de esos. Seguro, seguro. Y luego tengo una pregunta de Drum. Y Drum quiere saber, ¿podemos usar UTF-16 o UTF-32 en la web? Sí, esa es una buena pregunta. Se recomienda usar UTF-8 en línea, en la web. Y es importante recordar que la web se codifica en UTF-8. Entonces, si tienes una database o un proceso de backend que utiliza UTF-32 o podría estar utilizando ASCII u otra codificación por completo, tenlo en cuenta. Porque cuando una cadena se codifica y

Esa es una gran pregunta, y mi familia es judía y tenemos sopa de albóndigas de matzá, que es como la sopa de pollo judía, y definitivamente es mi comida reconfortante, y estaba pensando que eso podría ser otro emoji, un emoji de sopa de albóndigas de matzá. Ahí lo tienes, ahí lo tienes. Sabes, las ideas importan, las ideas importan, ahora lo sabes, ahora lo sabes. Pero Naomi, muchas gracias por una presentación informativa. Definitivamente, definitivamente me harás, ya sabes, seré mucho más inteligente frente a mis amigos debido a esto, al menos durante la próxima semana más o menos, porque simplemente estaré transmitiendo todo lo que acabas de mencionar, y más. Y sí, por favor, ella estará en, irá a su sala de Zoom, así que siéntete libre de seguir haciendo preguntas, ya sabes, peeps. Y sí, Naomi, hasta que hablemos de nuevo. Ha sido un placer. Genial, muchas gracias, Chris. Gracias. Adiós adiós.