Bugfix: quote monospace font

[tusharsadhwani]

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

Before:

After:

[nedbat]

See https://twitter.com/sadhlife/status/1446060335979397120 for the sleuthing :)

[hugovk]

Good work! As it happens, this is fixed in the upcoming Chrome 96: python/pythondotorg#1708 (comment)

[hugovk]

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 :)

[JulienPalard]

Oh this kind of bugs … ☹

[JulienPalard]

Thanks @tusharsadhwani and @nedbat!

[JulienPalard]

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.

[beauremus]

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.

[tusharsadhwani]

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

[nedbat]

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?

[tusharsadhwani]

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

[hugovk]

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.

[tusharsadhwani]

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.

[tusharsadhwani]

Android, Chrome 94

Linux, Chrome 94

[arseniiv]

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?

[brandon-leapyear]

✨ 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.

[tusharsadhwani]

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

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

[hugovk]

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;

[tusharsadhwani]

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

[beauremus]

MacOS Chrome 94 monospace

MacOS Chrome 94 monspace, "monospace"

Both solutions work for me.

[tusharsadhwani]

@beauremus Thanks a bunch.