Buscar y copiar emoji

¿Qué es una herramienta de búsqueda y copia de emojis?#

Los emojis parecen caracteres individuales, pero por debajo la mayoría no lo son. La cara sonriente 😀 es un único punto de código Unicode; el corazón rojo ❤️ son dos (un corazón base más un variation selector que lo fuerza a renderizar como emoji colorido en vez de como glifo de texto plano); la bandera de China 🇨🇳 son dos letras de indicador regional pegadas. Cuando necesitas el emoji en sí eso no importa: simplemente pegas el glifo. Pero en el momento en que necesitas su punto de código para documentación, su entidad HTML para una página web, su escape JavaScript para un literal de cadena o su escape CSS para una regla content:, los de varios puntos de código rompen las herramientas ingenuas que dividen por unidades UTF-16 y producen mitades de surrogate corruptas.

Esta página es un catálogo de emojis buscable que maneja todo eso correctamente. Buscas por nombre o palabra clave en tu idioma, exploras nueve categorías, haces clic en cualquier emoji y lo copias en uno de cinco formatos (glifo, punto de código, HTML, JavaScript o CSS), cada uno generado recorriendo el glifo punto de código a punto de código, así que ❤️ y 🇨🇳 salen correctos.

Cómo se usa#

La disposición es una barra lateral (búsqueda + categorías) a la izquierda y una rejilla + panel de detalle a la derecha.

1. Encuentra el emoji. Escribe en la caja de búsqueda o haz clic en una categoría de la barra lateral (Emoticonos y emociones, Personas y cuerpo, Animales y naturaleza, Comida y bebida, Actividad, Viajes y lugares, Objetos, Símbolos, Banderas). La búsqueda coincide con el nombre y las palabras clave en tu idioma, y también con el nombre en inglés y el punto de código; así que escribir heart o 1F600 funciona en cualquier idioma.
2. Haz clic en un emoji de la rejilla. El panel de detalle bajo la rejilla se rellena con el glifo, su nombre localizado y su versión de Unicode.
3. Copia en el formato que necesites. El panel de detalle ofrece cinco botones de copia:
   • Copiar emoji — el glifo mismo, para chat, documentos o una herramienta de diseño.
   • Copiar código — la forma U+... (unida por espacios cuando hay varios), para documentación o una búsqueda en Unicode.
   • Copiar entidad HTML — una referencia numérica decimal a carácter, para pegar en HTML en crudo.
   • Copiar escape JS — un escape de llaves ES2015, para un literal de cadena JavaScript o TypeScript.
   • Copiar escape CSS — un escape CSS, para usar dentro de content: o una regla ::after.

Características clave#

• Cinco formatos de copia, un clic cada uno. Sin conversión manual entre glifo, punto de código y las formas de escape HTML/JS/CSS: cada emoji está disponible en los cinco.
• Correcto con emojis de varios puntos de código. Los escapes se generan iterando el glifo por punto de código Unicode, no por unidad UTF-16. Un corazón rojo ❤️ produce un \u{2764}\u{FE0F} limpio, no un par surrogate garabateado.
• Búsqueda consciente del idioma que sigue funcionando entre lenguas. Los nombres y palabras clave están localizados, pero el inglés siempre se indexa también, además del punto de código en bruto; así que smile, la palabra localizada o 1F600 llegan al mismo emoji.
• Nueve categorías. Las categorías estándar de emoji de Unicode, cada una con un glifo representativo en la barra lateral, para que puedas explorar cuando no tienes un término de búsqueda.
• Compatible con teclado y lectores de pantalla. La rejilla es un listbox con navegación por flechas, y el panel de detalle es una región aria-live que anuncia el nombre y el punto de código conforme te mueves.

Ejemplo práctico#

Copia el corazón rojo ❤️ en los cinco formatos. Haz clic en él en la categoría Símbolos (o busca heart) y el panel de detalle muestra:

• Emoji: ❤️
• Código: U+2764 U+FE0F
• HTML: ❤️
• JS: \u{2764}\u{FE0F}
• CSS: \2764 \FE0F

Fíjate en que hay dos puntos de código, no uno. U+2764 es el corazón base (un carácter de texto que se remonta a antes de que existieran los emojis); U+FE0F es el variation selector-16, un punto de código de anchura cero cuyo único trabajo es decirle al renderizador «muestra el carácter precedente en su forma de emoji colorido, no como glifo de texto negro». Quita el selector y algunas plataformas muestran un corazón estilo texto; mantenlo y obtienes el corazón rojo de emoji. Todos los formatos de aquí preservan ambos puntos de código, por eso pegar la entidad HTML en una página sigue renderizando el corazón de color.

Contrástalo con la cara sonriente 😀, que es un único punto de código (U+1F600). Sus formas colapsan a 😀, \u{1F600} y \1F600: un escape cada una, porque solo hay un punto de código que codificar. La diferencia entre los dos es justo por lo que importa una herramienta que recorre los puntos de código (en vez de asumir que un glifo iguala a un punto de código).

Preguntas frecuentes#

¿Qué formato debería copiar para lo que estoy haciendo?#

Para un mensaje de chat, un documento o un mockup de diseño, copia Emoji: el glifo es universal. Para un documento técnico o un informe de error que referencia un carácter concreto, copia Código (U+1F600). Para código HTML en crudo, HTML (😀) es lo más seguro porque no puede destrozarse por problemas de codificación. Para una cadena JavaScript o TypeScript, JS (\u{1F600}). Para un valor content: de CSS, CSS (\1F600).

¿Por qué el corazón rojo muestra dos puntos de código?#

Porque ❤️ es una secuencia, no un único carácter. El punto de código base U+2764 es el corazón de texto; U+FE0F es un variation selector que pide el estilo de presentación emoji. Algunos emojis van más allá y usan un zero-width joiner para combinar varios glifos en uno (un emoji de familia se construye así), y las banderas son siempre un par de letras de indicador regional. Esta herramienta recorre el glifo por punto de código antes de generar los escapes, así que cada punto de código de la secuencia se preserva.

¿Por qué \u{1F600} y no 😀?#

Ambos son representaciones JavaScript válidas del mismo emoji, pero funcionan de forma diferente. 😀 es un par surrogate: dos unidades de código UTF-16 que solo significan algo juntas, la forma antigua de codificar caracteres por encima de U+FFFF. \u{1F600} es el escape de punto de código ES2015, que escribe el punto de código real directamente y es mucho más fácil de leer. Esta herramienta emite la forma de punto de código porque es inequívoca y moderna; si necesitas la forma surrogate, el valor del punto de código te dice exactamente qué convertir.

El emoji se ve diferente en mi teléfono que en mi ordenador. ¿Por qué?#

Unicode define qué significa cada emoji, pero cada plataforma (Apple, Google, Microsoft, Samsung) dibuja su propia ilustración, así que el mismo punto de código se renderiza con una imagen diferente en cada una. El punto de código, la entidad HTML y todos los escapes son idénticos entre plataformas; solo difieren los píxeles. Si la consistencia visual exacta importa (una campaña de marca, digamos), tendrías que servir tu propio conjunto de imágenes de emoji en vez de confiar en la fuente de la plataforma; para la mayoría de los usos, el renderizado nativo de la plataforma es lo que quieres.