Description

ZedThree

opened on Nov 1, 2022

Issue body actions

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

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

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.

Activity

1. hugovk commented on Nov 1, 2022

   

   hugovk

   on Nov 1, 2022

   Member

   More actions

   With what version of Vivaldi, and what version of Chrome does it use?
2. ZedThree commented on Nov 1, 2022

   

   ZedThree

   on Nov 1, 2022

   ContributorAuthor

   More actions

   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
3. ezio-melotti commented on Nov 8, 2022

   

   ezio-melotti

   on Nov 8, 2022

   Member

   More actions

   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.
4. ZedThree commented on Nov 8, 2022

   

   ZedThree

   on Nov 8, 2022

   ContributorAuthor

   More actions

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

   

   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;
   }

   

   Reacted by Ezio Melotti
5. hugovk commented on Nov 8, 2022

   

   hugovk

   on Nov 8, 2022

   Member

   More actions

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

   • Bugfix: quote monospace font #85
   • Fix monospace inconsistencies #87
   • Monospace font isn't monospace on Android on Chrome. pythondotorg#1708
   • https://meta.stackexchange.com/a/231861/162511

   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;
6. ZedThree commented on Jan 30, 2023

   

   ZedThree

   on Jan 30, 2023

   ContributorAuthor

   More actions

   That ends up looking like this for me:

   

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

   added a commit that references this issue on Jan 30, 2023

   Fix problem with monospace rendering in Vivaldi

   This issue will close once commit 15c8fc9 is merged into the 'main' branch.

   15c8fc9
8. hugovk

   closed this as completedin #104on Feb 6, 2023
9. hugovk

   added a commit that references this issue on Feb 6, 2023

   Merge pull request #104 from ZedThree/fix-monospace-vivaldi

   f769cf3

Issue actions