Android monospace space ( ) width is different than character width

Question

I'm developing a little webapp. I tried displaying some output in an sort of ascii art way, using boxdrawing characters. However, I noticed that on Android the space ( ) isn't equal width with the other characters, leading to ugly output.

I've put the font as monospace and even tried the monospace,monospace CSS setting.

To see what I'm talking about:
Please open https://tpgnow.herokuapp.com/CERN on Android and on a desktop browser.

Expected Output (desktop browser):

Actual Output (android browser):

I've tried different browsers and platforms and devices. It seems to work on Win, Mac, Chrome and Firefox, also on iOS, but not on Android (neither Chrome nor Firefox).

Does anybody have a solution for this problem?

Paulownia

just saying it's monospace doesn't make it monospace. Is the font you're using actually a true monospace font? If not, nothing you do will magically make it one. With that said, instead of using   why not just set the CSS so the whitespace handling uses pre, so that spaces and newlines show as normal text? – Tameika

I tried using both: font-family: monospace,monospace; and font-family: font-family: "DejaVu Sans Mono", "Menlo", "Lucida Sans Typewriter", "Lucida Console", "monaco", "Bitstream Vera Sans Mono", monospace; Also I tried   and normal space. Also it is wrapped in a <pre> tag. The problem only occurs on Android (display on desktop and iOS is phone) – Paulownia

why so many fonts. Use a @font-face declaration for DejaVu Sans Mono, and a fallback to monospace. Which versions of Android have you tested? – Tameika

I did as suggested (@font-face, removing the many monospace fonts, no success. I tested 6.0 on my OPO, 6.0 on Huawei M3, 5.0 on a friend's Samsung, same behaviour. Can you reproduce the behaviour? (surfing to tpgnow.herokuapp.com/CERN from an android phone and a browser should show the difference) – Paulownia

yeah, nexus 6P with android 7 shows the same result. Have you tried debugging with Firefox or Chrome over USB? (both let you connect a browser-on-your-desktop to your phone so you can use the devtools on your desktop to inspect what is happening on the phone). Might give some clues as to which content the android phone thinks it's supposed to show, and what CSS it actually has applied – Tameika

It seems that I run into problems with DejaVu. I now switched to using Menlo Regular and it works. Perhaps the font that I used had some issues. Thanks so much for your help! – Paulownia

hmm, it might be interesting to raise this issue on typedrawers, on with the dejavu folks (github.com/dejavu-fonts/dejavu-fonts) too. I suspect moyogo at least would certainly care to know about the font having a quirk in modern browsers on Android. – Tameika

Answer 1

I ran into this exact same problem! Box drawing gliphs are missing in Google fonts.

Adobe's Source Code Pro has them. Mononoki should too.

I suspect may other issues with Android monospace are due to this general issue.

Paynim

FYI, I still don't know what the problem is/was. I changed my code and the place where I saved the font. It "magically" started working, and I did not bother further investigating. – Paulownia

For me the font Lucida Sans Typewriter is real monospace font for Android – Production