20

In the (default) Safari browser on an iPhone the "prev" and "next" characters in the links at the bottom of the questions page are rendered as Emojis, which looks quite ugly:

enter image description here

The HTML source contains the characters

 ◀  U+25C0   BLACK LEFT-POINTING TRIANGLE
 ▶  U+25B6   BLACK RIGHT-POINTING TRIANGLE

On iOS devices, these characters are rendered as an "Emoji variant" and appear as a white triangle on a blue background.

This was already observed in Unicode characters being drawn differently in iOS5 and was (controversially) discussed in the Apple Developer Forums: How to disable emoji in a UILabel? (requires Developer login).

I observed this with iOS 8 on an iPhone, but as I understand it, the same happens on all iOS devices since iOS 5.

This is an iOS problem and not a Safari problem. It does not happen in the "mobile view" in Safari on OS X:

enter image description here

As noticed in an answer to Unicode characters being drawn differently in iOS5, one can append the Unicode "variation selector" U+FE0E (HTML: ︎) to suppress this Emoji substitution.

Finally, my question:

  • Should this considered as an iOS/Apple problem (and no action is necessary)?
  • Or would it be possible to append the Unicode variation selector to those triangle characters to achieve a nice output on iOS devices? (But I have no idea if all current mobile browsers recognize the variation selector.)
  • Or could the left/right triangle characters be replaced by something else so that this problem is avoided?

EDIT: Motivated by the comments I'll make this a feature request now:

  • Please append the Unicode variation selector U+FE0E (HTML: ︎) to the triangle characters in the navigation links, to prevent them from being rendered as Emojis on iOS devices.

EDIT 2: The same problem was observed (and fixed) here: Why is the mod diamond red for question titles in the iOS app? ♦.

6
  • 2
    Might want to ask about disabling this on Ask Different; I can't imagine wanting this on any site. – Shog9 Jul 20 '15 at 19:44
  • 3
    @Shog9: Sorry, I don't get what you mean. I it is known how this can be disabled (by appending a Unicode variation selector, as I wrote in the question). My question was if Stack Exchange should change its HTML code and add the variation selector to those triangle characters. – Martin R Jul 20 '15 at 19:55
  • 1
    I think I reported this already when the new UI was launched, but can't find it. Nevermind. This should be fixed! – Patrick Hofman Jul 20 '15 at 20:21
  • It should most definitely be fixed. – Pekka Jul 20 '15 at 20:28
  • @Pat if it was downvoted without answers, it might have been cleaned up by automatic process. Check the "deleted recent questions". :) – Shadow The Vaccinated Wizard Sep 29 '15 at 15:31
  • Jup. Did that too. Really :) – Patrick Hofman Sep 29 '15 at 15:32
1

This is still a problem with iOS 14. I do not like the workarounds using the Unicode variation selector as I am referring to it in a Javascript method which flips between forward and downward arrows for a custom hide/show (which is why I want to fix it as the downward arrow is normal on the phone).

My hack/kludge is to use the Black Right-pointing Pointer instead. This has a similar appearance to the triangle:

rendering of triangles and pointers on iPhone

[Screen grab from iPhoneXS under iOS 14.4]

1
  • I know it's late in the day, but I thought I'd post in case my kludge is useful to anyone with the same problem who finds this question in the same way as I did. – David Mar 16 at 18:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .