The web could be so much more beautiful
Back in high school when I was writing essays, my teacher always demanded to use justified text, because simple left aligned or right aligned text looked ugly. Even back then as a totally rebellious teenager, I agreed with her. Print has used it for hundreds of years, why shouldn't we?
The web has always resisted this development because it was difficult. Yes, the css property text-align: justify exists, but browser were always missing the crucial functionality of hyphenating words. That led to very ugly justified texts and so called "rivers" of whitespace because the spaces got so large. Begrudingly, I got used to it.
I was surprised to learn that all major browsers support the new hyphens css property since late 2023. This one adds exactly that crucial functionality. I was stunned and immediately tried it out and oh look, the web is so much more beautiful now.
You can try out yourself here on Tildes! Just right click a comment, click "Inspect" and then when the dev console pops up, add
text-align: justify;
hyphens: auto:
to p, which stands for the paragraph html tag and in which all text posts are rendered on Tildes.
It looks so much better! But I do wonder why it hasn't spread around more in the web. Am I the only one? Am I nitpicky? I feel like the improvement is stark and very good for functionally no extra work. I even installed a browser extension which augments a website's css so I could automatically do it on most websites.
I don't know if I am an outlier, but I hate justified text with every fiber of my being. Splitting words with hyphens on separate lines and random levels of spacing between words makes it incredibly difficult to read. Justification I felt has been solved technically for years, I just assumed we all decided that it was frustrating to read. I've always avoided using justified text my entire life for these reasons.
Anyway, still a cool trick, preferences are preferences.
Its definitely not just you, it is a web accessibility best practice to avoid justified text as it can be difficult to read, sometimes because of the white spaces, sometimes because words end up too close together. I didn't notice hyphenated words as part of the explanation, but I personally would err on the side of caution and avoid unnecessarily breaking up words over lines.
The typographic rivers which are part of this explanation are avoided due to hyphenation. Mind you, it's not perfect. If you try it out on this page, you'll see that the first line of the second paragraph in the post has very large white spaces, which happens because the monospace code segments are not broken up over multiple lines.
But to me the occasional appearance of such a line trumps having to stare at every line being ugly.
You could say it’s… hard to justify these days.
…justification affords cleaner layout at the cost of readability; there’s certainly a place for that but i generally side with readability…
Yup, it doesn't look beautiful to me, it looks chaotic. In this example, to me, the second paragraph reads like someone is out of breath. To some it might look more beautiful, but that seems to be a preference for form over function.
I always prefer to read left-aligned text as well, and make sure to set it this way in all my reports.
Not only I find it more readable to avoid hyphens and have a consistent width of space characters, but I find that the inconsistent right edge of the paragraph helps me follow which line I'm at.
Yep, same. Left aligned text is the only proper way to go.
Something relevant that the WebKit (engine behind Safari, Orion, and GNOME Web) team has been working on (and perhaps the Blink and Gecko teams too by now, I haven’t checked) is the
text-wrap: pretty;CSS property which addresses this kind of ugliness on the web. They wrote an interesting blog post on the topic.https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/
That is awesome! A properly set, left-aligned paragraph beats justification almost every time, so I'm glad to see a nice implementation of that.
This is quite cool, thanks for sharing! I'm going to pick the brains of some of my designer and developer colleagues about these to see if it's something they consider using.
Thank you for this! This is exactly the sort of reason why I use Tildes (but no other social media). You figured out something cool. I tried it out. I like it so much I just updated my personal website to use it.
Not any more!
I suspect this hasn't caught on because most web developers don't care that much about the appearance of text beyond fonts. And a lot of frontend frameworks try to abstract away this sort of formatting because it's usually a content concern, not so much a concern for developers. But I love that you noticed this and shared it. Thanks again.
Yay!
I picked up the extension "Stylus" and put exactly that p tag in there so it gets applied to all websites automatically now.
This is great.
Will have to fall into the "hard disagree" camp on this one, I'm a certified Left Alignment Lover.
Consistency is key for readability, and justification can result in pretty huge changes in word spacing across lines. Even with hyphenation there's still some amount of inconsistency, along with the added inconsistency of words being severed and separated. Especially with mobile interfaces where line width already nears it's lower limit, a person with poor eyesight increasing the zoom on some text could find themselves getting half-words every few lines.
That said, if you want a Tildes-specific tip, change
line-height: 1.5toline-height: 0.to tighten up the leading, it looks much better in my opinion (though, if you use Tildes' default zoom on desktop you might find it too dense).I just tried it out and it is interesting. Reminds me of newsprint.
Wikipedia looks incredible with
text-align: justify;. The blockquote. My godt! They should immediately adopt this.However, hyphenated words are less scan/skim-able. That may be one rea-
son why it is not widely used anymore. People might gloss over an impo-
rtant word. It's interesting to see that even the NY Times site does
not use this. I guess the site is mostly pictures now and not real news.
Do they even print real papers anymore?
I'm what you would call a young whippersnapper so I'm used to ragged lines of text already. I prefer the even distances between words. Equidistant spaces. The tradeoff is losing that and it is not worth it. But large blocks of text in the Wikipedia context... it is curious that they don't use it. It really does look better but it is slightly less readable.
I'm wondering if there's an accessibility issue with screen readers. Making sites ADA compliant is important and might win over visual appeal. That's only a guess though.
ETA, also genuinely I don't know where to "add this to p" as I can't seem to find how to edit the thing. This is one of those "i knew html in the day and feel like it's supposed to be obvious but it isn't" things.
Per @lackofaname this is the case but not for screen readers - It's more about its General readability which would include readability by folks with dyslexia or low vision or cognitive disabilities
No, there shouldn't be — the NYT site almost certainly doesn't use it because it's not widely supported enough, yet (someone using a 3-year-old browser still needs to be able to access nytimes.com), and/or because the very, very picky designers that make decisions about how news stories render have decided that the automated hyphenation isn't good enough. In the print paper, hyphenation decisions are reviewed/implemented by humans (!!), and I wouldn't be surprised if they just don't think it's good enough.
Screen readers simply won't "see" the hyphens, though, so that shouldn't be an issue. They get the underlying markup directly (they don't see any of the automatic line wraps, either), and the hyphenation is something that the browser makes decisions about when it's time to render the text, so it doesn't modify the underlying markup!
Oh hey, there is a post above that actually says it is against web accessibility guidelines to use this type of text!
It's just not due to screen readers!
I don't understand from the quote if people find it hard to read justified text in general, for multiple reasons, or if it's specifically because of the rivers of white mentioned in the following sentence, which are avoidable. If it's the latter, then this post is about features that finally fix rivers of white, that issue should not happen anymore, and therefore the recommendation may be outdated.
It might be outdated, but if it's the current ADA website guidance that would be why it's not being used. Even if a new option fixes it. I can see why varied spacing in general could be a struggle for dyslexic folks too, for example but accessible web guidelines aren't my area of expertise/experience in the disability advocacy world.
Here's another article with some more possible issues
Why Justified (or Centered) Text is Bad for Accessibility
That sounds like a decent guideline for people with little knowledge of typography, though I think it goes a bit far in its reasoning - I don't think an average healthy person is going to have issues reading justified newspaper text.
Most current books still use justified text, and so do many magazines and newspapers. It requires some understanding to do it right though - smaller line spacing, appropriate paragraph width (though that's not much different from any other aligned text) and recognizing when the rendering engine sucks and creates issues like making spaces between words too large, not using word breaking hyphens properly, changing spaces between letters instead of just words or other problems. For that reason I think it's a good general recommendation to avoid it for most people.
But we are getting to a point where it's less of a problem - seeing wikipedia with justified text and auto hyphens shows that too much whitespace is no longer an issue for example. And when used by someone who understands typography and therefore how to use justified text carefully, the arguments against justification imply it should be acceptable.
I agree with avoiding centered text though... Because on top of that it's ugly.
I mean they might since they're out of practice. Few people read type that's set the way old newspaper columns were.
But anyway, "healthy" isn't the defining factor of needing accommodations and accessibility is about making sure everyone can engage with it.
It may be something about how webpages don't adapt in an accessible way as they zoom in, where with static text and a magnifier there isn't that problem. The adjustment may be creating too many hyphens or difficult to read ones.
I'm not sure. I don't prefer justified text online and I'm sure there's some sort of reason for that, but I don't really care about my preference that much. I suspect books for example have that careful implementation but maybe not. I don't think most websites do though.
Ah, well there you go! That's good to know, and it does make sense — I can definitely feel additional cognitive load when trying to read, e.g., Tildes with the styles mentioned in this post.
Nah I mentioned only the screen readers so I led you down the narrow road! I tend more to disability rights and physical barriers to access due to my passions and my partner so I don't have expertise in web based accessibility
Cool beans! I wasn't sure but I know we've had a big push on website accessibility and I figured that this could be a reason
Glad to know it is not!
I still can't make the modification but knowing what it looks like I can understand that not everyone will like it/find it appealing. It's not really my thing. I read enough paper that I prefer my web to read closer to physical text and less like newspaper columns did
Counterpoint to hyphenating (or not) is that accessibility practices go beyond considering screenreader compatibility, and still apply to someone reading the words on the screen without assistive tools.
It's not a question I've looked into before, but I wouldnt be surprised if splitting up words across lines using hyphens could impact readability for those with cognitive/learning disabilities. I'd probably err on the side of caution and avoid.
That's a good point! I was being overly narrow in my response — web accessibility is multi-faceted
oh! I can help with this. So if you right-click anywhere and see "Inspect" then it will pop up a big scary box and then you can click the "+" button [hover-text "Add new rule"] on the right-hand side it will let you add a custom CSS rule to the current page.
When you click "+" it will open a textfield in that same area. You can replace the text that it says with "p" then press tab and paste in
text-align: justify;hyphens: auto;and you should be good to go.Note you could also target
*instead ofpto change all elements totext-align: justify;. There isn't a big difference (aside from wasteful compute). Butpis the most common text block in HTML.If you want this to be a permanent rule you could install something like the Stylus addon and add a global style which would look like this:
Ah I was trying to do it on the actual individual paragraph element. Got it. I'll poke at it when I'm at home then.
Like I said, back in my day when I was making my geocities webring page and running my sorority's website in Dreamweaver, I knew how to HTML. It's not relevant to my life nowadays. Shakes cane at cloud
It seems like a quality of implementation issue. It sounds like it works for you, but how good are web browsers at auto-hyphenating in each language? Maybe turning it on in the UI for something like Bluesky or Mastodon would annoy some people?
It sounds promising though.
Yes! I gave a whole presentation on this at work and I've been chasing people to use it more for years!
It's nuts that even "design-forward" outfits like Apple don't use this yet when monks in the 14th century had this figured out in their manuscripts.
I will say the results aren't always "100 percent awesome' and sometimes you can get better results by manually seeding some soft-hyphens in the text but it drives me bonkers seeing everything either left-justified or with huge whitespace rivers when 'hyphens: auto' has been there for at least 5 years now.
I miss easy user stylesheets. Stylus extension is the closest we have anymore.
To be honest, trying it even on a desktop here on a Tildes comment, I don't like how it looks compared to left-justification. Although the massive rivers/etc are not as much of a problem because of
hyphens:auto;it still looks off to my eyes, and a bit harder to read when scanning over it. Something about it feels "less comfortable" to read, in a way that's difficult for me to articulate. I would be distraught if this became the new norm. Things just look oddly stretched out, whereas the "closeness" of the words with left-justification feels way more comfortableTo me it still feels like chasing (arguable) aesthetics over readability, which is a prioritization i personally abhor
Related tom7 video, HIGHLY recommend a watch if you haven't seen it already
This is one of the most hilarious videos I've seen in a long time. Thank you very much for sharing!