almarklein / timetagger

Tag your time, get the insight
https://timetagger.app
GNU General Public License v3.0
1.12k stars 99 forks source link

Default font doesn't include less popular letters #385

Open jpalczewski opened 1 year ago

jpalczewski commented 1 year ago

Hi,

As polish native speaker I usually use polish in tags - however, there's a problem with subset of letter that messes up things visually(as you can see in the picture)

obraz There is the phrase for testing and copy-pasting: Zażółć gęślą jaźń

I am aware of problem that comes up with internationalization, and possible fix is relatively simple as choosing another font(maybe as an option for non-english speakers).

Thanks for your product by the way. It helps me a lot to stay on track with tasks.

almarklein commented 1 year ago

Hi @jpalczewski, thanks for bringing this to my attention! I agree that it is important to allow users to use their own language in descriptions (and tags).

It could well be that the current fonts (Ubuntu and Ubuntu narrow) are less suited for this. I don't understand Polish and these characters don't look familiar to me, so it's a bit hard to tell what's wrong. From what I can see, it looks like all characters are covered, but some lowercase letters are shown in uppercase, or lifted above the baseline, making the text look very "jumpy". Is this what you mean, or is there something else I should pay attention to?

almarklein commented 1 year ago

I copy-pasted the string you posted into TimeTagger myself, and I get this (Firefox and Chrome, on MacOS). Is this how this is supposed to render?

image image

In any case its different from your screenshot, which is a bit unexpected. Perhaps related to the canvas-specific text rendering ... what OS and browser is that on?

almarklein commented 1 year ago

Note to self: Also need a ttf font + baked js file for jspdf ... and if we want to really have superb font support don't forget CJK ...

jpalczewski commented 1 year ago

OS and browser is that on?

Win11 and Firefox, there is one unrelated thing that might increase jumpiness - I'm working in dual-screen environment and Windows enforces UI-scaling - black one is 125% and normal is 100%(both suggested by Windows):

obraz obraz

Inspired by your feedback, I did a little research on 23.7.1 I saw that FF sees that in CSS font-family is Ubuntu.
obraz

I had a thought that maybe something is bad with my environment, so I found an official site when it looks normal on 100% scaled screen.

obraz

What's the difference? They are using "Ubuntu variable" obraz.

On the other side, that font family looks like times new roman in jsfiddle: obraz.

Few mins ago I had a thought "don't dig further, you will debug fonts soon". Yep, there's a tool for it in firefox. And FF in my case uses glyphs from Verdana:

obraz

Ubuntu regular from google site works nice too.

I have downloaded woff from linked and put it on fontdrop.info, and that's the culprit: obraz.

Hope that helps!

almarklein commented 1 year ago

black one is 125% and normal is 100%

From what I can see, text on the black (125%) screen is rendered correctly, but on the light screen (100%) it is not, am I right? This might be related to how the font is scaled - Windows aligns characters to pixels to make them more crisp.

On the other side, that font family looks like times new roman in jsfiddle:

That could be because the font is not installed on your system. Websites often ship the fonts (TimeTagger does too).

And FF in my case uses glyphs from Verdana:

That's odd. I would expect Ubuntu, Ubuntu Condensed, FontAwesome, and maybe one system font like Verdana.

I will double-check on a Windows machine.

I have downloaded woff from linked and put it on fontdrop.info, and that's the culprit:

Sorry, what do you mean here?