使用底部对齐的emoji，在变小后变得过于靠下

[littleD]

Background: after recent change, emoji image size changed from 20px to 1em (i.e. 16px in the theme I use and meta.discourse use by default).

UX: update emoji size

Since this change in 2023, the display of emoji images has been aligned with the bottom of the text. The combination of these two factors makes emojis appear lower than surrounding text from the perspective of a CJK user. I believe that users from non-CJK cultures would likely perceive the emoji placement similarly and also find it weird.

The following figure shows a comparison of the display effect of a text and emoji mixed together. The font size and the width/height of the emoji are all set to 16px. The only CSS difference between upper/lower parts is the vertical-align of emojis: the upper is text-bottom (current Discourse setting), and lower is baseline (my proposed change).

bbcode of the testing text

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

I think the lower part looks much better. Why did Discourse choose vertical-align: text-bottom? Is it ok to change to baseline for now (after the #34494 pull request)?

[littleD]

@chapoi Sorry to bother you. Since you authored the two PRs, I’d be interested to get your ​perspective​ on this

[chapoi]

Hello @littleD

I’ll be honest, emoji alignment is the bane of my existence. It seems impossible to get right in every scenario.

For example, your blurb looks much better on my instance

The racecar is an infamously “low placed” emoji though.

The visual alignment will also differ whether the word contains descenders, or only ascenders. Observe:

The top one feels more balanced due to the presence of the letters j,g,y.

Where I to change this to baseline, I would get:

Which is worse.

It’s unclear to me why your examples are so much lower than I what I get.

So unfortunately, I hope you understand why I won’t be changing this property globally.

I would recommend to add what works best for you vertical-align: text-bottom to the custom CSS of your forum.