floooh / v6502r

visual6502 remixed
296 stars 30 forks source link

Distorted font with non-standard monitor DPI setting #27

Open creaothceann opened 2 weeks ago

creaothceann commented 2 weeks ago

Whenever I move the browser window containing visual6502r to a monitor with a DPI setting <> 100% (via "Settings | Display | Scale & layout") the font becomes distorted, making it very unpleasant to read.

OS: Windows 11 Pro 23H2 browsers: Firefox 126.0.1 / Chrome 126.0.6478.115 monitor 1: size=3840x2160, scale=150% monitor 2: size=2560x1440, scale=100%

monitor 1: visual6502r_1

monitor 2: visual6502r_2

floooh commented 2 weeks ago

Yeah that's a known issue and unrelated to the v6502r implementation. With fractional scaling, one can either have crisp text with scaling artifacts, or blurry text. Does it looks better when starting with this URL (this activates "highdpi" mode which then takes devicePixelRation into account, so if the fractional scaling is correctly communicated to the browser it might help a bit:

https://floooh.github.io/visualz80remix/?highdpi

The other option would be to switch to a different font and render the text with linear filtering, like I'm doing in this sample:

https://floooh.github.io/sokol-html5/imgui-highdpi-sapp.html

creaothceann commented 1 week ago

The first link looks basically the same; the second link doesn't have the problem.

Would it be possible to add a theme and/or checkbox that enables the font and filtering? I didn't see an option for that in the menu.

floooh commented 1 week ago

Deleted a previous comment (I thought it's the highdpi setting that looks good, not the different font and filtering).

Just plugging the font from the second demo into the app won't work unfortunately because it needs to be a monospace font, otherwise formatting in the text editor, and the layout in the debugging editor will break. I'll need to check how it looks keeping the default monospace font but enabling high-dpi and linear filtering for the text rendering. It will definitely look blurry but that may be the less bad option for fractional scaling. I won't have time for this anytime soon though, but I'll keep the ticket open as reminder.

creaothceann commented 1 week ago

Thanks! While I can just use the second monitor (or a VM...) it will probably matter for other users.