fyr.io

Back in May, a reader(! There's at least one!) emailed me about an issue they had noticed when reading the content on this website.

Thank you, again, for letting me know about this issue, dear Reader. I appreciate it a lot!!

Essentially, I hadn't specified a max-width on the site, so those of you lucky folk with a large, high resolution monitor would see monitor-wide paragraphs stretching from the left-most edge aaaalllll the way to the right, which ain't at all easy to read.

I hadn't noticed this myself because I use an old 1920x1080 monitor from... let me look this up... oh. Wow! Okay, late 2009! ...I really need an upgrade.

But, I immediately understood the issue and excitedly replied, thanking them for the valuable input. I slapped together some quick CSS to limit the width of the content but it wasn't pretty.

In fact it was broken. Again, my crappy old 2009 monitor tricked me into benightedness. I hadn't realised that, whilst the site looked fine enough on my monitor and on smaller screens, on wider screens, everything under the menu was stuck to the almost-but-not-quite-all-the-way-left. Oops.

Yes, it has taken over two months to get there, but I have finally fixed it. Properly. And whilst I've gone a bit wider than their suggested max-width value, I am hopeful that they, and you, are now more comfortable when reading stuff on here.

I think. I mean, short of zooming out I can't test it as I haven't got a monitor younger than 15 years old, so let me know if it hasn't worked I guess!

Oh, I've also taken the opportunity to make a couple other CSS changes, one of which is minor (fixing some code block stuff) but the other I wanted to mention and perhaps, if another reader finds themselves here with the time to share their opinion, let me know what they think.

Since I (re)built this site I've used text-align: justify; for all the paragraphs. There's a demo here on the MSDN website that nicely demonstrates what it does, but for those of you who don't want to click through, it essentially forces the left side of a line of text to line up with the left-most side of the container, fit as many words in as it can (by growing or shrinking, to a limit, the spaces between the words) and then ensure the end of the right-most word is right up against the right side of the container.

This is generally fine (and it's what you see in newspapers) however every once in a while you'll notice a line of text that has very few words in it and huuuge spaces between the words that are there. This becomes a way more common and prominent occurence on smaller screens.

I recently learned of a fix for this, which is to use the relatively new hyphens CSS property, with the value auto. This tells the browser to fit in a bunch of words to a line, the same way as before, but to fit that too-long word at the end, break it up at a suitable place and stick a hyphen in there, drop to the next line, then continue that word.

The upside, for me, is that it allows me to keep justified text but without it looking ugly in places. However the obvious downside is a whole load of hyphens at the end of a line, and more so on smaller screens like phones.

Despite preferring this to plain-ol' justified text, I'm not entirely sold on it as yet. What do you think? Does it work? Is it hard to read? Should I not justify my text? Let me know.