5 ms·

> - don't justify text, it doesn't look good It certainly does look good for books and for LaTeX documents though. For the Web the problem is that it requires

> - don't justify text, it doesn't look good It certainly does look good for books and for LaTeX documents though. For the Web the problem is that it requires learning several new CSS properties and learn about some typesetting issues ("rivers" and "ladders"). The following does definitely look very good to me: https://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4 https://generatedcontent.org/post/44751461516/finer-grained-... We're 25 years in, at some point browsers have to get a proper hyphenation and justification algorithm. With a proper H & J algo and high DPI screen, I don't see why it couldn't look great.

The_rationalist 5y ago
Maybe it require some training but on my phone I find this example low readable, my speed of reading is slowed and my cognitive overhead/eye movements are increased. To me it's the kind of UX thing that look good if you don't look at it well but once you have to it's just plain inferior.
inamiyar 5y ago
Iirc the reason browsers don't have knuth-plass justification is because it runs in O(n^2), but even so my research tells me justification reduces retention because your mind retains the "shape" of ragged text. I don't have the article on hand but if I find it I'll add it later.
- bruce343434 5y ago
  Do add, because citation is needed.
  - inamiyar 5y ago
    A bit late but [1] shows equal comprehension between justified and ragged-right but much faster reading speeds with ragged right (post-stroke patients in Russian). [2] shows slightly faster reading speed with justified text but less comprehension on a delayed test (also in Russian). [3] has no empirical data but cites articles and claims comprehension is equal between the two formats but ". Poor readers, however, read unjustified text more quickly than justified text." I would say it's not overwhelming, but I'd go with ragged-right to be safe. [1]: tug.org/TUGboat/tb38-2/tb119veytsman-justify.pdf [2]: https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf [3]: https://benjamins.com/catalog/idj.8.2.03sti https://benjamins.com/catalog/idj.8.2.03sti
arp242 5y ago
Previously, people have mentioned that good hyphenation is hard in HTML/CSS due to the way the box model works: https://news.ycombinator.com/item?id=19473277 https://news.ycombinator.com/item?id=19473277 I haven't looked in to this, so I can't judge the veracity of this claim. However, in general I find that hyphenated text on screens never looks quite right to me, even when done right (even though it looks fine in newspapers and magazines). I'm not entirely sure why; I think that it's because on the web lines tend to be a lot longer than in newspapers and magazines, which are usually very narrow columns by comparison. Or maybe it has to do that the screen is typically further away from you. Or maybe both, or something else entirely. I do think it's valuable to have, especially for narrow columns (e.g. sidebars) or smaller screens. But it's not something I'd want to use on my website like in the example you mentioned.
- bruce343434 5y ago
  I recently redesigned my personal website and it looks very fine. The trick is to actually learn about the tricks you're using, as with everything in life. Oh, and you need to set `<html lang='??'>` . #content { font-family: "AtkinsonHyperlegible", sans-serif; text-rendering: optimizeLegibility; font-size: 0.5cm; line-height: 1.4; max-width: 70ch; } @media screen and (min-width:70ch) { #content { word-break: break-word; text-align: justify; text-justify: inter-character; hyphens: auto; hyphenate-limit-lines: 2; } }
finiteseries 5y ago
That looks absolutely terrible and amateurish on iOS Safari, strengthening the point about browsers needing a consistent justification engine. It actually distributes space between characters rather than words as is the norm in print (and is partly why books and magazines don’t look like a teenage yearbook editor’s first day with InDesign).
- open0 5y ago
  Using Safari is amateur, the design looks nice.
cyberdelica 5y ago
> The following does definitely look very good to me [...] Here's another vote for looking totally borked. I don't know if it's because I've disabled javascript, or something else - but, no.

The_rationalist 5y ago

Maybe it require some training but on my phone I find this example low readable, my speed of reading is slowed and my cognitive overhead/eye movements are increased. To me it's the kind of UX thing that look good if you don't look at it well but once you have to it's just plain inferior.

inamiyar 5y ago

Iirc the reason browsers don't have knuth-plass justification is because it runs in O(n^2), but even so my research tells me justification reduces retention because your mind retains the "shape" of ragged text. I don't have the article on hand but if I find it I'll add it later.

bruce343434 5y ago
Do add, because citation is needed.
- inamiyar 5y ago
  A bit late but [1] shows equal comprehension between justified and ragged-right but much faster reading speeds with ragged right (post-stroke patients in Russian). [2] shows slightly faster reading speed with justified text but less comprehension on a delayed test (also in Russian). [3] has no empirical data but cites articles and claims comprehension is equal between the two formats but ". Poor readers, however, read unjustified text more quickly than justified text." I would say it's not overwhelming, but I'd go with ragged-right to be safe. [1]: tug.org/TUGboat/tb38-2/tb119veytsman-justify.pdf [2]: https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf [3]: https://benjamins.com/catalog/idj.8.2.03sti https://benjamins.com/catalog/idj.8.2.03sti

arp242 5y ago

Previously, people have mentioned that good hyphenation is hard in HTML/CSS due to the way the box model works: https://news.ycombinator.com/item?id=19473277 https://news.ycombinator.com/item?id=19473277 I haven't looked in to this, so I can't judge the veracity of this claim. However, in general I find that hyphenated text on screens never looks quite right to me, even when done right (even though it looks fine in newspapers and magazines). I'm not entirely sure why; I think that it's because on the web lines tend to be a lot longer than in newspapers and magazines, which are usually very narrow columns by comparison. Or maybe it has to do that the screen is typically further away from you. Or maybe both, or something else entirely. I do think it's valuable to have, especially for narrow columns (e.g. sidebars) or smaller screens. But it's not something I'd want to use on my website like in the example you mentioned.

bruce343434 5y ago
I recently redesigned my personal website and it looks very fine. The trick is to actually learn about the tricks you're using, as with everything in life. Oh, and you need to set `<html lang='??'>` . #content { font-family: "AtkinsonHyperlegible", sans-serif; text-rendering: optimizeLegibility; font-size: 0.5cm; line-height: 1.4; max-width: 70ch; } @media screen and (min-width:70ch) { #content { word-break: break-word; text-align: justify; text-justify: inter-character; hyphens: auto; hyphenate-limit-lines: 2; } }

finiteseries 5y ago

That looks absolutely terrible and amateurish on iOS Safari, strengthening the point about browsers needing a consistent justification engine. It actually distributes space between characters rather than words as is the norm in print (and is partly why books and magazines don’t look like a teenage yearbook editor’s first day with InDesign).

open0 5y ago
Using Safari is amateur, the design looks nice.

cyberdelica 5y ago

> The following does definitely look very good to me [...] Here's another vote for looking totally borked. I don't know if it's because I've disabled javascript, or something else - but, no.