search

StarArawn / kayak_ui

Other
469 stars 50 forks source link

KTTF Visual Weirdness #195

Closed njt1968 closed 1 year ago

njt1968 commented 1 year ago

Trying to switch from .kayak_font to .kttf for WASM purposes, but it made some visual glitchiness:

.kayak_font: image

.kttf: image

The kttf code: image

Help appreciated 🤪

StarArawn commented 1 year ago

Hi!

You can use the offset_x and offset_y properties. For some reason the font gets vertically offset randomly depending on the font during SDF generation. I think I'm likely not positioning it correctly on the Y axis. In any case I added the additional properties to work as a workaround.

Which version of Kayak are you using? I made some changes to adjust the sampling curve for the SDF lookup to avoid the white boxes around the characters in the latest 0.2 release, and it's a bit surprising for you to have them.

njt1968 commented 1 year ago

Update to latest version did fix the visual noise, and after manually adjusting the Y offset, everything working fine. Thanks for your help 😊

njt1968 commented 1 year ago

Update:

On latest version, when using .kttf, the font looks fine on the .exe and when compiled to WASM on mobile browser, but not on Chrome/Edge on Windows.

.EXE: image

Mobile (via WASM): image

Chrome (via WASM): image

Any clue whats happening here? Wish I had more info to debug with but I am lost here

johanhelsing commented 1 year ago

I also get some vertical offset weirdness happening with .kttf. Happening on windows and firefox at least:

kttf: image

kayak_font: image

StarArawn commented 1 year ago

I also get some vertical offset weirdness happening with .kttf. Happening on windows and firefox at least:

kttf: image

kayak_font: image

This happens because the positioning in the font sdf generation is wrong. It seems to be different per font. I did add an offset_x and offset_y as a work around until I can fix it.

StarArawn commented 1 year ago

Any clue whats happening here? Wish I had more info to debug with but I am lost here

I'm not sure I'll try to take a look soon.

AnActualEmerald commented 1 year ago

I'm getting the same visual noise on kttf fonts, and it seems to be related to the font size somehow.

The default roboto font from this repo with size set to 20.0 in the TextProps 20.0px size

The same font with size set to 15.0 15.0px size

This happens for me in both wasm on firefox and native on Fedora Linux under Wayland

johanhelsing commented 1 year ago

I also have the white stripes issue only on some font sizes:

kayak_ui_text_issues

It's consistent across firefox, chrome and native windows. It only seems to happen on non-hidpi screens.

StarArawn commented 1 year ago

Can you see if this PR fixes things? https://github.com/StarArawn/kayak_ui/pull/221