Another problem with text rendering that's not mentioned in TFA is hyphenation.
I have a table on a webpage that can have some long text in some cells. I have 2 simple requirements:
# If a word will fit by moving it to the next line, then move it to the next line and do not hyphenate i.e., do not break the word.
# If the word is too long to fit in a single line, then break it up. Hyphenate at will.
There is no incantation combination of CSS properties word-break, word-wrap, overflow-wrap, hyphens and white-space that will do this. In 2023.
I believe word-break: break-word does #1 but it's not hyphenating for me. And MDN says word-break: break-word is deprecated.
What should be done with hyphenation and indeed breaking paragraphs into lines in general is largely just undefined. There are mild movements from time to time, but overall no one’s sufficiently interested in implementing the really good stuff, so we’re left with the simple, easy and bad that everyone has grown used to. I’m glad to say that Chromium has just shipped `text-wrap: balance`, which is at least one step in directions of goodness. I hold out hope that some day some browser will implement a `text-wrap: pretty` backed by something like Knuth-Plass. https://bugzilla.mozilla.org/show_bug.cgi?id=630181 is relevant, shows that some thought has gone into how it could be achieved in Firefox.
And while talking of hyphenation, what happens if you try to hyphenate in the middle of what would otherwise be a ligature? e.g. at “af-fable”. Alas, in this instance no one has got really enthusiastic about fixing it in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=479829, you get the ff glyph split in half, much like the mixed-colour handling shown in this article.
Amusingly, folks usually seem hesitant to go with justified due to fears of "rivers" in the text. I can't claim that won't happen, but it seems largely overblown in concerns.
Picking "affable" was an incredible nerd snipe! I would have split the syllables wrong on that, as I have yet to convince myself that I pronounce "fa" in the middle there.
Similar problems come in when you have words that hyphenate differently depending on their use.
Hyphenation points are a funny thing. People would commonly go for “aff-able” (aff-a-ble), but in such cases, you tend to get better results for reading by splitting in the middle of the repeated letter, or more generally the consonant sequence (af-fa-ble). I’m not certain if this is to do with phonemes (that is, the hyphenation matching how you speak) or to do with aiding with continuing (simply making it easier for you to pick up on the next line); I’ve thought about it a little, but not that much.
There’s a similar but more aggressive form of the problem in lyrics on sheet music, where you’re declaring a hyphenation point between all syllables (though good engraving will avoid placing unnecessary hyphens), and people often break syllables incorrectly or suboptimally. Pulling up one score I noticed this with when I received it last week or so, some examples: strang-ers, runn-ing, en-em-y, anch-or, surr-end-er. I’d split (or hyphenate) them as stran-gers, run-ning, en-e-my, an-chor, sur-ren-der. I’m not certain if I’d always hyphenate and lyrics-syllable-break in the same places, but in the cases I’ve contemplated I would, though I had to think about sur-ren-der versus sur-rend-er for a moment.
Also I can’t say exactly why my mind lighted on the word “affable” (it was the second word my mind came to, after I discarded “affiance”), but you made me think about it more deliberately and then I was curious to see what the first word in a dictionary would be. In my /usr/share/dict/words, the first (excluding proper nouns) is “affability”. (The last is “whiffs”, with “whiffletrees” as the last word I’d maybe consider hyphenating between the fs.)
Sounds like a use case for soft hyphens. If you don’t mind where the words break, you could sprinkle soft hyphens through the text to get it to break more often than the default renderer would otherwise.
Soft hyphens are no use in this case, because browsers take them as a break opportunity of equal standing with a space. In my experience, liberal sprinkling on soft hyphens makes things worse, not better, because you end up with loads of gratuitous hyphens. What’s needed is a different algorithm for breaking paragraphs into lines, something better than the greedy algorithm that all browsers use. Something like Knuth-Plass, which applies a penalty to hyphens so that it’ll use them if the alternatives are bad enough, but won’t be too eager about using them.
I definitely agree that soft hyphens are a simplistic workaround if used in the way I suggested, and are indeed inferior to a complex and well-thought out hyphenation system. Still, if someone is considering `word-wrap: break-word;` for narrow table columns, soft hyphens are worth knowing about.
There is no incantation combination of CSS properties word-break, word-wrap, overflow-wrap, hyphens and white-space that will do this. In 2023.
I believe word-break: break-word does #1 but it's not hyphenating for me. And MDN says word-break: break-word is deprecated.