iOS 13 not displaying Russian Ruble (₽) unicode symbol

Asked 20/1, 2020 at 13:43 Answered 9/4, 2020 at 11:16

I'm having issues displaying the ₽ symbol on iOS 13.x.x. It seems to be working on on iOS12, but when I use a device that had 13 installed, the unicode character shows up as an empty square.

https://www.fileformat.info/info/unicode/char/20bd/browsertest.htm

Everything works fine on desktop
iOS 12 renders the character properly
iOS 13 renders empty square
When I set the CSS font-family to only a few options ('system-ui' is one), the character displays properly

To compare these, opened an empty tab and only added the symbol to the body of the HTML. This issue persisted. Just to be clear, when I have no CSS or extra markup on the page, this issue is showing up. Has anyone run into this? Did Apple remove unicode characters from some of their fonts?

iOS12:

iOS13:

Clod answered 20/1, 2020 at 13:43 Comment(9)

Tried using ₽ from Emoji & Symbol keyboard? – Sirup 20/1, 2020 at 14:8

what custom font are you using? – Accouter 21/1, 2020 at 13:44

@VadimNikolaev Helvetica. Not custom – Clod 24/1, 2020 at 9:12

@user7128475 on simulator is ok for iOS 13.3, do you use real device? – Accouter 24/1, 2020 at 9:22

@VadimNikolaev Yes I noticed this on my own iPhone on a blank page with no styles attached – Clod 24/1, 2020 at 10:37

My html is <html><head></head><body> ₽ </body></html> – Clod 24/1, 2020 at 10:43

Yep, I've reproduced it for WKWebView. I guess it's an Apple's bug, because I see the same situation with ₼ symbol – Accouter 24/1, 2020 at 11:10

Have you tried using the HTML escape instead of directl/y including the unicode character - ie <html><head></head><body>₽</body></html>? – Gravante 20/3, 2020 at 12:28

@samdy1Yes, same result – Clod 24/3, 2020 at 13:0

I've finished my research and I'd like to say that the issue is exclusively in iOS and WKWebView. After an update to 13 version, iOS stopped recognizing a Ruble symbol ₽ and, for example, Azerbaijani manat ₼ and Check Mark Unicode Character (\u{2713}) in certain font sets.

This issue affected thousands of web pages even huge brands. So just changing a font to specific ones solved the issue, but it's an workaround sure.

the same issues for iOS13: 1, 2

Accouter answered 24/1, 2020 at 11:31 Comment(1)

Thanks for looking at this, weird that they dropped support. – Clod 27/1, 2020 at 15:14

As a workaround you can wrap separately the ruble sign in a font containing it. Helvetica Neue - contains the ruble sign ans it's preinstalled IOS font. For PC users you can use your default font like fallback.

span.ruble-icon {
  font-family: "Helvetica Neue", sans-serif;
}

<span class="ruble-icon">₽</span>

Redistrict answered 20/3, 2020 at 11:49 Comment(3)

The asker has said in their comments that they're using Helvetica already. Could you explain why this will work around the problem in your answer? – Gravante 20/3, 2020 at 12:27

Experimentally established that "Helvetica" does not have a ruble symbol, and "Helvetica Neue" has – Redistrict 20/3, 2020 at 14:21

@user7128475 You can not connect this font, it is a system IOS font. – Redistrict 25/3, 2020 at 6:34

I'm also faced this, iOS 13 not displaying Russian Ruble (₽) Unicode symbol :- It's the default font on Macs, but rare on PCs. Since it's not technically web-safe, some people may have it and some people may not. If you want to use a font like that, without using @font-face, you may want to write it out in several different ways because it might not work the same for everyone."Helvetica Neue" it's working for me better try this example:font-family: "Helvetica-Cyrillic", "Helvetica", "Helvetica Neue" ;

Backwater answered 9/4, 2020 at 11:16 Comment(0)

Recommended topics

Hot tags