search

python / python-docs-theme

Sphinx theme for Python documentation
Other
76 stars 59 forks source link

Weird monospace bug #98

Closed ZedThree closed 1 year ago

ZedThree commented 1 year ago

I have some strange issues with the monospace fonts in Vivaldi (Chrome):

image

(https://docs.python.org/3/library/logging.html)

Notice how the spacing is too large and numbers seem to be unicode symbols(?)

It looks fine in Firefox: image

I can see there were some changes last year (#85, #87). If I change the CSS to:

tt, code, pre {
    font-family: monospace, monospace;
    font-size: 96.5%;
}

this seems to fix my issue. Having just a single monospace causes the text size to be a bit strange.

hugovk commented 1 year ago

With what version of Vivaldi, and what version of Chrome does it use?

ZedThree commented 1 year ago
Vivaldi 5.4.2753.51 (Stable channel) stable (64-bit)
Revision 6a886b3dacf7a1a5a6d68e6e55f92bc0abaf2aa3
OS Linux
JavaScript V8 10.4.132.24
User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.126 Safari/537.36
ezio-melotti commented 1 year ago

Can you try to inspect the element and check the CSS rules that apply to that text? It almost looks like the numbers are using Unicode fullwidth text (i.e. ２００６-０２-０８ instead of 2006-02-08) but on that page they are ASCII. There might be something weird going on with the monospace font used for the code blocks though -- you should be able to see that from the inspector too.

ZedThree commented 1 year ago

Here's the text section from the "computed styles":

image

There's also a bit that says "Rendered Fonts" that lists:

If I remove the quotes from "monospace", or reorder them to monospace, "monospace" then Noto Color Emoji is removed from the list, and the text renders fine.

It's also affects function signatures:

dl > dt span ~ em {
    font-family: "monospace", monospace;
}

image

hugovk commented 1 year ago

Chrome, especially on Android, has a sketch history with monospace:

I'd be tempted to just do something like Stack Overflow:

font-family: ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;
ZedThree commented 1 year ago

That ends up looking like this for me:

image

which is maybe not quite nice as how Firefox renders it, but it is at least monospace. I'll make a PR for that