Non-breaking hyphen displaying as an underscore under popular mobile browsers - what should I do as a web developer?

Question

I needed a non-breaking hyphen in a webpage, so I used it:

foo‑bar

Everything worked ok when I tested it on my laptop, on both Firefox and Chromium. When the site was ready, I finally tested it on a mobile phone.

It came out that the Android browsers based on Chromium - the default Samsung Marshmallow browser and CyanogenMod's Gello both display the non-breaking hyphen as an underscore instead.

How should I handle this? Bug reports in such big projects take forever until resolved and I want my webpage to display properly on mobiles.

Answer 1

I ran into this as well. One thing I discovered is that it was unique to the font we are using. The non-breaking hyphen would get converted to an underscore on Android if we were using the freight-text-pro font, but not another font. You can try switching fonts or try <span style="white-space: nowrap;">hyphenated-word</span> and use a regular hyphen instead.