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

[chanagaray]

@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.

[soupermkc]

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)

[DevScholar]

I suggest using W95Font instead of Pixelated MS Sans Serif to improve text rendering issues. Below are screenshots of the two fonts on Microsoft Edge 135.0.3179.98 running Windows 11 24H2.
Screenshots of Pixelated MS Sans Serif:

Screenshots of W95Font:

[Moomoobeef]

I'm working on (just started actually) a fork of 98.css that aims to create the visual style of CDE instead. I noticed this issue as well, and I did find a solution that solves sub-pixel AA on most browsers (not firefox sadly)

This does not solve AA entirely, and text that is not aligned to the pixel grid will still have aliasing artifacts. Fortunately it makes them grey and not yellow/blue, but I still don't have a solution to it. I made an issue on my repo where I outlined my ideas though that I'm going to work on.

If I find a solution, I will be sure to come back here and make a pull request, but in the meantime I don't claim ownership over those ideas or the aforementioned sub-pixel AA trick, so feel free to work on those here. Best of luck, cheers.