Emojis selected on iOS displaying additional rectangles

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 :partly_sunny: :cloud: and happy little :evergreen_tree: :deciduous_tree:.

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

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:
:owl: :tea: :hotel: :french_guiana:

While these are from the iPad keyboard selector:

:control_knobs: :dolls: :paperclips: :atom_symbol: :fleur_de_lis:

Easy solution, use the Discourse emojis.

4 Likes

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?

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

1 Like

I just came across this today when posting :heart: :orange_heart: :yellow_heart: (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?

4 Likes

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:

:orange_heart::green_heart::yellow_heart::blue_heart::purple_heart::heart::heart::heart: (no spaces between)
:orange_heart: :green_heart: :yellow_heart: :blue_heart: :purple_heart: :heart: :heart: :heart: (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):

2 Likes

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.

5 Likes