Buscar e copiar emoji

O que é uma ferramenta de busca e cópia de emoji?#

Emojis parecem caracteres únicos, mas por baixo do capô a maioria deles não é. A cara sorridente 😀 é um único ponto de código Unicode; o coração vermelho ❤️ são dois (um coração base mais um seletor de variação que o força a renderizar como o emoji colorido em vez de um glifo de texto simples); a bandeira da China 🇨🇳 são duas letras indicadoras regionais coladas. Quando você precisa do próprio emoji, isso não importa — você apenas cola o glifo. Mas no momento em que você precisa do seu ponto de código para documentação, da sua entidade HTML para uma página web, do seu escape JavaScript para uma string literal, ou do seu escape CSS para uma regra content:, os emojis de múltiplos pontos de código quebram ferramentas ingênuas que dividem por unidades UTF-16 e produzem metades corrompidas.

Esta página é um catálogo pesquisável de emoji que lida com tudo isso corretamente. Você busca por nome ou palavra-chave no seu idioma, navega em nove categorias, clica em qualquer emoji e o copia num de cinco formatos — glifo, ponto de código, HTML, JavaScript ou CSS — cada um gerado percorrendo o glifo ponto de código por ponto de código, então ❤️ e 🇨🇳 saem certos.

Como usar#

O layout é uma barra lateral (pesquisa + categorias) à esquerda e uma grelha + painel de detalhe à direita.

1. Encontre o emoji. Ou digite na caixa de pesquisa ou clique numa categoria na barra lateral (Caras e emoções, Pessoas e corpo, Animais e natureza, Comida e bebida, Atividade, Viagens e lugares, Objetos, Símbolos, Bandeiras). A pesquisa corresponde ao nome e às palavras-chave no seu idioma, e também ao nome em inglês e ao ponto de código — então digitar heart ou 1F600 funciona em qualquer idioma.
2. Clique num emoji na grelha. O painel de detalhe abaixo da grelha é preenchido com o glifo, o seu nome localizado e a sua versão Unicode.
3. Copie no formato que precisa. O painel de detalhe oferece cinco botões de cópia:
   • Copiar emoji — o próprio glifo, para chat, docs ou uma ferramenta de design.
   • Copiar codepoint — a forma U+... (unida por espaços quando há vários), para documentação ou uma consulta Unicode.
   • Copiar entidade HTML — uma referência numérica decimal, para colar em HTML bruto.
   • Copiar escape JS — um escape de chave ES2015, para uma string literal JavaScript ou TypeScript.
   • Copiar escape CSS — um escape CSS, para uso dentro de content: ou duma regra ::after.

Principais funcionalidades#

• Cinco formatos de cópia, um clique cada. Sem conversão manual entre glifo, ponto de código e as formas de escape HTML/JS/CSS — todo emoji está disponível nos cinco.
• Correto em emojis de múltiplos pontos de código. Os escapes são gerados iterando o glifo por ponto de código Unicode, não por unidade UTF-16. Um coração vermelho ❤️ produz um \u{2764}\u{FE0F} limpo, não um par de substitutos corrompido.
• Pesquisa ciente do idioma que ainda funciona entre idiomas. Nomes e palavras-chave são localizados, mas o inglês também é sempre indexado, além do ponto de código bruto — então smile, a palavra localizada ou 1F600 chegam ao mesmo emoji.
• Nove categorias. As categorias padrão de emoji Unicode, cada uma com um glifo representativo na barra lateral, para que você consiga navegar quando não tem um termo de pesquisa.
• Amigável para teclado e leitores de tela. A grelha é uma listbox com navegação por setas, e o painel de detalhe é uma região aria-live que anuncia o nome e o ponto de código conforme você se move.

Exemplo prático#

Copie o coração vermelho ❤️ nos cinco formatos. Clique nele na categoria Símbolos (ou pesquise heart), e o painel de detalhe mostra:

• Emoji: ❤️
• Code point: U+2764 U+FE0F
• HTML: ❤️
• JS: \u{2764}\u{FE0F}
• CSS: \2764 \FE0F

Repare que há dois pontos de código, não um. U+2764 é o coração base (um caractere de texto simples que remonta a antes de os emoji existirem); U+FE0F é o seletor de variação-16, um ponto de código de largura zero cujo único trabalho é dizer ao renderizador “exiba o caractere anterior na sua forma colorida de emoji, não como um glifo de texto preto”. Retire o seletor e algumas plataformas mostram um coração em estilo de texto; mantenha-o e você tem o coração vermelho. Todo formato aqui preserva ambos os pontos de código, o motivo pelo qual colar a entidade HTML numa página ainda renderiza o coração colorido.

Contraste com a cara sorridente 😀, que é um único ponto de código (U+1F600). As suas formas colapsam para 😀, \u{1F600} e \1F600 — um escape de cada, porque há apenas um ponto de código a codificar. A diferença entre os dois é exatamente o motivo pelo qual uma ferramenta que percorre pontos de código (em vez de presumir que um glifo equivale a um ponto de código) importa.

FAQ#

Qual formato devo copiar para o que estou fazendo?#

Para uma mensagem de chat, um documento ou um mockup de design, copie Emoji — o glifo é universal. Para um documento técnico ou um relatório de bug referenciando um caractere específico, copie Code point (U+1F600). Para código-fonte HTML bruto, HTML (😀) é o mais seguro porque não pode ser corrompido por problemas de codificação. Para uma string JavaScript ou TypeScript, JS (\u{1F600}). Para um valor de content: em CSS, CSS (\1F600).

Por que o coração vermelho mostra dois pontos de código?#

Porque ❤️ é uma sequência, não um caractere único. O ponto de código base U+2764 é o coração de texto; U+FE0F é um seletor de variação que solicita o estilo de apresentação de emoji. Alguns emoji vão além e usam um joiner de largura zero para combinar vários glifos num só (um emoji de família é construído assim), e bandeiras são sempre um par de letras indicadoras regionais. Esta ferramenta percorre o glifo por ponto de código antes de gerar escapes, então todo ponto de código na sequência é preservado.

Por que \u{1F600} e não 😀?#

Ambos são representações JavaScript válidas do mesmo emoji, mas funcionam de forma diferente. 😀 é um par de substitutos — duas unidades de código UTF-16 que só significam algo juntas, a forma antiga de codificar caracteres acima de U+FFFF. \u{1F600} é o escape de ponto de código ES2015, que escreve o ponto de código real diretamente e é muito mais legível. Esta ferramenta emite a forma de ponto de código porque é inequívoca e moderna; se você precisa da forma de substituto, o valor do ponto de código diz-lhe exatamente o que converter.

O emoji parece diferente no meu celular do que no meu computador — por quê?#

O Unicode define o que cada emoji significa, mas cada plataforma (Apple, Google, Microsoft, Samsung) desenha a sua própria arte, então o mesmo ponto de código renderiza com uma imagem diferente em cada uma. O ponto de código, a entidade HTML e todos os escapes são idênticos entre plataformas — apenas os pixels diferem. Se a consistência visual exata importar (uma campanha de marca, digamos), você enviaria o seu próprio conjunto de imagens de emoji em vez de depender da fonte da plataforma; para a maioria dos usos, a renderização nativa da plataforma é o que você quer.