3 ms·

I haven't looked through fully to make sure it has no ill effects, but if you add to the css on p: text-align: justify; text-justify: inter-word; you sh

I haven't looked through fully to make sure it has no ill effects, but if you add to the css on p: text-align: justify; text-justify: inter-word; you should get what you're looking for. At least it worked in Firefox inspector.

jessaustin 6y ago
Haha we always reach for javascript first.
chrismorgan 6y ago
Don’t think I’ve ever seen anyone suggest setting text-justify. It’s one of those properties that I could imagine having been used in anger and with cause (justifiedly :P) less than a hundred times in total, though the true number is probably higher than that. Anyway, in this case it won’t change anything, because the text is English, and the default value of auto will be equivalent to inter-word. (If the text was Japanese, it would actively harm things, because auto would be equivalent to inter-character, and you’d mess that up.) Anyway, in all current browsers, `text-align: justify` does greedy text layout, where it fits as many words in each line as it can before wrapping. This is technically trivial, but visually inferior to Knuth-Plass line breaking, which tries to find the most visually-pleasing place to break lines. Look at the screenshots of https://github.com/robertknight/tex-linebreak https://github.com/robertknight/tex-linebreak to see the difference. It can be rather stark.
- cosmojg 6y ago
  Are there any implementations of Knuth-Plass line breaking in HTML or CSS libraries? Maybe in a static site generator?
  - mpetroff 6y ago
    It's possible, but the markup is very, very messy. I made a proof-of-concept by hand a couple months ago [1], but it would require quite a bit more work to automate it. It's probably best to just wait for browsers to implement CSS Text Module Level 4, which includes a property for enabling use of better line breaking algorithms. [1] https://mpetroff.net/files/pre-calculated-line-breaks-demo/ https://mpetroff.net/files/pre-calculated-line-breaks-demo/
- pgcj_poster 6y ago
  I think text-justify is fine as long as the text width is somewhat wide (>72 characters) and it's inside a @supports(hyphens: auto). It's not as nice as TeX, but it's fast and Good Enough.

jessaustin 6y ago

Haha we always reach for javascript first.

chrismorgan 6y ago

Don’t think I’ve ever seen anyone suggest setting text-justify. It’s one of those properties that I could imagine having been used in anger and with cause (justifiedly :P) less than a hundred times in total, though the true number is probably higher than that. Anyway, in this case it won’t change anything, because the text is English, and the default value of auto will be equivalent to inter-word. (If the text was Japanese, it would actively harm things, because auto would be equivalent to inter-character, and you’d mess that up.) Anyway, in all current browsers, `text-align: justify` does greedy text layout, where it fits as many words in each line as it can before wrapping. This is technically trivial, but visually inferior to Knuth-Plass line breaking, which tries to find the most visually-pleasing place to break lines. Look at the screenshots of https://github.com/robertknight/tex-linebreak https://github.com/robertknight/tex-linebreak to see the difference. It can be rather stark.

cosmojg 6y ago
Are there any implementations of Knuth-Plass line breaking in HTML or CSS libraries? Maybe in a static site generator?
- mpetroff 6y ago
  It's possible, but the markup is very, very messy. I made a proof-of-concept by hand a couple months ago [1], but it would require quite a bit more work to automate it. It's probably best to just wait for browsers to implement CSS Text Module Level 4, which includes a property for enabling use of better line breaking algorithms. [1] https://mpetroff.net/files/pre-calculated-line-breaks-demo/ https://mpetroff.net/files/pre-calculated-line-breaks-demo/
pgcj_poster 6y ago
I think text-justify is fine as long as the text width is somewhat wide (>72 characters) and it's inside a @supports(hyphens: auto). It's not as nice as TeX, but it's fast and Good Enough.