blurry text?

[frogmoji]

i've noticed that the text goes blurry in places, and i'm not sure how to fix it. i don't think it's a problem with my coding, as it happens even with very basic text boxes. has anyone found a fix for this?

[spencerflem]

I've just gone through the same thing. This happens when the text does not start exactly at a pixel offset. Be careful about using center and padding in any unit other than pixels

[juanigaray]

@frogmoji Hi! Was spencerflem's answer useful? Do you think it would have been useful to have this problem documented?

[909oce]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

[spencerflem]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

By chance are you viewing on a screen with the display scale set to > 100%? That's the other thing I've found that reliably causes blur, but its more hassle to compensate for

[909oce]

was a fix for this ever found? i use pixel padding but it still happens, sometimes it randomly goes from normal to blurry mid sentence.

By chance are you viewing on a screen with the display scale set to > 100%? That's the other thing I've found that reliably causes blur, but its more hassle to compensate for

No it's set to 100%. The slight workaround I'm using is adding margins on text where its blurry between 0.1px and 0.5px. It ever so slightly shifts stuff into focus.

[Petally]

This is to do with subpixel rendering of the font. Usually, subpixel rendering makes fonts look better, however, in pixel fonts it makes the font look way worse. I've found a hacky workaround. Apply this css rule to any text you have:

contain: paint;

This will make the font render in whole-pixel numbers... However, any descendants of the element with this rule will not be painted outside the element's boundaries.

[SupahMario]

Yeah, the font has anti-aliasing enabled (plus subpixel rendering) when it really shouldn't. This isn't the first time we've seen this before either -- the Windows 93 project has the same issue with how it displays it's font.
98 by default doesn't have font anti-aliasing. While Second Edition does add an option for it, it only applies the greyscale method to large enough fonts in a non-pixelated form.
So the main issue is anti-aliasing is being applied to a font that isn't built for it. It'd probably display fine in non-standard font sizes if aliased rendering is applied to a non-pixelated version of the font (as the lack of anti-aliasing would make it appear pixelated)