Emoji sob o capô

Nas últimas semanas, Nikita Prokopov implementou suporte a emoji para Skija . Ele decidiu compartilhar alguns pequenos detalhes de como essa "maior inovação na comunicação humana desde a invenção da carta " funciona nos bastidores.



Nota do tradutor: Habr não suporta emoji, então eu tive que sair e substituir o emoji por imagens.

Unicode

Cada personagem em um computador é codificado com um número. A codificação mais popular é Unicode e as duas subvariantes mais comuns são UTF-8 e UTF-16.



O Unicode aloca 2 ²¹ (2 milhões) de caracteres chamados "pontos de código". Destes dois milhões, apenas ~ 150k caracteres estão atualmente definidos. Todas as línguas, mortas e vivas, e outras decorações foram amontoadas nesses 150.000 símbolos. Você pode usar fontes diferentes para trás escrever e de cabeça para baixo: assim como a exibição de «GHz» como um único glifo: .



Dirigida para a seta de duas pontas direita com penas e duas linhas verticais: ou Semiglazov Monstro: . E o pato:







Preste atenção ao bloco com hieróglifos egípcios (U + 13000 - U + 1342F), há muitas coisas interessantes:

Emoji básico

Emoji são apenas caracteres Unicode, que estão localizados aqui U + 1F300-1F6FF e aqui U + 1F900-1FAFF:







Emoji se comportam como letras comuns, você pode fazer todas as operações com eles, como com letras ( aproximadamente traduzido: mas não em Habré! ). Quando você digita “A”, o computador vê U + 0041. Quando você digita, o computador vê U + 1F335.

Emoji são fontes

Por que eles são exibidos como imagens? Fontes de bitmap. Você pode criar um PNG engraçado para glifos em vez de vetores chatos em preto e branco.







Cada sistema operacional vem com uma fonte emoji pré-instalada. No macOS / iOS, este é o Apple Color Emoji. Windows - Segoe UI Emoji, Android - Noto Color Emoji.



Emojis, como fontes, têm uma aparência diferente em dispositivos diferentes. Alguns aplicativos têm seus próprios emojis: WhatsApp, Twitter, Facebook.

Fontes alternativas

Você escreve o texto em alguma fonte, como o emoji se encaixa aí? E por que o texto em russo parece pobre no Clubhouse ou no Medium?







Aqui você está digitando o caractere U + 1F419 e sua fonte é, por exemplo, San Francisco. Mas a fonte San Francisco não tem um glifo para U + 1F419, então seu sistema operacional começa a procurar por outra fonte que tenha esse glifo.



U + 1F419 está disponível apenas em Apple Color Emoji. Então você vê o seguinte: .

Qualquer que seja a fonte usada, os emojis têm a mesma aparência.

Seletor de variação-16

Alguns emojis se originaram na forma de ícones em 1993, nas seções Miscellaneous Symbols U + 2600-26FF ou Dingbats U + 2700-27FF:







Esses glifos são como letras, preto e branco. Muitas fontes têm suas próprias (U + 2702 TESOURA PRETA):







Apple Color Emoji tem sua própria versão:







Como o sistema operacional sabe o que exibir ou se eles têm o mesmo código U + 2702?



Conheça U + FE0F, também conhecido como SELETOR DE VARIAÇÃO-16. Esta é uma dica para o renderizador de texto alternar para emoji.







Simples, elegante e sem necessidade de destacar novos pontos de código. têm o mesmo significado , mas um estilo de imagem ligeiramente diferente.

Aglomerados de grafemas

Aqui nos deparamos com outro problema - nossos emojis agora não são um ponto de código, mas dois. Isso significa que precisamos definir os limites do símbolo.



Um aglomerado de grafemas nos ajudará. Um cluster de grafema é uma sequência de pontos de código que é vista como um único glifo legível por humanos.



Os clusters de grafemas foram inventados não apenas para emojis, mas também aplicáveis ​​a alfabetos regulares. É um único agrupamento de grafemas, mesmo que consista em dois pontos de código: U + 0055 MAIÚSCULAS U ​​seguido por U + 0308 DIAERESE COMBINADA.



Os clusters Grapheme apresentam muita complexidade para os programadores. Você não pode simplesmente fazer substring(0, 10)



para pegar os primeiros 10 caracteres - você pode dividir o emoji ao meio.



O reverso da linha deve ser feito de forma inteligente. U + 263A U + FE0F faz sentido, mas U + FE0F U + 263A não.







Finalmente, você não pode simplesmente invocar .length



string. Bem, você pode, mas o resultado vai te surpreender. Se você for um desenvolvedor, tente executar no console do seu navegador.



Dica para o programador: se você estiver trabalhando com texto, obtenha uma biblioteca focada em clusters de grafemas. Para C, C ++ e JVM pode ser ICU , Swift faz tudo certo por padrão, para os outros - faça você mesmo.







Essa coisa tem 65 de comprimento e não pode ser dividida. Viva com isso agora.

Modificador de tom de pele

A maioria dos emojis humanos representa uma pessoa amarela abstrata. Quando o tom de pele foi adicionado em 2015, em vez de adicionar um novo ponto de código para cada combinação de emoji e tom de pele, apenas cinco novos pontos de código foram adicionados: U + 1F3FB..U + 1F3FF



Eles não devem ser usados ​​sozinhos, mas devem ser adicionados a emoji existente ... Juntos, eles formam uma ligadura: se imprimirmos (U + 1F44B WAVING HAND SIGN) e depois (U + 1F3FD MODIFICADOR DE TOM DE PELE MÉDIO), veremos que



não tem seu próprio ponto de código (esta é uma sequência de dois: U + 1F44B U + 1F3FD), mas tem sua própria aparência e comportamento únicos. No total, com a ajuda de cinco modificadores, ~ 280 emojis humanos foram transformados em 1680 variações. Aqui estão alguns dançarinos:

Joiner de largura zero

Digamos que seu amigo acabou de enviar a você a foto de uma maçã que ela está cultivando em seu jardim. Você precisa responder - como? Você pode enviar WOMAN EMOJI (U + 1F469) com a almofada de arroz SHEAF OF RICE (U + 1F33E) anexada . No final, vai funcionar , mas se você bater U + 200D entre eles, você terá um fazendeiro:



U + 200D é chamado de Marceneiro de Largura Zero, ou ZWJ para abreviar. Funciona de forma semelhante ao que vimos com o tom de pele, mas desta vez você pode combinar dois emojis independentes em um. Nem todas as combinações funcionam, mas muitas funcionam, às vezes de maneiras surpreendentes!



Alguns exemplos:







Uma inconsistência estranha que notei é que a cor do cabelo é feita por meio do ZWJ, enquanto o tom da pele é apenas um modificador de emoji sem ZWJ. Por quê? Eu não faço ideia.







Infelizmente, alguns emojis não são implementados como combinações com ZWJ. Eu considero esta uma oportunidade perdida:







Como imprimir ZWJ? Sem chance. Mas você pode copiá-lo aqui: “”. Nota: este é um caractere especial, portanto, espere que ele se comporte de maneira estranha. Você não o vê, mas ele é. ( nota por: no artigo original existe, mas Habr não permite )



Outra grande área onde ZWJ está a cavalo é a configuração de famílias e relacionamentos. Aqui está uma pequena história para ilustrar:

Bandeiras

Sinalizadores de país são parte do padrão Unicode, mas por algum motivo não são implementados no Windows. Se você está lendo isso em um navegador Windows - desculpe!



Sinalizadores não têm pontos de código dedicados. Em vez disso, são ligaduras de duas letras.







Esquerda - Windows, direita - Mac



Verdade, eles não usam letras reais. Em vez disso, o alfabeto de “letra de símbolo indicador regional” (U + 1F1E6..1F1FF) é usado. Essas letras não são usadas para nada além de bandeiras de composição.



O que acontece se você colocar duas letras aleatórias juntas? Não muito: (exceto que a edição de texto começa a se comportar de maneira estranha).



Se você quiser experimentar, fique à vontade para copiar e combinar este alfabeto:



Existem 258 combinações válidas de duas letras. Você pode encontrar todos eles?



Um efeito colateral divertido da ligadura de duas letras:

Sequências de tags

Ligaduras de duas letras são legais, mas você não quer ser mais legal? Que tal ligaduras de 32 letras? Aqui estão as sequências de tags.



Uma sequência de tag é uma sequência de emoji regular, seguida por outro tipo de letras latinas (U + E0020..E007E), terminando com U + E007F CANCELAR TAG.



Atualmente, elas são usadas apenas para estas três bandeiras: Inglaterra, Escócia e País de Gales:

Keycaps

Não é superexcitante, mas é necessário para ser completo: as sequências de teclas usam outra convenção.



Ele se parece com isto: pegue um número * ou #, transforme-o em um emoji com U + FE0F, embrulhe-o em um quadrado com U + 20E3 COMBINANDO O KEYCAP DE ENCERRAMENTO







Existem 12 deles:

Atualizações Unicode

O Unicode é atualizado todos os anos e os emoji são uma parte essencial de cada lançamento. Por exemplo, em Unicode 13 (março de 2020) 55 novos emojis foram adicionados.



No momento em que este artigo foi escrito, nem o Mac OS (11.2.3) nem o iOS (14.4.1) suportavam emoji do tipo Unicode 13:



Aqui está o que vejo em março de 2021:



Mas graças à magia do ZWJ, ainda posso entender o que acontece não é da maneira mais ideal.

Conclusão

Para resumir, existem sete maneiras de codificar emoji:

1. Ponto de código único
2. Ponto de código único + seletor de variação-16
3. Modificador de tom de pele
4. Sequenciamento com junta de largura zero
5. Bandeiras
6. Sequência de tags
7. Sequência de tecla

Métodos de 1 a 4 podem ser combinados para construir uma postagem bastante complexa:







Se você for um programador, lembre-se de sempre usar a biblioteca ICU para:

• extração de substring
• medidas de comprimento de linha
• corda reversa

A palavra-chave googling é "Grapheme Cluster". Isso se aplica a emojis, diacríticos ocidentais, fontes induzidas e coreanas, portanto, tome cuidado.

---

• O primeiro sistema de controle serial da Rússia para um motor bicombustível com separação funcional de controladores
• Existem mais linhas de código em um carro moderno do que ...
• Cursos Online Grátis em Automotivo, Aeroespacial, Robótica e Engenharia (50+)
• McKinsey: repensando o software eletrônico e a arquitetura automotiva