20

I've coded an HTML email and use "▶" to code a right-pointing triangle in place of an image in a call-to-action. This renders as anticipated except in iOS devices where this html entity is converted to its emoji counterpart. I also tried using the hex version instead of the decimal one with no success.

I've found posts where the solution utilizes php, but as this is an HTML email I can't use PHP.

Any way to prevent iOS from converting the HTML Entity into its emoji counterpart?

Here's the html entity I'm using: http://www.fileformat.info/info/unicode/char/25B6/index.htm

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
josh1978
  • 698
  • 7
  • 19
  • What do you mean by “its emoji counterpart”, and how did you verify that a conversion took place? Are you sure that what you see is not just a glyph for BLACK RIGHT-POINTING TRIANGLE U+25B6? What are you CSS settings (specifically, font settings)? – Jukka K. Korpela Jul 15 '14 at 04:16
  • The problem is the font you are using... (Or rather the font iOS eMail is using) you must either find a way to change said font to a font that doesn't support emoji (which might not even be possible, iOS might over-ride all fonts to become `Apple Color Emoji` font for those unicode characters... or find a character that looks like that but is a different code. – Albert Renshaw Jul 15 '14 at 04:19
  • Might I suggest one of these: `►`, `▸`, `‣`, or `➤` – Albert Renshaw Jul 15 '14 at 04:22
  • Top of image is the emoji that shows up on iOS devices. Bottom of image is the html entity. http://i28.photobucket.com/albums/c205/Josh_Blauvelt/character_zps5c6df2f8.gif Font-family: Arial Rounded MT Bold,Nunito,Helvetica Rounded,Arial,Helvetica,sans-serif – josh1978 Jul 15 '14 at 04:55
  • 1
    @JukkaK.Korpela I said the emoji counterpart because it's the same encoding but different display depending on the environment. I verified the conversion took place using litmus, a testing platform for html emails. Font settings are in the jsfiddle: http://jsfiddle.net/WebDevJoshB/5q4gP/1/ – josh1978 Jul 15 '14 at 17:36
  • I've removed the iOS and HTML Email tags and references from the title as the answer to this question is a load more broader than those specific implementations. – James Donnelly Oct 10 '16 at 15:41

1 Answers1

27
▶︎

U+FE0F and U+FE0E are ‘variation selectors’, signalling that, respectively, an emoji-like (coloured/animated) or text-like rendering is preferred, if available. If neither is used, the renderer can choose at will. Unfortunately iOS in certain scenarios defaults to the emoji variant and has to be manually put right.

(Hex vs decimal character reference is immaterial. You can include the raw characters too, you don't necessarily have to encode them as character or entity references, but as raw characters the existance of the variant selector would be hard to see in an editor.)

bobince
  • 528,062
  • 107
  • 651
  • 834
  • Thanks for the suggestion. I tried that and it didn't work: http://i28.photobucket.com/albums/c205/Josh_Blauvelt/character2_zps94b4d897.gif Here's the jsfiddle. It shows the right-pointing triangle: http://jsfiddle.net/WebDevJoshB/5q4gP/1/ – josh1978 Jul 15 '14 at 17:33
  • Actually, I found that this worked when viewing the email in a Safari Web browser, but it doesn't work when viewing on iPhones or iPads, which is strange. I'm going to try some trickery using a background image for those UAs that support it and see how that goes. – josh1978 Jul 16 '14 at 18:11
  • Ugh, so is there's specifically a bug with the iOS built-in email client? What's the unknown-character box below the arrow? – bobince Jul 19 '14 at 08:17
  • Sorry @bobince for delay. I used `▶︎` that was listed in your response. The white outline box happens from the second entity - `︎`. When I remove it, the first one, `▶` will render as the white arrow, except on iPhone 4, 5, 5s, iPad/iPad mini/iPad retina it displays as the emoji character, and on Outlook.com on Chrome/IE11/Firefox (all on PC) it renders as a _black_ arrow. This is based of testing using Litmus, so take that with a grain of salt. I went with using an inline image, which works across all email clients/devices as intended. – josh1978 Sep 19 '14 at 22:01
  • 1
    I note this technique now does work in Safari on iOS8.3. – leptinella Aug 20 '15 at 23:19
  • 1
    For CSS `:before` and `:after` tags you can append `\FE0E` to your content:` declaration. – cronoklee Jan 31 '17 at 18:05
  • @cronoklee depending on the os and email app, pseudo-classes aren't supported universally, at least at the time of my original post. I was trying to find one solution that worked for all email apps on all devices and user agents. Email support for `:after` as of time of this comment: https://www.campaignmonitor.com/css/selectors/after/ – josh1978 Nov 08 '18 at 13:33
  • @bobince I revisited my question for some reason, and wanted to address including the raw character instead encoding the character: Some email clients will render the raw character while some do not. Some email clients will strip metadata from the I was looking for a solution that would work no matter which email app and OS was being used. – josh1978 Nov 08 '18 at 13:42
  • I just had success with `◀︎` and `▶︎` to get non-emoji triangles on Safari on iOS 13.4. I'm not seeing side effects in other browsers. – Garrett Albright Jun 06 '20 at 03:17
  • Update: this works for all iOS devices, but now doesn't for gmail.com. On PC gmail defaults to Roboto, and it must not exist as a text character. Using DevTools, it converted `︎▶` to `▶`. I can't target it with internal css; gmail prepends gibberish to all my class names (example`[class~=an1]` becomes `[class~=m_3369303004283410109an1]`. This is the only CSS attribute selector gmail supports. – josh1978 Jul 24 '22 at 19:50