Emoji mit unterer Ausrichtung werden nach dem Verkleinern zu weit nach unten verschoben

[littleD]

Hintergrund: Nach einer kürzlichen Änderung hat sich die Größe von Emoji-Bildern von 20px auf 1em geändert (d. h. 16px in meinem verwendeten Theme und dem Standard-Theme von meta.discourse).

UX: update emoji size

Seit dieser Änderung im Jahr 2023 wird die Anzeige von Emoji-Bildern am unteren Rand des Textes ausgerichtet. Die Kombination dieser beiden Faktoren lässt Emojis aus der Sicht eines CJK-Benutzers tiefer erscheinen als der umgebende Text. Ich glaube, dass Benutzer aus nicht-CJK-Kulturen die Platzierung von Emojis ähnlich wahrnehmen und sie ebenfalls seltsam finden würden.

Die folgende Abbildung zeigt einen Vergleich der Anzeigewirkung von Text und Emojis, die gemischt sind. Die Schriftgröße und die Breite/Höhe des Emojis sind alle auf 16px eingestellt. Der einzige CSS-Unterschied zwischen dem oberen und unteren Teil ist die vertical-align von Emojis: oben ist text-bottom (aktuelle Discourse-Einstellung) und unten ist baseline (mein vorgeschlagener Änderung).

bbcode des Testtextes

Nulla malesuada porttitor diam.
Nam ipsum ligula
Integer non enim.
你好 世界
Hello world

Ich denke, der untere Teil sieht viel besser aus. Warum hat Discourse vertical-align: text-bottom gewählt? Ist es in Ordnung, dies (nach dem Pull Request #34494) auf baseline zu ändern?

[littleD]

@chapoi Entschuldige die Störung. Da du die beiden PRs verfasst hast, würde mich deine Perspektive dazu interessieren

[chapoi]

Hallo @littleD

Ich werde ehrlich sein, die Ausrichtung von Emojis ist der Fluch meines Daseins. Es scheint unmöglich, sie in jedem Szenario richtig hinzubekommen.

Zum Beispiel sieht dein Text auf meiner Instanz viel besser aus:

Das Rennauto ist jedoch ein berüchtigt “tief platziertes” Emoji.

Die visuelle Ausrichtung unterscheidet sich auch, je nachdem, ob das Wort Unterlängen oder nur Oberlängen enthält. Beobachte:

Das obere fühlt sich ausgewogener an, da die Buchstaben j, g, y vorhanden sind.

Wenn ich dies auf die Grundlinie ändern würde, würde ich Folgendes erhalten:

Was schlechter ist.

Es ist mir unklar, warum deine Beispiele so viel niedriger sind als das, was ich bekomme.

Daher werde ich diese Eigenschaft leider nicht global ändern, ich hoffe, du verstehst das.

Ich würde empfehlen, vertical-align: text-bottom zu deinem Forum-CSS hinzuzufügen, was für dich am besten funktioniert.