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

Distorted font with non-standard monitor DPI setting #27

Open
creaothceann opened this issue Jun 20, 2024 · 4 comments
Open

Distorted font with non-standard monitor DPI setting #27

creaothceann opened this issue Jun 20, 2024 · 4 comments

Comments

@creaothceann
Copy link

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

floooh commented Jun 21, 2024

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

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

floooh commented Jun 21, 2024

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

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

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

No branches or pull requests

2 participants