Emoji in Title is not normalized šŸ¼ šŸ¼

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:

2 Likes

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.

1 Like

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.

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.

4 Likes

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:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/emoji.js.es6#L31

also an issue here:

5 Likes

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.

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?

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.

1 Like

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

1 Like

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

2 Likes

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

5 Likes

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ā€¦

1 Like

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

6 Likes

Title is now normalizedā€¦ so yay!

https://github.com/discourse/discourse/commit/44d7fe89edf2ac38c0e82115594e6d525e305657

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.

9 Likes

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

Composer was not should fancy title:

https://github.com/discourse/discourse/commit/7a4e825671bc127f65f494f0ec81c1b2137cab1d

Notifications not showing fancy title

https://github.com/discourse/discourse/commit/be8dd403df3cf1aba9597b0f392bf58a1f012608

6 Likes