I don’t mind the hyphenation [1]; it’s the weird gaps that makes justified text look odd. I think Safari looks a lot better than Chrome here.
I mean, the Gutenberg Bible was justified. On my Kindle, I read justified. Every paper book. Controlled outputs. It’s just on the web that, as they say, the results are unpredictable.
[1] FWIW, when I learned to write I would hyphenate “all” the lines, like I was trying to not waste any paper
Modern paper books are using an algorithm for text layout that’s less greedy and more backtracking. This means that justified text typeset with InDesign or LaTeX looks substantially better than most web browsers (which use greedy algorithms in service of faster page loads).
The HTML/CSS spec doesn’t preclude alternative text layouting algorithms, and there are tools like PrinceXML for Books which implement some of those tricks (incurring something like a 3x slowdown in rendering time for my use cases).
I’ve been curious about how well one could precompute typesetting information for webpages and apply it in a progressively enhanced way, like providing hints to the browser for at least some predetermined widths using soft hyphens and non-breaking spaces.
Hyphens were meant to save paper & space. In the digital world to get more space, what you do is scroll. There’s so many visual issues with justified text while CSS doesn’t have proper page layout engine tooling to do variable tracking for justified text to look more natural—nor would we want to spend more CPU cycles trying to calculate the optimal spacing to make less lakes & rivers since viewport sizes are fluid unlike the page of a magazine.
The article’s conclusing is mostly correct (use start justification since not all languages are left-aligned or even top-aligned), just use the default justification unless you have a good reason not to & should never be used for body copy in a blog post or similar. Where to use justified text & hyphens? There are some@media print styles it makes sense…
but non-justified text has (to me, visually) an issue on 99% of the lines. e.g. I’d much prefer reading these comments justified, it just looks horrible like most websites as it stands.
I am grateful for userStyles so I can unjustify all of these sites that conversely look broken to me with the lakes / rivers. My typography education makes me shudder at the lack of readability on phones & long, non-breaking inline code blocks.
Indeed. Even print newspapers and the New Yorker suffer from rivers and/or awkward hyphenation, and they have the advantage of being able to make manual adjustments. Lest anyone misconstrue my posting on this topic as an endorsement for justified text, I would hope that people would read the article carefully, because it does not. My takeaway is, if you have to do it (and you probably don’t), at least do it right.
The cross-browser inconsistencies come down to choosing when to hyphenate, and this can be manually controlled. I bet you could get more consistent results (and avoid the dependency on brand new CSS) by preprocessing text to insert soft hyphens.
Specifically, I’m thinking about his narrow Chrome window example, where the text layout would benefit from being able to hyphenate that final “con-versations”, and for some unknown reason Chrome chooses not to do so. I don’t understand why, because a few lines above in the screenshot, Chrome hyphenates that exact same word in the exact same place. But I can repro the issue by cranking up the font size in his CodePen, and when I manually edit the final word to con­versations the issue goes away.
I think the “correct”/pragmatic thing is what the author himself recommends: default to left-aligned text, at least for the time being. But I can imagine a static site generator that as one of its text processing passes (rendering Markdown, etc) strategically inserts ­ into long words.
The author concludes that left-aligned text is still a better default, so i’m not surprised the article uses that:
Left-aligned text will continue to be my recommendation and default approach. It’s more flexible and predictable when it comes to varying line lengths and content sizes and does not rely on automated hyphenation to maintain readability.
I use justified text In the experimental web versions of my papers to preserve the feeling of the research article. Coming from the land of TeX, the results are expectedly disappointing.
I read somewhere, sometime, that a new justification primitive is coming to CSS that is closer to the Knuth-Plass algorithm, but I have not been keeping up with the developments.
Good question. Looks like hyphenate-limit-charsisn’t supported by Safari or Firefox yet. Feature queries would let you conditionally apply justified text based on support. Speaking for myself, I would prefer to have fairly consistent typographic treatment across browsers and wait to justify the text until that feature had adequate cross-browser support.
Justified text also is an accessibility issue, enough that I override text justification in my browser to avoid it and prefer breaking some websites than not being able to orient myself in long paragraphs.
With other arguments given in the post and other comments, I don’t think it’s reasonable to default to justified text on the web.
In 2 words: the start of line being at the same place makes it easier to find it when scanning, and the end of line being at different places makes it easier to differentiate lines. Hyphenation makes it hard to figure what the cut word even is. Uneven whitespaces make it hard to scan the next word predictably.
The outcome can be, for instance - for me, to skip or jump back when trying to go the next line, needing to consciously stop and find where we were supposed to got, or to consciously work out what two halves of an hyphenates word make up by e.g. writing it whole somewhere.
I don’t mind the hyphenation [1]; it’s the weird gaps that makes justified text look odd. I think Safari looks a lot better than Chrome here.
I mean, the Gutenberg Bible was justified. On my Kindle, I read justified. Every paper book. Controlled outputs. It’s just on the web that, as they say, the results are unpredictable.
[1] FWIW, when I learned to write I would hyphenate “all” the lines, like I was trying to not waste any paper
Modern paper books are using an algorithm for text layout that’s less greedy and more backtracking. This means that justified text typeset with InDesign or LaTeX looks substantially better than most web browsers (which use greedy algorithms in service of faster page loads).
The HTML/CSS spec doesn’t preclude alternative text layouting algorithms, and there are tools like PrinceXML for Books which implement some of those tricks (incurring something like a 3x slowdown in rendering time for my use cases).
Interesting, I hadn’t seen that web rendering system.
For anyone curious about seeing TeX’s justification algorithm on webpages, I’ve used this bookmarklet occasionally: https://github.com/robertknight/tex-linebreak
I’ve been curious about how well one could precompute typesetting information for webpages and apply it in a progressively enhanced way, like providing hints to the browser for at least some predetermined widths using soft hyphens and non-breaking spaces.
Hyphens were meant to save paper & space. In the digital world to get more space, what you do is scroll. There’s so many visual issues with justified text while CSS doesn’t have proper page layout engine tooling to do variable tracking for justified text to look more natural—nor would we want to spend more CPU cycles trying to calculate the optimal spacing to make less lakes & rivers since viewport sizes are fluid unlike the page of a magazine.
The article’s conclusing is mostly correct (use start justification since not all languages are left-aligned or even top-aligned), just use the default justification unless you have a good reason not to & should never be used for body copy in a blog post or similar. Where to use justified text & hyphens? There are some
@media printstyles it makes sense…but non-justified text has (to me, visually) an issue on 99% of the lines. e.g. I’d much prefer reading these comments justified, it just looks horrible like most websites as it stands.
I may just be old, but a ragged right margin doesn’t look published to me. It looks like a draft, or a piece of homework.
I am grateful for userStyles so I can unjustify all of these sites that conversely look broken to me with the lakes / rivers. My typography education makes me shudder at the lack of readability on phones & long, non-breaking inline code blocks.
Indeed. Even print newspapers and the New Yorker suffer from rivers and/or awkward hyphenation, and they have the advantage of being able to make manual adjustments. Lest anyone misconstrue my posting on this topic as an endorsement for justified text, I would hope that people would read the article carefully, because it does not. My takeaway is, if you have to do it (and you probably don’t), at least do it right.
I think “even” is the wrong word. IME newspapers are horrible on this front, compared to what you’d get in a fully justified book or journal article.
The cross-browser inconsistencies come down to choosing when to hyphenate, and this can be manually controlled. I bet you could get more consistent results (and avoid the dependency on brand new CSS) by preprocessing text to insert soft hyphens.
Specifically, I’m thinking about his narrow Chrome window example, where the text layout would benefit from being able to hyphenate that final “con-versations”, and for some unknown reason Chrome chooses not to do so. I don’t understand why, because a few lines above in the screenshot, Chrome hyphenates that exact same word in the exact same place. But I can repro the issue by cranking up the font size in his CodePen, and when I manually edit the final word to
con­versationsthe issue goes away.I think the “correct”/pragmatic thing is what the author himself recommends: default to left-aligned text, at least for the time being. But I can imagine a static site generator that as one of its text processing passes (rendering Markdown, etc) strategically inserts
­into long words.interesting article, but deeply disappointed by the article text itself not being justified
The author concludes that left-aligned text is still a better default, so i’m not surprised the article uses that:
I use justified text In the experimental web versions of my papers to preserve the feeling of the research article. Coming from the land of TeX, the results are expectedly disappointing.
I read somewhere, sometime, that a new justification primitive is coming to CSS that is closer to the Knuth-Plass algorithm, but I have not been keeping up with the developments.
The question is how to disable hyphenation/justified text if the browser doesn’t support
hyphenate-limit-chars: 10;?The article shows an example of that at the end using the
@supportsrule.Good question. Looks like
hyphenate-limit-charsisn’t supported by Safari or Firefox yet. Feature queries would let you conditionally apply justified text based on support. Speaking for myself, I would prefer to have fairly consistent typographic treatment across browsers and wait to justify the text until that feature had adequate cross-browser support.Justified text also is an accessibility issue, enough that I override text justification in my browser to avoid it and prefer breaking some websites than not being able to orient myself in long paragraphs. With other arguments given in the post and other comments, I don’t think it’s reasonable to default to justified text on the web.
Can you elaborate a little on how justified text is an accessibility issue?
There is plenty of docs from varying levels of authority online, but here’s a small dump: https://www.boia.org/blog/why-justified-or-centered-text-is-bad-for-accessibility https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Supplemental_Guidance:_Text_Justification
In 2 words: the start of line being at the same place makes it easier to find it when scanning, and the end of line being at different places makes it easier to differentiate lines. Hyphenation makes it hard to figure what the cut word even is. Uneven whitespaces make it hard to scan the next word predictably. The outcome can be, for instance - for me, to skip or jump back when trying to go the next line, needing to consciously stop and find where we were supposed to got, or to consciously work out what two halves of an hyphenates word make up by e.g. writing it whole somewhere.
Nice article. Good to see an “update” to:
https://alistapart.com/article/the-look-that-says-book/