Ajuste de altura de línea Emoji - Comentarios

Experimento Pausado :pause_button:

Este tema está dedicado a recopilar comentarios, centrándose principalmente en cualquier problema relacionado con la experiencia del usuario (UX), para el experimento en curso en el que los emojis ya no afectan la ‘altura de línea’ y también respetan la configuración de tamaño de texto del usuario en las publicaciones del tema, mensajes y chat.
Por ejemplo, puedes encontrar un ejemplo aquí… :slight_smile:

Sin el experimento en el tamaño de texto de usuario más pequeño (la diferencia más drástica):

^ Parece que hay un salto de línea antes de “Por ejemplo”, mientras que no lo hay.

¿Por qué es un experimento y no simplemente una corrección de errores?

Podría serlo, pero potencialmente existen problemas ocultos en diferentes dispositivos, navegadores y sistemas operativos. Safari, por ejemplo, renderiza la propiedad de estilo de transform: scale(x) como borrosa dadas combinaciones particulares de dígitos y font-size, siendo la alternativa webkit grow; pero esta propiedad agrega un espacio marginal a la altura de línea, a diferencia de la propiedad más ampliamente adoptada. Este tema existe para lanzar una red que capture cualquier error, antes de adoptar el soporte.

3 Me gusta

¡Genial! :slight_smile: Los detalles marcan la diferencia.

He realizado algunas pruebas en diferentes plataformas y navegadores; ¡hasta ahora todo va bien!

¿Qué tal aplicar una lógica similar al emoji en el título?
Puedo ver a los administradores personalizando su tema y aumentando el tamaño de la fuente.

Ejemplo

chrome_1xAGEUEi88
chrome_GmCmJoVJ6c

1 me gusta

Esto se siente relacionado @tynaut

image

¿El estilo del estado del usuario se vio afectado por esto?

2 Me gusta

Confirmado. Esto se solucionó específicamente con el chat.

Pero para las publicaciones/mensajes, buscaré una solución para ese selector. Debe ser lo suficientemente ancho como para capturar emojis en <li></li> dinámicos (como ejemplo) o cualquier marca, pero específicamente no ciertas cosas.

3 Me gusta

Este experimento se ha pausado/deshabilitado 2024-01-02T06:00:00Z hasta nuevo aviso, para diagnosticar problemas de renderizado con Safari relacionados con la propiedad transform: scale(x); los emojis pueden aparecer borrosos en casos aleatorios, donde pueden renderizarse nítidos en una publicación, la siguiente puede aparecer borrosa sin un patrón reproducible.

En general, el renderizado se tuvo en cuenta con Safari, pero como esta inconsistencia es más difícil de solucionar, este experimento necesitará una solución más consistente para poder implementarlo y seguir admitiendo la versión de webkit de Safari. Me inclino a reimplementar la propiedad alternativa grow de webkit específicamente para Safari. Aunque esto consume una parte del line-height, se puede mitigar.

3 Me gusta