Hacker News Reader

I don't have the same background, but it drives me nuts when I see phrases word-wrapped on awkward boundaries that don't make sense (especially in h1 elements, titles, headers, billboards, posters, etc etc etc).

I'm just going to re-emphasize what you wrote because it's exactly the problem and I want to change the formatting a bit to make it clearer. In the article, the author shows that the headline with text-wrap:balance would look like this

    One year on and what
  next for remote working?

, which breaks right in the middle of "what next". Much better (to my eyes) is wrapping the line along some larger syntactic boundary:

  One year on and what next
     for remote working?

We have the technology to analyze sentences and figure out the syntactic structure. Preferring to break those sentences across larger parts of the syntax tree would make this text-wrapping property so much better.

Thanks for the illustration!

I suppose the technology for more accurate automated line breaks should indeed be already available, though I don’t think it’ll be applied in this particular case quite soon so we’ll have to endure some awkward (even if a bit less ugly now with text-wrap: balance) word wrapping in meantime.

ChatGPT can do it. Perhaps this won't be viable in-browser for a while, but I could see somebody using it in a static site build pipeline to convert space characters to   at compile-time.

---

Break the following headlines up into individual strings where each string is an idiom that shouldn't be broken up. If words aren't part of an idiom, they can be their own string.

"One year on, and what's next for remote workers?"

"Hurricane Ida Gives New York What For!"

"Ice Town Costs Ice Clown His Town Crown"

---

"One year on" "and" "what's next" "for" "remote workers?"

"Hurricane Ida" "Gives" "New York" "What For!"

"Ice Town" "Costs" "Ice Clown" "His" "Town Crown"

I think it needs to be done while the browser is flowing text, because it should look good with nearly any width, like:

  Ice Town Costs Renowned Ice Clown His Town Crown
                     and Gown

vs

  Ice Town Costs Renowned Ice Clown
      His Town Crown and Gown

Thanks for expanding on my point. Yes, LLMs or plain algorithms, the capability is here. It just won’t be used for this.

> ChatGPT can do it.

This is truly the kind of suggestion that makes me wonder about the energy efficiency of websites.

To me it seems, that many web developers/designers are so happy with the fact that what they are doing actually works, they often forget other (more boring?) considerations like stability, maintainability, resilience, efficiency and such.

We have a LEGO set with infinite pieces and a good website in my eyes doesn't try to use as many as possible of those, but to use just as many as needed while still getting what you aim for.

Additional thought: The problem space of how to break a specific text depending on the size of a window is sort of limited as well. So if someone had the idea to solve this using machine learning, the best idea would be to run these calculations once (per page, serverside), and then just use a lookup table or something of the sorts after. Just store the line break positions for each text on the page for all possible widths that make sense and check that table when rendering.

This has the advantage that a human typesetter could output to this format as well or they could correct the machine generated output.

As there is a limited number of ways to break text the table wouldn't even have to store all pixel widths, just those at which the words break differently.

I've long been bugged by the lazy approach to plurals/multiples in e.g. game tooltips. "You loot 861 gold(s)" I wonder if we'll ever see improvements on either front.

It's even more complicated when you try and localize this. Some languages make pluralization very complicated.

A few years ago, one of the localization team members gave me a tip I have been trying to stick to this time around.

Instead of "You found 1 coin." or "You found 2 coins." you turn it into an enumeration "Coins Found: 1"

The localization of the string part is the same for all languages.

Combining text-wrap: balance with non-breaking spaces and word-joiners seems to be a good way to go. Also  is good to know.

> non-breaking spaces, word joiners, and other similar HTML entities

Non-breaking spaces in some fonts are actually a different size than normal spaces, and most copy doesn't contain entities. Better for all if we can adjust the display of the text without programmers changing content.

> adjust the display of the text without programmers changing content

It’s this awkward and awesome place where content and appearance meet. Whoever wrote the headline probably knows the exact meaning they wanted to convey, and ideally should have control over where the line would wrap just as they would expect to have a say in word emphasis or punctuation.

> most copy doesn't contain entities

It doesn't need to contain entities. GP is not correct to refer to these characters as "HTML entities", which are just ways to conveniently express the characters in HTML. In fact these characters are Unicode characters just like all the other characters in the copy.

Off topic(?) but, "what next" in that sentence at all seems jarring. English is my first language so I could be wrong, but should it be "what's next" or "what is next"?

Those two choices sound like statements: 'here is what is next for remote working.' It's instead asking where remote working will go, and 'what next' is the expected form there from my experience, though it's usually seen on its own as an exclamation. Contrived example: "I've seen my boss, the Mayor, and the Governor walk through here! What next? The president?"

I don't know, that still feels wrong. The "What next?" in the contrived is "What [will I see] next?" The "what next" in the title is short for "what [is] next," which feels specifically made for "what's next."

Though, in general, just a too long title that doesn't flow well without hints for where the pauses and inflections should be.

I tried to refrain from more radical rephrasing, but yes, it’s not unwarranted.

I don’t think in near term text-wrap: balance would be as good as human eye for headlines

It's apparently very good for reading comprehension.

I've had a lot of training in this area, and while I don't understand why it is, all of the materials I've read — especially in the last ten years — say that orphaned words make sentences harder to understand.

I agree that it’s better than nothing—merely saying that, based on the examples, it’s not as good as the [more cumbersome] manual specification of preferred text wrapping points.

If that's true, then it sounds like an excellent application for AI. Too bad I can't think of an existing model that you can just throw that problem at. There also seems to be next to no money in it for anyone looking to solve it that way.

Might make layout quite energy intensive, especially if this is applied to long body text—and it would certainly be done on the web if it gets as easy as setting a CSS property!

> As a hard rule with rare exceptions, don’t break after conjunctions or short modifying words such as “and”, “the”, “on”, etc.—carry them to the next line.

That's interesting because my inclination is that "One Year On and What Next for Remove Working?" works best because "and" and "for" make it clear to me that the line is continued and that the current line isn't a complete clause.

Interestingly it appears ChatGPT is somewhat adept at this. Asking for the best ways to line-break this title, it suggests:

    "One year on and what next for remote working?" (original)

    "One year on and what next for remote
    working?"

    "One year on and what next
    for remote working?"

    "One year on and
    what next for remote working?"

Its first suggestion is the worst possible way to line-break it, though. A hypothetical automated system that used ChatGPT to do this would need to somehow know to ignore the first suggestion…