💄 Use font 'Fira Code' to fix display of Rich panels in docs in Windows

[tiangolo]

💄 Use font 'Fira Code' to fix display of Rich panels in docs in Windows

To fix this (detected/reported by @svlandeg):

Description

The issue comes from the fact that Material for MkDocs uses the font "Roboto Mono" by default for code, and the termynal.css styles used the same.

But "Roboto Mono" doesn't include the "glyph" (the visual thing to represent a Unicode character) for the panels: horizontal lines, the corners, and the character ❱.

So, the browser tries to use the next font in the font family. In Linux, it ends up in one that has the glyphs and they are indeed monospace so, it looks mostly good.

In Windows, the next font it finds that has the glyphs is not monospace or doesn't have the glyphs properly monospace (having the exact same width as all the other glyphs in the font), so it looks like unaligned.

Change the font

Changing the font to one that has the glyphs, like Fira Code, fixes most of the issues.

With Fira Code, it's the closest (Chrome on Windows):

Funny enough, on Chrome on Ubuntu (Linux), the same font, looks good:

So there's still something funky going on.

heavy right-pointing angle bracket ornament (❱)

After trying a lot of fonts, my conclusion is that almost no font manages to perfectly render the character ❱ in exactly monospace (with the exact same width as any other character). 😅 ...but it seems to only happen on Windows. 🤯

More strange yet is that running the same script in PowerShell shows the lines perfectly aligned, so there's a potential way for it to properly work, but when trying the theoretical default font of PowerShell, it still looked funky on the browser.

And it also looks funky in other places in Windows.

For example, copying the example in VS Code on Windows:

╭──────────────── Traceback (most recent call last) ────────────────╮
│ /home/user/code/superapp/main.py:5 in main                        │
│                                                                   │
│    2                                                              │
│    3                                                              │
│    4 def main(name: str = "morty"):                               │
│ ❱  5 │   print(name + 3)                                          │
│    6                                                              │
│    7                                                              │
│    8 if __name__ == "__main__":                                   │
│                                                                   │
│ ╭──── locals ────╮                                                │
│ │ name = 'morty' │                                                │
│ ╰────────────────╯                                                │
╰───────────────────────────────────────────────────────────────────╯
TypeError: can only concatenate str (not "int") to str

...it also renders it a little smaller, so the last bar is also a little moved:

...and here on GitHub, showing that same snippet, on Windows it shows unaligned, on Ubuntu it shows fine.

So, there seems to be an issue with the ❱ glyph on Windows. Not even sure. (?) But for now this should at least make it look better.

[github-actions]

📝 Docs preview

Last commit 1723159 at: https://82a63e4c.typertiangolo.pages.dev

Modified Pages

• https://82a63e4c.typertiangolo.pages.dev/css/termynal.css - (before)

[svlandeg]

Can we use > instead of ❱ ?

[tiangolo]

Yep, I tried that, and it works, but the problem is that these commands are copied as is from the terminal as HTML, so changing it manually wouldn't be sustainable for the long term. 🤔

[willmcgugan]

IIRC we had issues with Fira Code, but had more success with Roboto Mono. Windows in particular as it would break the monospace grid.

Textual serve renders terminals in a similar way, and we used "Roboto Mono", menlo, monospace;

There are also a bunch of CSS rules the impact font rendering. You might want to experiment with text-rendering. Setting that to "geometryPrecission" might help.

You may also want to self host your fonts, if you aren't already. We found that some browsers refused to load fonts from a CDN, which resulted in garbled terminals.