High DPI / retina screens
s9w opened this issue · comments
There were mentions of rendering issues with Retina / high DPI screens in the HN thread: https://news.ycombinator.com/item?id=9998193
I don't have a 4k Monitor or something equivalent to test. My attempt at fixing this with the srcset attribute is hosted here: http://www.eatginseng.com/font_testing/ . It delivers an upscaled image to the "2x" target. Note that the zoom function in the compare part has no effect for those screens since that would require even more images (a 4x zoom). Maybe I'll add that later.
If someone with retina and/or 4k displays could report if the images are still too small and/or blurry I would be very glad.
+1 for that.
looks the same. you can't upscale 1x to 2x, you have to render 2x pixels.
Since you're doing screencaps in windows, i'm guessing the best way you can attack it is to render at double the font point size. Hope that helps!
So still blurry? Could you make a screenshot? As long as the browser is obeying the srcset stuff it should use the point-upscaled version.
I agree that the best way would be to actually provide much bigger font sizes as you would use on such a high resolution. But font sizes are fixed for bitmap fonts, so I'll have to think about that. Maybe 2x-upscale bitmap fonts and properly screenshot the others.
current site:
test site
yeah you won't be able to do anything with bitmap fonts, but i dont think anyone with high DPI will care about them anyway
By now both sites have the same upscaling. Thank you! That's actually working exactly as intended, even if it's only a makeshift solution.
Yeah I agree on the bitmap fonts. I'll probably add another set of much bigger font sizes as an option then. Any size preferences?
Maybe you can add "real retina" example images besides pixelated ones.
I've now added a big font size for every non-bitmap font. There's a global switch in overview mode and is available as a normal size during comparing. It's 20-22 for most fonts, the exact values were hand-picked so all fonts are roughly the same size.
All DPIs are now forced to the same image, so high dpi people should just pick the big size and it should be fine. Does that work for everyone?
Size is OK but the text looks blurry on my machine.
Yoga 2 Pro - 3200 x 1800
Windows 10
Firefox
What browser? Could you post a screenshot?
edit: oh nevermind about the browser
Here's how it looks for me on a macbook pro retina with archlinux under firefox : http://imgur.com/stOwbqy,krylCmk
Well, that's obviously not how it's supposed to look. And at this point I'm kind of out of ideas. On high DPI screens, browsers for some reason like to double the size of images. I've implemented a forced use of non-scaled images with the srcset attribute, but some browsers seem to ignore this.
I've even tried using a canvas to display images, but it's slow and sometimes not at all reacting to a change of image links.
But thanks for the reports, I'll have to do some more digging to come up with a final solution for this.