Usando emojis com alinhamento inferior, eles ficam muito baixos depois de diminuídos

[littleD]

Background: após uma alteração recente, o tamanho da imagem do emoji mudou de 20px para 1em (ou seja, 16px no tema que uso e que o meta.discourse usa por padrão).

UX: update emoji size

Desde esta alteração em 2023, a exibição de imagens de emoji foi alinhada com a parte inferior do texto. A combinação desses dois fatores faz com que os emojis apareçam mais abaixo do que o texto circundante, na perspectiva de um usuário CJK. Acredito que usuários de culturas não-CJK provavelmente perceberiam o posicionamento do emoji de forma semelhante e também o achariam estranho.

A figura a seguir mostra uma comparação do efeito de exibição de um texto e emoji misturados. O tamanho da fonte e a largura/altura do emoji estão definidos em 16px. A única diferença de CSS entre as partes superior/inferior é o vertical-align dos emojis: a superior é text-bottom (configuração atual do Discourse), e a inferior é baseline (minha alteração proposta).

bbcode do texto de teste

Nulla malesuada porttitor diam.
Nam ipsum ligula
Integer non enim.
你好 世界
Hello world

Acho que a parte inferior parece muito melhor. Por que o Discourse escolheu vertical-align: text-bottom? Tudo bem mudar para baseline por enquanto (após o pull request #34494)?

[littleD]

@chapoi Desculpe incomodar. Como você foi o autor das duas PRs, eu gostaria de ter sua perspectiva sobre isso

[chapoi]

Olá @littleD

Serei honesto, o alinhamento de emojis é a ruína da minha existência. Parece impossível acertar em todos os cenários.

Por exemplo, seu texto parece muito melhor na minha instância

O carro de corrida é um emoji notoriamente “mal posicionado”.

O alinhamento visual também diferirá se a palavra contiver descendentes ou apenas ascendentes. Observe:

O de cima parece mais equilibrado devido à presença das letras j, g, y.

Se eu mudasse isso para a linha de base, obteria:

O que é pior.

Não está claro para mim por que seus exemplos estão tão mais baixos do que o que eu obtenho.

Portanto, infelizmente, espero que você entenda por que não alterarei essa propriedade globalmente.

Eu recomendaria adicionar o que funciona melhor para você vertical-align: text-bottom ao CSS personalizado do seu fórum.