Bugfix: quote monospace font by tusharsadhwani · Pull Request #85 · python/python-docs-theme

For some reason, saying just monospace here doesn't seem to work on chrome mobile. Quoting monospace fixes the issue.

Before:

After:

Despite the upcoming fix in Chrome, this is such a simple fix, I think it's worth merging for people who will still be on Chrome < 96, even after Chrome 96 release.

(Plus for people using latest Chrome 94 now :)

I released it as python-docs-theme 2021-11 (I live in the future) and rebuilt https://docs.python.org/3/ so someone can check. Rebuild for other versions and languages will be automatically done in the next 24h.

This "fix" broke the font for me. My Chrome on my Mac is now loading Helvetica for code rather than Courier. I can confirm that removing the quotes from monospace fixes the issue for me. I recommend this change be reverted and wait for a Chrome mobile fix. Let me know if I need to create a PR.

Chrome, showing 3 different behaviours on 3 operating systems. A tale as old as time.

Perhaps the best fix is to just specify monospace. Why a fallback to sans-serif? Does any browser not have a monospace font that is used when you specify monospace?

Removing the quotes from monospace even with it being the only specified font breaks on current chrome mobile.

So... Do we need one monospace with quotes and one monospace without quotes? 🙃

Perhaps the best fix is to just specify monospace. Why a fallback to sans-serif? Does any browser not have a monospace font that is used when you specify monospace?

The problem seems to be desktop isn't picking up the "monospace" and falling back to sans-serif. If we remove sans-serif, it'll fall back to some system default, which will be some sans-serif or serif, but not monospace.

Okay, I tested on 3.9's page, and it seems just

pre {
  font-family: monospace;
}

seems to work. Can someone test it on all 3 platforms, android mac and windows, that'd be great.

Android, Chrome 94

Linux, Chrome 94

Noticed my Firefox 93.0 on win10 is weirded by "monospace" and falls back to sans-serif, though it underlines "monospace" in the style inspector as if it was used. Using font-family: "monospace", monospace, sans-serif; seems to work fine, though. Would this variant satisfy Chrome?

✨ This is an old work account. Please reference @brandonchinn178 for all future communication ✨

Can confirm, currently fonts on docs.python.org are NOT monospaced on Chrome. font-family: "monospace", monospace, sans-serif does work.

font-family: "monospace", monospace, sans-serif;

Can confirm, works fine. Even on mobile where just monospace, sans-serif doesn't.

There is (or was) a known problem with plain font-family: monospace; that can cause text resizing issues, see necolas/normalize.css#519 (comment). The workaround is font-family: monospace, monospace; or
font-family: monospace, anyotherfont;`

And necolas/normalize.css#519 (comment) suggests a reason, browsers looked for the fixed string font-family: monospace;

Ah, that makes sense now. So I guess monospace, "monospace"; it is then :P

MacOS Chrome 94 monospace

MacOS Chrome 94 monspace, "monospace"

Both solutions work for me.