Emoji-Problem bei der Darstellung auf Webkit - Problem mit der Darstellung von HTML

Beitragen UX
6

Von der CSS-Seite ist dies leicht zu implementieren:

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

(Siehe DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub für die Erklärung.)

Die schwierigere Arbeit liegt im Teil „benutzerdefinierte Emojis“ und im Rendern von Emojis:

  • Benutzerdefinierte Emojis benötigen ein zusätzliches Attribut für jedes Emoji: aspect-ratio (oder alternativ height und width).
  • Das Rendern von Emojis muss das neue Attribut aspect-ratio verwenden, damit benutzerdefinierte Emojis die width entsprechend variieren können – height bleibt bei 20px.

Schneller und einfacher Ansatz für benutzerdefinierte Emojis:
Setzen Sie für benutzerdefinierte Emojis img-Tags nur height="20" und setzen Sie width überhaupt nicht – verzichten Sie damit auf den Vorteil, aspect-ratio/width und height festzulegen.
CSS: img.emoji { width: auto; }

2 „Gefällt mir“