Emojis selected on iOS displaying additional rectangles

[nibl (Marcus)]

Certain emojis display a rectangle after the image. Does anyone know the cause for this?

I’ve attached two screenshots below. One shows the emojis when writing a new post, the second what happens after posting.

I’m running version 2.0.0 beta 6 of Discourse. The emoji set is Apple/International.

Test: happy little and happy little .

Hmm, it’s happening on here too. At least for me viewing on an iOS device.

[Mittineague]

AFAIK it is a difference with the iOS emoji. I have noticed the same “squares” effect with other applications as well.

For example, these are from the Discourse emoji picker:

While these are from the iPad keyboard selector:

Easy solution, use the Discourse emojis.

[nibl (Marcus)]

Thanks, just tested. Indeed, the Discourse emoji work as expected, without any additional rectangles.

Out of curiosity, is this some kind of Unicode issue where the two systems don’t know how to interpret the codes?

[Mittineague]

@nibl

is this some kind of Unicode issue

I’m fairly certain it is, yes. And I’m thinking that Discourse vs. iOS emojis was a missing bit of information in this earlier topic

What is the problem with PrettyText.markdown call?

PrettyText.markdown("", {}) Will not generate the same code as: PrettyText.markdown(":heart::heart:", {}) It generates: => "<p><img src=\"/images/emoji/apple/heart.png?v=5\" title=\"\" class=\"emoji\" alt=\"\">️️️</p>" ( there are ':️' & ':', copy paste to https://www.soscisurvey.de/tools/view-chars.php to see it) I think it has something to do with replacement = "\u200b" + replacement; In lib/pretty_text/shims.js ( on 1.9.4 )

[sam (Sam Saffron)]

I just came across this today when posting (this is actually from a Mac now, this is not iOS specific, it is Emoji code -> Emoji conversion)

@pmusaraj can you have a look at this?

Also see: What is the problem with PrettyText.markdown call?

[pmusaraj (Penar Musaraj)]

I think there are two separate issues here.

The first one is that sometimes when using multiple emojis without spaces, some of them won’t convert correctly. Could this be due to:

@sam

We only allow emoji expansion after a punctuation or space.

(no spaces between)
(spaces between)

The second issue is that extra square after some emojis. Not sure yet what this might be.

Update: those extra squares only show on Safari, screenshot below has the same post in Safari, Chrome, Firefox (left to right):

[pmusaraj (Penar Musaraj)]

It turns out the two issues are related. Some emojis include the Unicode U+FE0F character, which is the VARIATION SELECTOR-16 selector, an “invisible codepoint which specifies that the preceding character should be displayed with emoji presentation”. Since the preceding code point is turned into an image, Safari gets confused, and it displays this rectangle instead.

https://github.com/discourse/discourse/pull/6456

Note that the PR trims U+FE0F when replacing unicode emojis but I wonder whether it breaks emojis when they get converted back to Unicode in push notifications and the like.