Here is the classic rambling:

• Computers used to be slow -> Internet was slow
• Computers are ridiculously fast now, but the internet is still dogshit slow
• Everything is full of javascript and is completely broken without it
• Copious amounts of cookie consent banners
• Using an adblocker is basically mandatory

I'm going to skip all of that and instead just focus on the experience I had when creating this website. So my website was obviously going to be a static one, customized to my liking just by using HTML and CSS.

Most of the design implementation was straight forward: Google how do to x in CSS, copy, and tweak. Repeat until satisfied. I picked out a pixel font (which I got from here) because pixel fonts are incredibly sharp for small text sizes, which is what I prefer. Make the text in a nice "block format" using text-align: justify;, tweak the colors, adjust the whitespace / padding, and that's about it.

It was getting late because this took some time (but it was quite simple) and my vision was becoming blurry - damn, I must be really tired, huh? Time to...

...wait. What the fuck is this? It's a pixel font. Why is it this blurry? And why is it crisp sometimes? Fuck me, time to debug.

• font-weight? Well, the whole block is in the same style, that's not it.
• Am I missing some setting? I don't know, maybe? But I feel like it was sharp before.
• line-height? No effect.
• Checking the ReadMe of the provided web-font-file: I chose the "original" size in pixels, that's all correct.
• Whitespace? Doesn't seem to do much.

So, who was the culprit? It was motherfucking text-align.

How fucking dare I to want my text to fit into a block I guess? Setting it to center or left at least fixes this issue:

Here is another fun one: What is the issue in this code block? Well, the crisp lines are indented using 4 spaces, while the blurry lines are indented using 1 tab with tab-size set to 4. Why did foolish me expect that this would result in the same behaviour? Silly me.

I bet you remember visiting some website which goes "hurr durr browser x is not supported, use browser y instead". I always wondered what the fuck they did in order to achieve this incompatibility in the first place [0].

Anyways, I, in a moment of utter foolishness, opened the same page in chrome/chromium, expecting the result to be the same. Well it... ...just makes everything fucking blurry. You have to be shitting me.

I want to reiterate:

• I have a static website
• I chose a fucking pixel font
• The web is struggling to display the pixels sharply

There has to be some way around, right? Well, there very well might be. I'll have you know that there are non-standard CSS properties which are browser dependent. Two quick thoughts:

1. I hate everything about this.
2. Not a single setting I tried actually fixed the issue, so at this point I don't even know nor care.

While not solving my problem, the stackoverflow posts I stumbled upon are hilarious. The type of workarounds people have found / need to use for their problems are batshit crazy. Other possible solutions include using a fucking javascript framework to render all of your text, because rendering a pixel font requires some advanced software engineering.

The bar is at the bottom, but boy can software limbo.

Update (2022.12.25)

By sheer coincidence I stumbled upon another site which used a pixely-font - and it was looking sharp on both of the browsers I use. Rude. So I did a little more testing...

• Good news: I found what's causing this problem.
• Bad news: It's present in both firefox and chrome.

margin: auto, the thing I use to center text, is causing the problem, which means I'll probably slightly re-design my website in a bit. You can't make this shit up. My working hypothesis is the following: Depending on the width of the browser window, centering the text causes it to be drawn on some subpixel position (instead of snapping to the nearest pixel). On both chrome and firefox, increasing the browser width by a single pixel "toggles" the blurriness.

So why did I not see the issue way earlier on firefox? On my desktop environment, the windows are automatically tiled. Long story short, the window sizes I use on my machine just happened to work out for firefox; pure coincidence. But, given the same window size, the "drawable"/canvas size of chrome is slightly smaller due to the scrolling bar:

I hate everything. So I can forget about centering the text without encountering this issue because I still do not want to use javascript nor change to a non-pixely font.

So, for a fixed window size, I can shift the whole thing by half a pixel via CSS to toggle which browser I want to fuck with. Apparently I can even retrieve / calculate the subpixel position of the text by using calc(), which still is "vanilla" CSS. But this function is just exposing the operators * / + - which makes it difficult to detect and thus fix this subpixel bullshit.

But here is a fun fact: In a few years, this issue might be fixable. Because CSS has an experimental round() function, which (I think) could be used to round the text position to the nearest pixel and thus avoid this blurry mess. As of writing, only Safari and the Firefox Beta support this feature. It sounds and is incredibly stupid, but, with a snarky undertone, I can confidently say:

The technology just isn't there yet.

Update (2023.01.25)

I updated my shit, and now it's blurry again.

Admittedly, it's not as bad as previously. I would still prefer the webbrowsers not touching my fucking pixels though. And this time I can't seem to turn it off using CSS alone. So I guess: Get fucked?

Now, dont' get me wrong: I understand the appeal of saying: "Here is just text, now just let the viewer style it how he wants". But the web doesn't really function like that. Even worse, I'm apparently not allowed to style it using CSS either.

God I fucking hate software updates. Destroy all software. Maybe I should just switch to Gopher or something.