Emoji con alineación inferior que se vuelven demasiado bajos al reducir su tamaño

Antecedentes: después de un cambio reciente, el tamaño de la imagen del emoji cambió de 20px a 1em (es decir, 16px en el tema que uso y que meta.discourse usa por defecto).

Desde este cambio en 2023, la visualización de las imágenes de emojis se ha alineado con la parte inferior del texto. La combinación de estos dos factores hace que los emojis aparezcan más bajos que el texto circundante desde la perspectiva de un usuario CJK. Creo que los usuarios de culturas no CJK probablemente percibirían la ubicación de los emojis de manera similar y también les parecería extraño.

La siguiente figura muestra una comparación del efecto de visualización de texto y emojis mezclados. El tamaño de la fuente y el ancho/alto del emoji están configurados en 16px. La única diferencia CSS entre la parte superior/inferior es la vertical-align de los emojis: la superior es text-bottom (configuración actual de Discourse) y la inferior es baseline (mi cambio propuesto).

bbcode del texto de prueba

Nulla malesuada porttitor diam. :star:
Nam ipsum ligula :partying_face:
Integer non enim. :racing_car:
你好 :waving_hand: 世界 :globe_with_meridians:
Hello :waving_hand: world :globe_with_meridians:

Creo que la parte inferior se ve mucho mejor. ¿Por qué Discourse eligió vertical-align: text-bottom? ¿Está bien cambiar a baseline por ahora (después de la solicitud de extracción #34494)?

1 me gusta

@chapoi Lamento molestarte. Como tú redactaste las dos PR, me interesaría conocer tu perspectiva sobre esto :folded_hands:

Hola @littleD

Seré sincero, la alineación de los emojis es la perdición de mi existencia. Parece imposible hacerlo bien en todos los escenarios.

Por ejemplo, tu texto se ve mucho mejor en mi instancia

El coche de carreras es un emoji infamemente “mal alineado”.

La alineación visual también diferirá si la palabra contiene descendentes o solo ascendentes. Observa:

El de arriba se siente más equilibrado debido a la presencia de las letras j, g, y.

Si cambiara esto a línea base, obtendría:

Lo cual es peor.

No me queda claro por qué tus ejemplos están tan bajos en comparación con lo que obtengo.

Así que, desafortunadamente, espero que entiendas por qué no cambiaré esta propiedad globalmente.

Te recomendaría añadir lo que mejor te funcione vertical-align: text-bottom al CSS personalizado de tu foro.

2 Me gusta