Hacker News Reader

Comment by rayrag | Hacker News Reader

Two tips:

- don't justify text, it doesn't look good and it makes text harder to (https://designforhackers.com/blog/justify-text-html-css/)

- 'On this page' section is too long. And once I scroll down I don't see it anymore so I can't use it for navigation. Look at https://getbootstrap.com/docs/5.0/getting-started/introducti... or https://tailwindcss.com/docs/installation to see how useful can it be.

View on HN

> - 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-...

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.

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

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.

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;  
    }  
    }

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.

Do add, because citation is needed.

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 [3]: https://benjamins.com/catalog/idj.8.2.03sti

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.

> 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.

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).

Using Safari is amateur, the design looks nice.

Ironically I find the first article easier to read when justified (side-by-side comparison at https://ibb.co/9tvZ75W). When not justified the uneven lines get my attention and I'm losing my reading rhythm. As the article lacks a published date, I do not know whether this is result of technology having advanced since. Nevertheless there're spaces that look bad around the images but maybe a better web design could help with this. Also there's the usual lack of any surveys that articles on design tend to have.

The very first support link it gives disproves the article: hyphenation IS widely supported. In my opinion the article reads as if the author collected evidence to support his preference. Now, it does seem as if text justification is a highly subjective matter.

Thank you for the tips. As for justification, I actually compared my "before" and "after" layouts and found the one with justification better for my taste. The link you posted has some very interesting thoughts, though, and certainly justified text on a web page is a completely different level of typography than text justified e.g. in LaTeX.

Maybe it was intentional but bullet points aren't justified although the rest of the text is. Also text looks pretty big for me.

“It’s just bad typography”.

If you want to say that you need to argue against over 100 years of newspaper and book typography.

Granted, this isn’t print, but if you want to make blanket statements like that, you need to defend them against a very long lineage of design.

We aren’t doing text layout for a fixed physical space.

I don’t think it needs any more justification than that.

It was good typesetting. It was probably never good typography.

Why does fixed space make it so that justifying is good and non fixed makes it bad?

Because if it's fixed, can, starting with the first character, go through the text adjusting the space between words and letters (carefully and subtly so that optically it doesn't look as if there has been adjustment unless you look very closely) and swapping out words/changing sentences/re-ordering until the text fits almost perfectly in the space.

(This is also why justification can't ever really _fully_ work on the web in a general sense, can only have an approximation and the question then becomes if it's worthwhile to have that or whether it's just more trouble than it's worth)

In fixed space, like newspapers, human editors would add or remove words in order to make the end result aesthetically pleasing. Non fixed space lacks this feedback loop, so you can end up with text that is both justified and awkward more often.

LaTeX doesn't do any of that and the end result is beautiful. It's even better than what human editors produce.

> any more justification

[flagged]

I think you should justify text. The article you linked is old and hasn't caught up to the development in browsers. It is correct about text being ugly if justified without hyphens but most browsers nowadays support hyphens [0] and have for some time. For a good example of justified text together with hyphens, see: https://www.gwern.net/Holy-wars.

[0]: https://caniuse.com/css-hyphens

When you justify text for print, you almost always have to manually tweak the result to avoid wrong spacing, bad hyphenation, rivers, ... Justified text and automatic layout do not (yet) go hand in hand.

Left aligned text has also its issues but, most of the time you won't notice them on screen.

The article you're linking looks better than average, but it feels a bit too much like a text wall to my eyes... I guess that the lines contain a number of characters and words that is big enough to allow a more even distribution, at the price of longer lines that are less comfortable to read.

For me the rule is still that text that is automatically formatted should be mostly left aligned. But indeed, if you correctly setup the hyphenation, you can produce something that is somehow OK.

I suspect the wall-of-text effect isn’t caused by justification. Gwern is using first-line indents to signal a new paragraph instead of spacing them, as is more usual on the web.

+1 for skipping justification, which universally looks like ass on screens.

“What about books and newspapers?” I hear you ask, to which I reply: print had expert typesetters eyeballing the whole thing…and even then, some books and newspapers look like ass unless you’re squinting from 10ft away.

Trying to make text fit in a box is an aesthetic choice, but it is technically inferior from a readability standpoint. It was usually paired with columns, which improve readability and would do so without justification.

Reply on news.ycombinator.com