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

Contribuir UX
6

Desde el lado de CSS, esto se implementa fácilmente:

img.emoji {
  width: auto; /* reemplazando width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

(Ver DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub para la explicación).

El trabajo más difícil está en la parte de “emoji personalizados” y la representación de emoji:

  • Los emoji personalizados necesitan un atributo adicional para cada emoji: aspect-ratio (o como alternativa height y width).
  • La representación de emoji debe usar el nuevo atributo aspect-ratio para que los emoji personalizados varíen el width en consecuencia – height se mantiene en 20px.

Enfoque rápido y fácil para emoji personalizados:
Para los emoji personalizados, las etiquetas img establecen solo height="20" y no establecen width en absoluto, desechando así el beneficio de establecer la relación de aspecto/ancho y alto.
CSS: img.emoji { width: auto; }

2 Me gusta