Emojis

Inserindo emojis nas postagens

Você pode decorar seu texto inserindo emojis. Aprenda a fazer isso. Aprenda a usar emojis compostos, como os com tons de pele. Entenda as limitações.

Introdução

Emojis são pequenos ícones que podem ser inseridos no texto e são padronizados pelo consórcio UNICODE.ORG e os padrões são adotados por diversos sistemas operacionais, navegadores, aplicativos de e-mail, editores de textos, aplicativos de mensagens e muitos mais.

Existem vantagens e desvantagens de se usar emojis nas postagens no HyperFluxCMS.

Vantagens:

• Você não precisa criar e subir imagens;
• Emojis podem ser inseridos no meio do texto de forma mais fluida do que imagens;
• Emojis normalmente são automaticamente ajustados em tamanho proporcional ao tamanho do texto em que ele está inserido;
• O navegador do visitante não precisa baixar imagens para os ícones;
• Por serem padronizados, a maior parte dos visitantes já está acostumado com os ícones e seus significados.

Desvantagens

• Sua postagem está limitada ao emojis padronizados;
• Emojis não são "GIFs" animados, são estáticos e sem movimento;
• Nem todos os navegadores e fontes suportam todos os emojis; alguns emojis podem não aparecer ou aparecer de forma diferente da esperada;
• A aparência dos emojis pode variar ligeiramente dependendo do navegador e do sistema operacional. Por exemplo, o emoji de coração vermelho será sempre um coração vermelho, mas será ligeiramente diferente no Windows com Chrome, no Android, num iPhone com Safari, etc.

Se você pesar os prós e os contras de usar emojis e decidir usá-los, siga as instruções abaixos para entender como usá-los.

Como usar

Emojis são mapeados como caracteres Unicode.

Para inserir um emoji na sua postagem, você deve seguir exatamente os mesmos passos de inserir Caracteres Especiais ASCII e Unicode.

Da mesma forma, você pode usar os códigos decimais ou hexadecimais dos emojis.

Por exemplo, para se ter o emoji de "rolando de rir", oficialmente "rolling on the floor laughing", cujo código Unicode é "U+1F923", se usa @x:1F923, o que aparece no navegador assim => 🤣.

Já para inserir o "coração laranja" simples, "orange heart", cujo código unicode é U+1F9E1 , se usa @x:1F9E1, o que resulta em => 🧡

O tamanho do emoji é proporcional ao tamanho atual da fonte. Se você quiser um emoji de outro tamanho, deve alterar o tamanho da fonte antes, através de HTML, style ou das tags xsmall, small, medium, large ou xlarge.

[xlarge]@x:1F601[/] produz isso: 😁

Emojis Compostos/Modificadores

Alguns emojis são compostos de mais de um caracter Unicode.

Um exemplo é o de bandeiras. Por exemplo, a bandeira do Brasil é formada pela conjunção de dois caracteres unicode (U+1F1E7 e U+1F1F7), que devem ser inseridos logo em sequência, sem nenhum outro caracter entre eles, nem mesmo espaço em branco.

Como mostrado em Caracteres Especiais ASCII e Unicode, pode-se informar uma sequencia de caracteres unicode usando uma única marcação @x:. No caso da Bandeira do Brasil, seria então @x:1F1E7+1F1F7, o que deveria exibir a bandeira desejada.

Como já foi dito, nem todos os navegadores, fontes e sistemas operacionais suportam todo o conjunto de emojis. Eles são ainda mais limitados quando se trata de emojis compostos.

É bastante provável que a combinação acima, em vez de mostrar a bandeira do Brasil, mostre apenas a sigla "BR". É o que acontece, por exemplo, no Google Chrome no Windows 10.

Esse é um comportamento comum e não há maneira simples de contornar isso. Com o tempo, conforme os sistemas operacionais e navegadores vão se atualizando, a tendência é que mais e mais emojis sejam suportados e exibidos corretamente.

Uma maneira de aumentar a chance de que o emoji renderize corretamente é forçar o trecho que o usa a usar uma fonte específica, como a Segoe UI Emoji. Mas isso requer algum conhecimento de HTML e CSS e pode tornar o acesso à sua página um pouco mais lento. O mais recomendável é se ater aos emojis mais comuns e populares. Existem mais de mil deles, e provavelmente você conseguirá se expressar bem com os emojis originais.

Bandeiras são um exemplo de emoji com 2 caracteres. Existem vários outros emojis compostos. Alguns podem usar 2, 3, 5, 7 caracteres unicode, para obter emojis muito específicos, como "mulher em cadeira de rodas, tom de pele médio, virada para a direita".
Ou ainda "aperto de mão, a mão da direita com tom de pele claro e a mão da esquerda com tom de pele médio-escuro".

Quanto mais específico o emoji, maior a chance de que ele não seja renderizado corretamente.

Modificadores de Tons de Pele

Uma característica dos Emojis é que eles foram projetados para representar faces, gestos, profissões, corpos expressões humanas em diversos tons de pele.

Por padrão, emojis como sorrisos, risadas, rostos, corpos humanos, mãos, gestos, profissões, etc. usam cores neutras. Tipicamente um tom entre amarelo e alaranjado, mas o padrão unicode permite outras cores neutras, como cinza.

No entanto, o padrão permite - MAS NÃO OBRIGA - que navegadores, editores de texto, aplicativos de mensagens, etc, tenham o suporte a tons de pele.

São cinco tons de pele:

• Claro
• Médio-claro
• Médio
• Médio-escuro
• Escuro

Os tons de pele podem ser usados como símbolos separados.

Para especificar o tom de pele em um emoji, utiliza-se o caracter (ou a sequência de caracteres) que representa o emoji e logo em seguida - sem nenhum caractere, espaço nem separador - um MODIFICADOR do emoji, que representa um dos cinco tons de pele.

Por exemplo, o emoji "polegar para cima" ou "thumbs up" (código Unicode U+1F44D) com cor neutra é representado por @x:1F44D. Para usar o tom de pele clara, deve-se concatenar o código U+1F44D e o código de cor clara U+1F3FB. Para usar o tom de pele médio-escuro, usa-se o código U+1F44D e logo em seguida U+1F3FE.

Se o navegador suportar unicodes com tons de pele para aquele emoji específico, ele será exibido com a cor desejada. Se não suportar, ele será exibido na cor neutra e logo depois o ícone com a cor desejada, o que também permite ao leitor entender que o objetivo do autor da postagem era especificar a cor.

No HyperFluxCMS, isso é feito concatenando caracteres Unicode da mesma forma que outros caracteres Unicode e emojis. Voltando ao exemplo de emoji de "thumbs up" com tom de pele claro e depois médio-escuro, deve-se usar @x:1F44D+1F3FB , que se for suportado no navegador, aparece como 👍🏻. Se o navegador não suportar esse emoji com tons de pele, ele mostrará 👍 🏻 .

Para o mesmo emoji com tom de pelo médio-escuro, usa-se @x:1F44D+1F3FE , que se for suportado no navegador, aparece como 👍🏾. Se o navegador não suportar esse emoji com tons de pele, ele mostrará 👍 🏾 .

Outros Modificadores

Além da cor da pele, existem outras combinações de modificadores que podem produzir emojis especializados.

Por exemplo, o emoji de "pessoa andando" ou "person walking", que por padrão está virado para a esquerda, se for concatenado com o caractere U+27A1, que representa "seta para a direita" ou "right arrow" modifica o emoji para que a pessoa andando esteja virada para a direita, se o navegador suportar o emoji. Se não suportar, ele exibirá o emoji padrão de pessoa andando virada para a esquerda seguida da seta para a direita.

Limitações

Como já foi explicado, emojis dependem do navegador e do sistema operacional para serem renderizados corretamente.

Emojis são renderizados com pequenas diferenças entre um sistema operacional e outro, entre um navegador e outro. Um emoji de "pinguim", por exemplo, será sempre um pinguim, mas dependendo do navegador pode ser um pinguim preto ou azul, vestindo uma touquinha ou não, etc.

Quanto mais especializado o emoji, como por exemplo, os de profissões, os com tons de pele, etc. maior a chance de ele não ser suportado em todos os navegadores.

Essas modificaçãoes e combinações de caracteres Unicode para criar emojis especializados NÃO É uma particularidade do HyperFluxCMS. É um padrão determinado pelo Consórcio Unicode e implementado pelos navegadores. O HyperFluxCMS apenas oferece, através da sequência @x: um meio de introduzir esses caracteres e sequências de caracteres. A escolha e uso fica por conta do autor das postagens. A correta apresentação deles fica por conta do navegador utilizado pelos visitantes do site.

O assunto é extenso demais para ser explicado em detalhes aqui, e não é nosso objetivo. O objetivo deste artigo é apenas apresentar uma breve introdução ao tema. Para quem quiser se aprofundar no assunto, existe ampla documentação disponível em outros sites na internet. Sites de Inteligência Artificial como DeepSeek ou ChatGPT podem ajudar a solucionar dúvidas que ainda restarem.

A lista completa e sempre atualizada de emojis pode ser encontrada diretamente no site do Consorcio Unicode, em
https://unicode.org/emoji/charts/full-emoji-list.html.

A lista completa de emojis com modificadores pode ser encontrada diretamente no site do Consorcio Unicode, em
https://unicode.org/emoji/charts/full-emoji-modifiers.html.