8

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): enter image description here

Actual Output (android browser): enter image description here

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?

stklik
  • 834
  • 1
  • 8
  • 19
  • 1
    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? – Mike 'Pomax' Kamermans Mar 03 '17 at 23:23
  • 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 `
    ` tag.
The problem only occurs on Android (display on desktop and iOS is phone)
     – stklik Mar 04 '17 at 11:33
  • 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? – Mike 'Pomax' Kamermans Mar 04 '17 at 17:32
  • 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 https://tpgnow.herokuapp.com/CERN from an android phone and a browser should show the difference) – stklik Mar 04 '17 at 22:54
  • 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 – Mike 'Pomax' Kamermans Mar 05 '17 at 05:23
  • 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! – stklik Mar 05 '17 at 18:41
  • hmm, it might be interesting to raise this issue on typedrawers, on with the dejavu folks (https://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. – Mike 'Pomax' Kamermans Mar 05 '17 at 19:51

1 Answers1

2

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.

Jacopo
  • 562
  • 6
  • 10
  • 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. – stklik Oct 09 '18 at 18:21
  • For me the font `Lucida Sans Typewriter` is real monospace font for Android – Paulo Buchsbaum Oct 17 '19 at 03:31