The first emoji inside a title is not in the same "code" and is bigger

[Decrypt]

Hello, I’m trying to dev my own theme, and I saw that when you write multiple emoji in a title, the first one will be inside an < img > instead of being with the rest of the text. Here are some screenshots (after some styling applied so it looks like it has the same size, without it the first emoji is bigger) : (screenshot at the end, sorry new account only allowed for 1 pic)

You can check my theme code here : GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option.

So I thought it was because the first character of a title was made bigger like in books, but its not the case as you can see, I placed a dot before the 3 emojis, and the first emoji was still different, I tried multiple styling (rem, px, align) so it is the same size as the two others, but on the mobile app it is still visible : (screen at the end)

Do you have an idea on how to solve this so the first emoji of a title will be the same as the others, on both mobile and desktop.

Thank you.

[Canapin (Coin-coin le Canapin)]

@Decrypt

I saw that when you write multiple emoji in a title, the first one will be inside an < img > instead of being with the rest of the text.

Hi, Decrypt

Is that the case even in safe mode?

Because on my instance, here’s the HTML code of my title:

<a href="/t/test-notif/161" class="fancy-title">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji">
  <img width="20" height="20" src="/images/emoji/twitter/star.png?v=12" title="star" alt="star" class="emoji"> Test notif
</a>

[Decrypt]

Hey ! I just tried and yes, take a look :

(I checked every boxes when activating the safe mode)

[Canapin (Coin-coin le Canapin)]

I notice your first emoji is a custom emoji you added to your site (it has an emoji-custom class), the others being Unicode.

I’m not sure why the Unicode emojis aren’t converted to <img> tags though they are in my test instance. I tried several sets, including Apple/International.

Can you share all your emoji-related settings?

[anderer]

I want to jump in here as well - as something with the emojis is weird on my site as well which might be related

i discovered that the bellhop bell is not tranformed into an image - but it stays as it is? - this affects only the title and the menu list. in addition, the emoji limit is set to 1 - so the title should actually not have a second emoji.

apart from that it would be sweet - to have the standard set of emojis in the category title - see that the party popper is different in the category title than in the other parts

ohh, on the admin site - all emoji setting are default.

[Decrypt]

All the 3 emojis are the same, (from official ios/android list) I copy and paste the same character inside the title, and I even tried to copy the 3rd one, delete the others, paste it 2 times, and when I save the title it will still do this weird thing.

For the settings I don’t know what I can show you ? I do not have any “star” custom emote, only emotes I have are cryptocurrencies logo.

Here, I copied the raw title and I will paste it here : ⭐️⭐️⭐️ Une entité scrute la blockchain de Bitcoin?

[Canapin (Coin-coin le Canapin)]

Which emoji set do you use?

@Decrypt

For the settings I don’t know what I can show you ?

I’m navigating blindy as I have no clue why you encounter this behavior, but try /admin/site_settings/category/all_results?filter=emoji?

@anderer

the emoji limit is set to 1 - so the title should actually not have a second emoji.

No, it shouldn’t… Did you create this topic’s title manually or another way?

[anderer]

@Canapin

No, it shouldn’t… Did you create this topic’s title manually or another way?

• in the admin panel the default is 1 emoji
• the title/post was created manually

[Canapin (Coin-coin le Canapin)]

When I try to repro:

Can you try to create a topic with more than 1 emoji on try.discourse.org?

[anderer]

here on meta its the same - the bellhop is not transformed

bell and boom are different - image and non-image

[Canapin (Coin-coin le Canapin)]

The emoji on the preview panel is from your content, not your title, and will be converted as a Discourse emoji once the post has been processed and posted. Until then, it is normal that it appears as Unicode, as you probably entered it with your OS emoji selector.

[anderer]

@Canapin

The emoji on the preview panel is from your content,

yes, but the sidebar emoji is already there and “wrong”
and see above the example from try.discourse

[Canapin (Coin-coin le Canapin)]

Can you describe your steps, or better, record a video on how you put more than 1 emoji in a title?

[Canapin (Coin-coin le Canapin)]

@Decrypt, I think you should be able to have img for each one of your titles emojis by raising the max emojis in title setting value and then be able to customize them as you want with CSS.

[anderer]

[Decrypt]

Ok thank you, here is a screenshot of the settings :

[Canapin (Coin-coin le Canapin)]

Did you already have 10 max emojis in title prior to your topic, or did you just raise it right now?

[Decrypt]

Yes, it was the settings by “default” when I created the topic.
Haven’t touch anything in the code/settings since my first post.

[Lilly]

i sort of reproduced this but the opposite (safari, iOS, desktop):

there’s no issue if you use the Discourse emoji set.

[Canapin (Coin-coin le Canapin)]

How do you write these emojis?

I write them as Unicode or :star: and it outputs , all of them being <img>.