Problema de emoji ao renderizar no webkit - Problema com a forma como o HTML é renderizado

Isso ocorre porque todos os emojis unicode padronizados são projetados para caber em um quadrado, e assumimos que os sites desejam que seus emojis tenham um tamanho consistente, de forma que funcionem ao lado de texto e outros emojis :teapot: se aquele bule fosse 50x50, ele criaria um grande espaço entre as linhas como este:

Há uma boa explicação de quando foi adicionado originalmente:

Com detalhes de apoio de Multimedia: Images - Learn web development | MDN

Quando os atributos width e height de uma imagem são incluídos em um elemento <img /> HTML, a proporção da imagem pode ser calculada pelo navegador antes que a imagem seja carregada. Essa proporção é usada para reservar o espaço necessário para exibir a imagem, reduzindo ou até mesmo prevenindo uma mudança de layout quando a imagem é baixada e exibida na tela. Reduzir a mudança de layout é um componente importante da boa experiência do usuário e do desempenho da web.

Enquanto as melhores práticas de desenvolvedor da última década podem ter recomendado omitir os atributos width e height de uma imagem em um elemento <img /> HTML, devido ao mapeamento de proporção, incluir esses dois atributos é considerado uma melhor prática de desenvolvedor.

Dito tudo isso, você tem um exemplo razoável de um caso em que o dimensionamento padrão não funcionará para todos os emojis… aquele antigo emoji de brinde é 3 vezes mais largo, então ele não se encaixa bem em um quadrado. Não é incomum que outros aplicativos limitem todos os emojis a quadrados, então não somos muito incomuns em nosso comportamento aqui (tanto Slack quanto Discord fazem isso, por exemplo)… mas alternativamente, poderíamos considerar permitir que emojis personalizados tenham dimensões opcionais definidas.

2 curtidas