✉️Use of emoji's causes weird title display in OSX

Contribute UX

AI-generated summary

The discussion is about the issue of using emojis in title displays on OSX. bartv reported that when pasting an emoji at the start of a title, it causes overlapping characters in Chrome and Safari, a ‘square’ character in Safari, and removes the space between the emoji and the rest of the title in Firefox. frold confirmed the issue with a screenshot.

bartv and frold shared their browser versions and screenshots to illustrate the problem. Mittineague suggested that stripping out emojis from topic titles could solve the issue, but bartv disagreed, suggesting instead to enable the emoji picker for titles and process directly entered emojis in the same way as picked ones.

Mittineague noted that the emoji picker is not activated for titles during topic creation, but is activated during title editing, and agreed that enabling the emoji picker during topic creation would be a good solution. codinghorror pointed out a similar issue discussed in another topic, which Mittineague acknowledged, but highlighted the difference in the availability of the emoji picker during topic creation.

1

Minor issue: when pasting in an emoji (not using the :emoji notation), I noticed the following issues:

  • In Chrome and Safari, using an emoji at the start of the title will lead to overlapping and unreadable characters.
  • Safari inserts a ‘square’ character after an emoji
  • Firefox removes the space between the emoji and the rest of the title

(Tested on OSX)

2

Like this?

35
35363×220 17.7 KB

and this

09

1 Like
3

Exactly. I figured the post would show it for itself :wink:

1 Like
4

using Version 67.0.3396.87 on Mac Os it did :smiley:

Looks fine on firefox 60.0.2 (64-bit) using Mac OS

My post was just meant to confirm your bug…

Have a nice day :wink:

1 Like
5

:+1:

Here’s a screenshot of Firefox 61.0b14 (notice the missing space after the envelope)

image
image1622×490 92.2 KB

6

So you’re suggesting that Discourse strip out emojis from topic titles so that browsers that don’t support certain emojis won’t render buggy titles?

7

Well, I wasn’t suggesting anything yet, just reporting that I observe an issue when users enter legitimate content :wink:

It’s interesting though that titles WILL display correctly if you enter emoji’s using the :emoji notation. However, the emoji picker is not activated for titles, making it harder to use them there.

I believe that emoji’s can be useful for certain topics, so I wouldn’t just strip them out.

So perhaps:

  • Enable the emoji picker for titles
  • Process ‘directly entered’ emojis in the same way as ‘picked’ emoji’s
9

Thanks, I have never tried to have any emoji in a title so I would have never noticed that.

The emoji picker is not activated in the title input when a topic is created. Yet it is activated in the title edit input. For example, if you click the edit pencil icon next to the topic title and start typing a colon, the emoji picker will display.

Although I have reservations about expecting Discourse to map all non-supported emoji codepoints to supported codepoints just so browsers won’t display buggy titles, I do think it would be good to have the emoji picker activate during topic creation.

Edge case and low priority perhaps, but an inconsistency nonetheless.

10

Isn’t this a duplicate of https://meta.discourse.org/t/broken-emoji-in-safari-mac-ios/59034 ?

11

To a great extent, yes. A difference is that the emoji picker is not available for the title input during topic creation so it is more difficult to not have buggy emoji titles.