Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird monospace bug #98

Closed
ZedThree opened this issue Nov 1, 2022 · 6 comments · Fixed by #104
Closed

Weird monospace bug #98

ZedThree opened this issue Nov 1, 2022 · 6 comments · Fixed by #104

Comments

@ZedThree
Copy link
Contributor

ZedThree commented Nov 1, 2022

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
Copy link
Member

hugovk commented Nov 1, 2022

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

@ZedThree
Copy link
Contributor Author

ZedThree commented Nov 1, 2022

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
Copy link
Member

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. 2006-02-08 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
Copy link
Contributor Author

ZedThree commented Nov 8, 2022

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

image

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

  • DejaVu Sans Mono
  • Noto Color Emoji

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
Copy link
Member

hugovk commented Nov 8, 2022

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants