Problema de emoji al renderizar en webkit - Problema con la forma en que se renderiza el HTML

[awesomerobot (Kris)]

@Crius

¿Por qué Discourse asume que todos los emojis serán “20x20”?

Esto se debe a que todos los emojis estandarizados de Unicode están diseñados para caber en un cuadrado, y asumimos que los sitios querrán que sus emojis tengan un tamaño uniforme de una manera que funcione junto con el texto y otros emojis si esa tetera fuera de 50x50, crearía un gran espacio entre líneas como este:

@Crius

¿lo impone mediante un atributo HTML en lugar de usar CSS?

Hay una buena explicación de cuándo se agregó originalmente:

Add lazy loading for emojis

Personally I think it is like a good manner to always add width and height attributes to img elements on point where the img-element is generated. That is the place where I might know for sure which exact image-file I’m putting in. CSS is far away from the actual image-file. On top the browsers use this extra info about the image size to calculate aspect-ratio before loading the image file - and before CSS parsing. For this case the emojis are used in many different places - and sometimes def…

Con detalles de apoyo de Multimedia: Images - Learn web development | MDN

Cuando se incluyen los atributos width y height de una imagen en un elemento <img HTML, el navegador puede calcular la relación de aspecto de la imagen antes de que se cargue. Esta relación de aspecto se utiliza para reservar el espacio necesario para mostrar la imagen, reduciendo o incluso previniendo un cambio de diseño cuando la imagen se descarga y se muestra en la pantalla. Reducir el cambio de diseño es un componente importante de una buena experiencia de usuario y rendimiento web.

…

…

Si bien las mejores prácticas de los desarrolladores de la última década pueden haber recomendado omitir los atributos width y height de una imagen en un elemento <img HTML, debido al mapeo de la relación de aspecto, incluir estos dos atributos se considera una mejor práctica para los desarrolladores.

Dicho todo esto, tienes un ejemplo razonable de un caso en el que el tamaño predeterminado no funcionará para todos los emojis… ese viejo emoji de brindis es 3 veces más ancho, por lo que no encaja bien en un cuadrado. No es inusual que otras aplicaciones limiten todos los emojis a cuadrados, por lo que no somos demasiado inusuales en nuestro comportamiento aquí (tanto Slack como Discord lo hacen, por ejemplo)… pero alternativamente, podríamos considerar permitir que los emojis personalizados tengan dimensiones opcionalmente establecidas.