Search code examples
androidutf-8fontspreascii-art

ASCII art renders differently on Android devices?

Having a little issue with the rendering of some ASCII art on Android devices, i have a site up here https://crowdesk.org/android/basictest.html , If you view this site on a Desktop or iOS device it renders normally As you can see

well rendered ASCII

However when i view the website on Android devices, (Have tried Android Chrome and Samsung internet) it renders much differently. My intuition is telling me this is a Android specific font rendering quirk, perhaps to do with the rendering of Unicode Block elements? Although i think it also could have something to do the handling of monospaced fonts.

enter image description here

As far as the code goes i'm using the pre tags which indicate preformatted text, please also note, this issue does not seem to be impacted by screen size, rather i have only been able to emulate the issue when viewing from an actual Android device.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width" charset="utf-8">
<pre>
  +--------------------------------------+
  |                                      |
  |                     ▄▄▄      ▄▄▄     |
  |    Idena            █  ▀▄▄▄▄▀  █     |
  |                  ▄▀ █ ▄▄    ▄▄▄▀ ▌▄  |
  |                  ▀  ▌▓▄▄▌▌▐▐▒▄▓▐ ▌▀  |
  |                 ▐   █    ▌▐    █ ▌▀▌ |
  |                  ▓  █    ▄▄    █ ▌▓  |
  |                  ▀█ ▌▌▄ ▀▓▓▀  ▓▐ █▀  |
  |                     ▌▌▌▌▄  ▄▓▀▐▐     |
  |                       ▀▀▄▄▄▄ ▀       |
  |                                      |
  +--------------------------------------+
</pre>
</html>

Solution

  • Solved my own issue by following up from the comment from Giacomo Catenazzi, basically i downloaded a copy of Courier put that on my webserver, then forced pre to use that version of Courier using the font face specification. Working now :)

    pre {
    font-family: Courier;
}

@font-face {
  font-family: Courier;
  src: url(Courier.ttf);
}