1. Home
  2. Categories
  3. Meta
  4. Bugs
  5. Android: monospace isn't

Android: monospace isn't

  • T

    On my Android 4.1.2 (Jellybean) phone running Chrome 35.0.1916.122, the monospaced font in the code tags falls back to a serif font.

    I've gotten used to it by now: italic fonts also usually don't work on Chrome on my phone, Discourse is no exception (sans fonts tend to fall back to Roboto, and apparently Google can't be fucked to properly integrate the italic version into Chrome), but I figured the monospaced font turning into a serif font should be worth reporting, on a forum full of programmers anyway.

    It seems that Android likes to pick and choose which fonts it deems worthy of displaying: I haven't found a pattern to this yet, but I've found that Adobe's free font Source Sans Pro works well on Android; ninja edit, the italic version actually looks italic, and so, it seems, do Fira Mono and Source Code Pro: check out an example here.

    Pre-4.2 Android also has a stock browser simply called "internet", I haven't tried that one yet but from past experience I'd expect the same story there.

    0
  • chubertdev

    I've told people that I couldn't be friends with them simply because they use the stock Android Internet app.

    1 Nagesh 1 Reply
  • sam
    Banned

    @toon said:

    I figured the monospaced font turning into a serif font should be worth reporting, on a forum full of programmers anyway.

    I am fine adding a fallback if you let me know what fallback you want, but we are trying pretty hard here.

    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
    4 T Keith ChaosTheEternal 3 Replies
  • E
    Banned

    I noticed this too on my Nexus 5 but did not have time to look into it.

    0
  • T

    I didn't mean that sarcastically, Sam. I appreciate the team's effort (you guys are in NYC right? it was like 3AM there when you posted that) and expertise. What I meant was that I know Android to be shitty in this regard, so on principle I'm not about to report any crummy font issues, but am making an exception for this.

    Anyway back on topic, unfortunately I can't think of a fallback that doesn't involve including web fonts.

    0 sam tufty 2 Replies
  • Keith

    @sam said:

    "Courier New", [u]monospace[/u], serif;

    I don't understand how android is able to screw this up. Does it not have any fixed width font?

    I can't see what else you can do if that fallback doesn't work.

    0 sam 1 Reply
  • sam
    Banned

    I think this is the issue

    2 Keith 1 Reply
  • Keith

    Oh good, only three and a half years old.

    2
  • sam
    Banned

    We are across 4 continents, I am in Australia, no worries, feel free to report any issues

    0
  • DoctorJones
    Discourse touched me in a no-no place

    I've just tried this in Chrome on a Nexus 5 on this post and this SO post.

    When I request the site normally, it falls back to a non fixed width font.

    ...but when I select "Request desktop site" it displays the fixed width font correctly.

    My point is that the browser seems capable of using fixed width fonts. I'd expect there to be a way of making it work without the browser having to request the desktop version of the site.

    I hope this helps.

    Here's my system info:

    Application:
    Chrome 35.0.1916.141 1916141
    OS
    Android 4.4.3; Nexus 5 Build/KTU84M
    Blink
    537.36 (@174108)
    JavaScript
    V8 3.25.28.18
    User Agent
    Mozilla/5.0 (Linux; Android 4.4.3; Nexus 5 Build/KTU84M)
    AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Mobile Safari/537.36

    2
  • Nagesh

    @chubertdev said:

    I've told people that I couldn't be friends with them simply because they use the stock Android Internet app.

    You are being kind and nice. I am only friends with other iPhone users.

    Filed under: Facetime me.

    0 boomzilla 1 Reply
  • boomzilla
    ♿ (Parody)

    @Nagesh said:

    I am only friends with other iPhone users.

    This explains much.

    0
  • ChaosTheEternal

    Here may be the problem:

    None of those fallbacks you mention are part of the Mobile View stylesheet (I assume the default mobile stylesheet is what is in use), so it uses "monospace" then "serif", which is what this bug report is about.

    The hint was from @DoctorJones post.

    4 E 1 Reply
  • tufty

    What I meant was that I know Android to be shitty in this regard …
    FTFY
    0
  • E
    Banned

    Yes, good point, I changed that to

    code,kbd,pre,samp {
  font-family: monospace; font-size:1em;
}
    0 E 1 Reply
  • E
    Banned

    Wow looking at this on Android Nexus 5 Chrome latest, monospace alone does NOT work. The pre block is clearly not monospace. Maybe if we do not specify a font, or use the full overkill desktop font stack?

    0 sam 1 Reply
  • sam
    Banned

    I would just chuck the full stack, why not?

    0 E 1 Reply
  • E
    Banned

    Seems crazy to specify 10 different desktop fonts, most of which will not be present, on mobile. Let me try not specifying a font, first.

    0
  • E
    Banned

    Well balls, not specifying a font did not work either. Full desktop font Stack it is, then, I guess. Siiiiiiiiigh.

    0
  • E
    Banned

    Actually this was my bad as @riking pointed out, I was not editing the "root" shared stylesheet between mobile and desktop.

    Now I did, removing all font declarations for <pre>, <code>, etc, and it renders fine. So this can close on the timer naturally -- fixed.

    1
  • E
    Banned

    This topic was automatically closed after 2 days. New replies are no longer allowed.

    0
Log in to reply