• font-family:monospace not working in Chrome?

    From Stan Brown@21:1/5 to All on Wed Jul 14 10:13:44 2021
    URL: https://oakroadsystems.com/genl/relation.htm#Cousin
    CSS: https://oakroadsystems.com/ors.css
    (Both validate without errors or warnings, using the W3C's VNU,
    except a warning about windows-1252.)

    The pre element is styled with font-family:monospace, so that the
    chart's vertical lines will align to the edges of the horizontal
    line. In Firefox I get a monospace font and they do, but in Chrome I
    get a proportional font and they don't.

    I inspected the <pre> element, and it shows font-family:monospace
    coming from my CSS, but it's using a proportional font anyway,
    specifically Lucida Sans Unicode. (Just to make sure Lucida Sans
    Unicode wasn't incorrectly identifying itself as monospace, I opened
    Properties of a command window, and on the Font tab Lucida Sans
    Unicode was not available, just Lucida Console and Consolas.)

    I noticed that I _do_ get monospace in Print Preview in Chrome. The
    difference is that I specify a bunch of font families in a @media
    print rule. As an experiment, I tried specifying those font families
    in the regular <pre> rule as well, and when I do that I get a
    monospace font. (I didn't upload that CSS file.)

    1. Isn't the browser supposed to pick an available monospace font
    when a CSS rule specifies monospace?

    2. Am I doing something wrong that is causing Chrome to pick a
    proportional font?

    3. Although I "fixed" the problem by specifying font families, that
    doesn't help people who don't have any of those fonts. Is there a
    universal solution, or at least a nearly universal solution?

    Thanks!

    --
    Stan Brown, Tehachapi, California, USA
    https://BrownMath.com/
    https://OakRoadSystems.com/

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From John-Paul Stewart@21:1/5 to Stan Brown on Wed Jul 14 15:00:11 2021
    On 2021-07-14 1:13 p.m., Stan Brown wrote:
    URL: https://oakroadsystems.com/genl/relation.htm#Cousin
    CSS: https://oakroadsystems.com/ors.css
    (Both validate without errors or warnings, using the W3C's VNU,
    except a warning about windows-1252.)

    The pre element is styled with font-family:monospace, so that the
    chart's vertical lines will align to the edges of the horizontal
    line. In Firefox I get a monospace font and they do, but in Chrome I
    get a proportional font and they don't.

    Is it possibly a misconfiguration of your browser? Chrome on my systems (Chrome 91.0.4472.124 on Windows & Chromium 90.0.4430.21 on Debian) are definitely using monospaced fonts. In Chrome, go to Settings ->
    Appearance -> Customize Fonts. What is set for "Fixed-width font" and
    does the preview text below the drop-down selector appear correctly?
    Perhaps your browser has been set to use an inappropriate font rather
    than there being anything wrong with your stylesheet.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Stan Brown@21:1/5 to John-Paul Stewart on Thu Jul 15 06:52:27 2021
    On Wed, 14 Jul 2021 15:00:11 -0400, John-Paul Stewart wrote:

    On 2021-07-14 1:13 p.m., Stan Brown wrote:
    URL: https://oakroadsystems.com/genl/relation.htm#Cousin
    CSS: https://oakroadsystems.com/ors.css
    (Both validate without errors or warnings, using the W3C's VNU,
    except a warning about windows-1252.)

    The pre element is styled with font-family:monospace, so that the
    chart's vertical lines will align to the edges of the horizontal
    line. In Firefox I get a monospace font and they do, but in Chrome I
    get a proportional font and they don't.

    Is it possibly a misconfiguration of your browser? Chrome on my systems (Chrome 91.0.4472.124 on Windows & Chromium 90.0.4430.21 on Debian) are definitely using monospaced fonts. In Chrome, go to Settings ->
    Appearance -> Customize Fonts. What is set for "Fixed-width font" and
    does the preview text below the drop-down selector appear correctly?
    Perhaps your browser has been set to use an inappropriate font rather
    than there being anything wrong with your stylesheet.

    Brilliant! I never thought of checking that, but it was exactly as
    you said. Thank you very much!

    --
    Stan Brown, Tehachapi, California, USA
    https://BrownMath.com/
    https://OakRoadSystems.com/

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)