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

**URL:** <https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850>\
**Category:** UX\
**Created:** [12. März 2023 um 12:40 UTC](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850 "2023-03-12T12:40:48Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![rrit](https://avatars.discourse-cdn.com/v4/letter/r/b5ac83/32.png) [@rrit](https://meta.discourse.org/u/rrit)\
**Post date:** [14. März 2023 um 14:48 UTC](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850/6 "2023-03-14T14:48:07Z")

</div>

> [@awesomerobot](#):
>
> […] die Standardgröße funktioniert nicht für alle Emojis… dieses alte Cheers-Emoji ist 3x so breit, daher passt es nicht gut in ein Quadrat.  
> […] wir könnten erwägen, benutzerdefinierten Emojis optional Dimensionen zu geben.

Von der CSS-Seite ist dies leicht zu implementieren:

```css
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](https://github.com/discourse/discourse/pull/15830#issuecomment-1031587082) 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; }`

---

_[View the full topic](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850)._