# Emoji with bottom alignment that are too low when scaled down

**URL:** https://meta.discourse.org/t/emoji/386086
**Category:** UX
**Tags:** emoji
**Created:** [October 18, 2025, 4:56pm UTC](https://meta.discourse.org/t/emoji/386086 "2025-10-18T16:56:33Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![littleD](https://avatars.discourse-cdn.com/v4/letter/l/7bcc69/32.png) [@littleD](https://meta.discourse.org/u/littleD)
#### Post date: [October 18, 2025, 4:56pm UTC](https://meta.discourse.org/t/emoji/386086/1 "2025-10-18T16:56:34Z")

</div>

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

[https://github.com/discourse/discourse/pull/34494](https://github.com/discourse/discourse/pull/34494)

Since [this change](https://github.com/discourse/discourse/pull/19815) 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).

 ![emoji vertical-align test](https://global.discourse-cdn.com/meta/original/4X/3/5/0/350b52aa9c163d1ca1ab47faf7ea919cae2edba9.png)

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

---

<div class="post-metadata">

### Author: ![littleD](https://avatars.discourse-cdn.com/v4/letter/l/7bcc69/32.png) [@littleD](https://meta.discourse.org/u/littleD)
#### Post date: [October 18, 2025, 5:07pm UTC](https://meta.discourse.org/t/emoji/386086/2 "2025-10-18T17:07:51Z")

</div>

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

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [October 21, 2025, 1:58am UTC](https://meta.discourse.org/t/emoji/386086/3 "2025-10-21T01:58:16Z")

</div>

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

 ![CleanShot 2025-10-20 at 19.53.57@2x](https://global.discourse-cdn.com/meta/original/4X/c/c/b/ccb80a0c131865c3d55f17ab34c505d4543e7a5c.png)

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

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

 ![CleanShot 2025-10-20 at 19.55.42@2x](https://global.discourse-cdn.com/meta/original/4X/7/e/b/7eb57f3b1d8e42fc5a79ecc1cfa23553073d8baf.png)

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:

 ![CleanShot 2025-10-20 at 19.56.30@2x](https://global.discourse-cdn.com/meta/original/4X/2/f/b/2fbc2ff58da1018a017a348b4b6c114c27fdf420.png)

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.