Emoji in Title is not normalized 🐼 🐼

(David Taylor) #1

We’ve started using emojis in topic titles a fair amount on our forum, and have run into issues with cross-browser consistency. The emojis in the topic title don’t get converted to their discourse equivalent. The same issue also occurs when the topic title is displayed in “latest” or other lists.

Original report

For example, if I use the unicode emoji (“woman student”): :woman_student: in the post body, it gets turned into two different Discourse emoji. This is fine, not ideal, but at least it’s consistent across browsers.

However, if I put the same unicode emoji in the topic title (see the title of this topic), it doesn’t get converted to the discourse equivalent, which means appearance varies massively between browsers/OS.

The same issue also occurs when the topic title is displayed in “latest” or other lists.

To illustrate fully:

EDIT: a better example:

Summary Email feedback
Title emojis don't work when quoting another topic
(Will) #2

To add to this on Chrome/Ubuntu16.04 the title of this post looks like the following. This is my emojii system font.

It seems that emojii one isn’t running properly on titles.

(Jeff Atwood) #3

This requires a much more recent version of Unicode Emoji than we support. The whole concept of “combine Unicode characters to get different Emoji” is fairly new; you may want to look up the history there.

In general I would avoid using Unicode combined character emoji at the moment.

(David Taylor) #4

Sorry, I’ve confused this issue by using a new emoji as an example.

This is a better example:
(Chrome, Mac):

(Chrome, Ubuntu):

In the post, the unicode character got converted to a PNG. In the title, it’s left as a raw unicode character.

(David Taylor) #5

I’ve just noticed that the same thing happens in the “preview” pane of the composer. So it would seem that the javascript emoji ‘unescaper’ doesn’t recognise unicode emojis at all. (Titles & previews are parsed client-side, baked posts are parsed server-side… I think)

There’s even a comment about it in the source:


Unicode emoji are not normalised in preview pane
(Sam Saffron) #6

also an issue here:

(Jeff Atwood) #8

This is very much by design not a bug, unassigning this work not sure what you are doing here @sam.

My earlier comments were about combined Unicode emoji like skin tone and what not, we will get to that but no plans to convert Unicode emoji to PNG images in topic titles that is madness.

(David Taylor) #9

But then why convert unicode emojis to PNG images in post content? (as happens currently)

Surely whichever approach is chosen should be consistent across the application?

(Jeff Atwood) #10

No, titles are used a bunch of places like email. We are not converting Unicode chars to PNGs for email titles. This makes zero sense.

Bodies are different. You can already have small images inline in bodies.

(David Taylor) #11

Ah I see, that makes sense.

In that case, maybe the normalisation should go the other way for titles - at the moment if I put :panda_face: in the title of a topic (see this topic), it gets converted into a PNG.

However, as you pointed out, that breaks down in emails, notifications and the <title> tag of the page. So maybe :panda_face should be converted into its unicode equivalent for titles?

Then again, that sounds like a lot of work for not a lot of gain :wink: #bikeshedding

(Jeff Atwood) #12

Yes, we should stick to Unicode in titles for the reasons stated. So the normalization is to convert :tada: to its Unicode equivalent in titles.

Cc @techapj

(Sam Saffron) #13

This is a bug, we already have a “special” Unicoded title for topics that @techAPJ added for meta tags and other spots. what we are missing is normalization, I know this cause I know exactly how title code works and where the normalization fits, will assign to myself and sort this out

(Jeff Atwood) #15

Fine but we are in agreement, emoji should go Unicode in title it is way more consistent and easier to deal with than embedding PNGs in a string. This also helps email titles, browser page titles, etc.

We expect PNGs in post bodies, not so much in post titles…

(Sam Saffron) #16

Absolutely in meta tags and push notifications etc. it is normalized to Unicode

In the web ui normalized to png, we already have 3 forms for the title (raw,Unicode,prettified) just need to clean up the forms

(Sam Saffron) #17

Title is now normalized… so yay!

I still need to sort out notifications not using pretty title which is a long standing bug… will fix as well prior to closing this.

(Sam Saffron) #18

2 more spots, I think we are done for now:

Composer was not should fancy title:

Notifications not showing fancy title

(Sam Saffron) closed #19