clay icon indicating copy to clipboard operation
clay copied to clipboard

[Core] Enhancement: "Balanced" text wrap mode

Open nkorth opened this issue 9 months ago • 3 comments

Sometimes it's handy to wrap lines so they're all similar in width, instead of the usual "greedy" wrap. This shouldn't be a default for body text but it can greatly improve headlines/titles. (Browsers have been starting to support this recently, and of course the youtube video "How Clay's UI Layout Algorithm Works" reminded me of it.)

I'm willing to implement this once I have time, unless someone beats me to it.

nkorth avatar Apr 09 '25 18:04 nkorth

See an example here

cugone avatar Apr 09 '25 20:04 cugone

This is a great idea, and that video example for CSS's balance mode demonstrates it perfectly. I think we could get both this and https://github.com/nicbarker/clay/issues/165 done at the same time, @nkorth you are very welcome to make an attempt at it! To get you started, the actual wrapping happens inside this loop here: https://github.com/nicbarker/clay/blob/main/clay.h#L2457 The way clay does wrapping is that it pre measures every "word" split by white space, so by the above point in the code you're just working with words that have known dimensions - should make it much easier to implement!

nicbarker avatar Apr 09 '25 21:04 nicbarker

I wonder if it would be desirable to add a callback (like the measureText one) that users can use to provide their own text wrapping logic? For example a user could use libunibreak[https://github.com/adah1972/libunibreak], or ICU or whatever custom logic and then tell clay where the valid wrapping points in the text are via the callback. Either way it would be really nice if there would be a way to support CJK language text layout 👍

mattahj avatar May 05 '25 11:05 mattahj