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

Text is illegible on a 5k screen #56

Open
jackmcdade opened this issue Apr 24, 2020 · 12 comments
Open

Text is illegible on a 5k screen #56

jackmcdade opened this issue Apr 24, 2020 · 12 comments

Comments

@jackmcdade
Copy link

It's so razor thin I can't really read it anymore.
image

@brantwedel
Copy link

Maybe you can try setting a scaled resolution of 640x480 ;-)

@alete89
Copy link

alete89 commented Apr 26, 2020

1st world problems

@jackmcdade
Copy link
Author

@alete89 Just saying, it was fine before and now it's not. I don't need to use it, just was being helpful.

@jdan
Copy link
Owner

jdan commented Apr 27, 2020

@jackmcdade wanna give me a full-size screenshot? Unsure what a fix might look like but def wanna look into it

@jackmcdade
Copy link
Author

Sure thing! I don't know if there's much to be done, or if it will even be obvious how hard it is to read if you're not on a 5k monitor, but here you go. FYI, I'm using the LG 5k for Macs.

jdan github io_98 css_

@jdan
Copy link
Owner

jdan commented Apr 27, 2020

Unfortunately the screenshot doesn't do it justice. Will wait to see if any onlookers have this monitor and may know of a fix.

@bergamin
Copy link

You may just need to set your monitor to 800x600 🤣

@padraigfl
Copy link

Isn't this just the difference between the width of a pixel on a 15" 640x480 Packard Bell (52PPI) vs a 27" 5120x2880 iMac (217PPI)

Possible fixes:

  • marvel at how far we've come
  • transform scale at top level if over a certain screen width (think I done this with one thing, everything else needs to be aware of it though)
  • maybe just double the size of everything if the window width is in excess of 2K

@piranna
Copy link

piranna commented Apr 28, 2020

Probably there's a way to get and use actual pixel density, similar to how 2x images are being downloaded but for all the page content? And if so, does we want anti-alised text, or razor edges?

@Zlitus
Copy link

Zlitus commented May 14, 2020

Even on a MacBook Pro in pixelRatio *2, some texts are very difficult to read (Especially the labels of the dropdown menus and the <details bold texts). Don't know if related.

@nszceta
Copy link

nszceta commented May 23, 2020

HiDPI scaling is a persistent Windows platform issue that remains unresolved for older programs to this day.

Today, many existing programs have been updated with APIs that allow them to properly scale their interface designs to maintain usability on high-DPI displays. Microsoft didn’t implement anything like that on Windows. That means if the app or program doesn’t know how to scale for high-DPI displays, then you’re out of luck and it will display pixel for pixel. With a 300 dpi pixel density, those UI designs made for 72 pixel per inch displays would shrink so that every normal inch of that interface would now fit into about a quarter of an inch on your screen.

Source

@Zlitus
Copy link

Zlitus commented May 24, 2020

@nszceta : Yes I understand very well this, but it is completely unrelated. What you quote is a text explaining than apps have to take care of HighDPI to adapt their interface on Windows;
And what we say is than there is a readability problem with the font in some case with 98.css.

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

9 participants