98.css
98.css copied to clipboard
jdan
anti-aliasing suggestion
It's actually possible to remove anti-alias, although it can screw the text up if you zoom in.
https://stackoverflow.com/a/66657150/3082553
DEMO: https://codepen.io/nathnolt/pen/mdpKBoN
As you can see from the attached screenshot, the effect on Android is exactly the opposite. The text without the crispify looks much better and readable.
On Sun, Apr 10, 2022, 12:54 nathnolt @.***> wrote:
It's actually possible to remove anti-alias, although it can screw the text up if you zoom in.
https://stackoverflow.com/a/66657150/3082553
DEMO: https://codepen.io/nathnolt/pen/mdpKBoN
— Reply to this email directly, view it on GitHub https://github.com/jdan/98.css/issues/125, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASUQOYEWGL4A3NJHO4T6JBDVEK6QVANCNFSM5TAXB4MA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
I guess this doesn't work with email, here you go
Yeah, it's zoomed to a different level. I think that android does either by default, or from the meta viewport ( ) code. This probably could be fixed. But yeah, the solution is quite hacky. For all the browsers. like if you zoom in with Chrome, using ctrl+scroll it also will look bad in the same way.
I forked the codepen and tested longer runs of text, found it became ugly (as expected), but also found a preliminary solution for that, adjusting word-spacing. (I don't know if letter-spacing would be more appropriate, and I didn't play around with word-spacing values because my tweak actually worked right away, surprisingly!) I would hope that there's some metric in the font itself that's inaccurate and can be modified to fix the drift, but, if I look at Firefox, it doesn't want the word-spacing tweak, only Chrome wants the word-spacing tweak.
I also provided a (partial) solution for the ugly zoomed text. You can use media queries to detect the device pixel ratio, and apply the filter only if it's 1. This also lets you swap out the font with a non-pixelated version, if desired. Obviously this doesn't give you a nice pixelated font when zoomed in (or on all devices), but it can prevent the filter from degrading the experience (except in some inevitable exceptional cases.)
The low down is that this could kind of work, but it will need an adjustment dialog like Windows's ClearType. And this will still run into problems with centered text, and nesting in various layouts.
I think that the only way to make it work consistently, is to change the entire codebase to only allow scaling values of integers, either for everything, or for just the text. This is most likely outside of the scope of 98.css, but maybe something like this could be inside of the scope of a classic windowing library using JS.
I'm gonna close this discussion as stale but please feel free to submit a PR if you believe you have a fix for at least some cases.
