21

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? ♦.

Improve this question
6
  • 3
    Might want to ask about disabling this on Ask Different; I can't imagine wanting this on any site.
    – Shog9 Mod
    Commented Jul 20, 2015 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
    Commented Jul 20, 2015 at 19:55
  • 2
    I think I reported this already when the new UI was launched, but can't find it. Nevermind. This should be fixed!
    – Patrick Hofman
    Commented Jul 20, 2015 at 20:21
  • It should most definitely be fixed.
    – Pekka
    Commented Jul 20, 2015 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 Wizard
    Commented Sep 29, 2015 at 15:31
  • Jup. Did that too. Really :)
    – Patrick Hofman
    Commented Sep 29, 2015 at 15:32

2 Answers 2

Reset to default
3

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]

Improve this answer
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
    Commented Mar 16, 2021 at 18:10
1

This is occurring because these arrows do not exist in the font you are using and iOS is falling back on its emoji font. To resolve this problem, include a symbol-friendly font like Hiragino Mincho ProN in your font stack. i.e.

font-family: Helvetica, Arial, "Hiragino Mincho ProN", sans-serif;

See also this answer in Stack Overflow: https://stackoverflow.com/a/8412044/672086

Improve this answer
3
  • 1
    so you're telling everyone to install a userstyle/userscript to change their SO font?
    – starball
    Commented Mar 27 at 22:50
  • 2
    Is this even still an issue? This is an old question from when SE had a mobile view. The mobile view was removed and responsive theme took over. In the responsive theme I don't see symbols, but instead words are used (e.g. "Prev", "Next"). See screenshot: i.sstatic.net/iLDRM.png
    – Cave Johnson
    Commented Mar 27 at 23:52
  • This is still a general recurring issue with font display on iOS that I have encountered several times, which is why I posted this answer. It is not an issue for Stack Overflow or Stack Exchange, neither of which seem to have been mentioned in the body of the original question. I do appreciate that the OP was talking about SE from his comment on 20 Jul 2015, but I am clearly not the only one thinking he was asking a more general question.
    – Rick Westera
    Commented Mar 31 at 23:30

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