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

Das liegt daran, dass alle standardisierten Unicode-Emojis in ein Quadrat passen sollen, und wir gehen davon aus, dass Websites möchten, dass ihre Emojis konsistent in einer Weise skaliert werden, die neben Text und anderen Emojis funktioniert :teapot: wenn dieser Teekessel 50x50 wäre, würde er eine riesige Lücke zwischen den Zeilen hinterlassen, wie diese:

Es gibt eine gute Erklärung von der Zeit, als es ursprünglich hinzugefügt wurde:

Mit unterstützenden Details von Multimedia: Images - Learn web development | MDN

Wenn die Attribute width und height eines Bildes in einem HTML-Element <img> enthalten sind, kann das Seitenverhältnis des Bildes vom Browser berechnet werden, bevor das Bild geladen wird. Dieses Seitenverhältnis wird verwendet, um den benötigten Platz für die Anzeige des Bildes zu reservieren, wodurch eine Layoutverschiebung reduziert oder sogar verhindert wird, wenn das Bild heruntergeladen und auf dem Bildschirm angezeigt wird. Die Reduzierung von Layoutverschiebungen ist eine wichtige Komponente für eine gute Benutzererfahrung und Web-Performance.

Während Best Practices für Entwickler aus dem letzten Jahrzehnt möglicherweise empfohlen haben, die Attribute width und height eines Bildes in einem HTML-Element <img> wegzulassen, gelten diese beiden Attribute aufgrund der Seitenverhältniszuordnung als Best Practice für Entwickler.

All das gesagt, Sie haben ein vernünftiges Beispiel für einen Fall, in dem die Standardgröße nicht für alle Emojis funktioniert … dieses alte Cheers-Emoji ist 3x so breit, also passt es nicht gut in ein Quadrat. Es ist nicht ungewöhnlich, dass andere Apps alle Emojis auf Quadrate beschränken, also sind wir mit unserem Verhalten hier nicht zu ungewöhnlich (sowohl Slack als auch Discord tun dies zum Beispiel) … aber alternativ könnten wir in Betracht ziehen, benutzerdefinierten Emojis optional Dimensionen zuzuweisen.

2 „Gefällt mir“