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).
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)?