New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Word wrap for TextNode #165
Comments
One important consideration is that since fonts aren't necessarily monospace, we want to split based on glyph width rather than string length. One way of finding a good break point while still handling kerning and ligatures might be to calculate a running sum of the string's width after each char. This will also be useful for a content aware wrapping algorithm: e.g. breaking only on whitespace (so you'd need to look ahead and see the next sum before you can decide where to break). That said, any wrapping would be an improvement over what we have now so it might be good to do a proof of concept version and then iterate on that. |
I'm pasting this here for now since it provides a good starting place: https://github.com/namniak/canvas-text-wrapper/blob/master/canvas-text-wrapper.js. There's also Knuth's algorithm for this which is well documented, but it doesn't match the behavior exhibited by most browsers (it uses intra-word spacing to accomplish evenly sized lines) I might take a look at this early next week to see if I can get a good start on this |
Thanks for thinking about this @OhadRau !
Agree 100% ! 😄 That link you posted seems reasonable to me - wrapping based on words will be the simplest, since it will account for ligatures too. |
I started an implementation in #300 |
@saitonakamura I had not seen your PR and created another in #303 😄 Both implementations are really similar so I'll close my PR, but maybe there's something there you might find useful. I took a lot of code from https://github.com/superbobry/ocaml-textwrap. |
@jchavarri I would say I'll throw away my wrapping implementation and replace it with yours, other code is pretty similar |
* [WIP]: Text wrapping Fixes #165 * Algorithm and fixes * Review fixes * Proper line hieght * Fix text example * Fix typo * Fixeg wrong cropping bug * Add font size slider * Added width slider * Tests fix, remove logging, var names chore * Update to new brisk API: slots -> hooks * Formatting
* [WIP]: Text wrapping Fixes revery-ui#165 * Algorithm and fixes * Review fixes * Proper line hieght * Fix text example * Fix typo * Fixeg wrong cropping bug * Add font size slider * Added width slider * Tests fix, remove logging, var names chore * Update to new brisk API: slots -> hooks * Formatting
I need word wrap for a PoC I'm building. I talked a bit to @bryphe on discord about this and it should probably be implemented here:
revery/src/UI/TextNode.re
Line 114 in f025d79
And we can probably use a algorithm from here: https://stackoverflow.com/questions/17586/best-word-wrap-algorithm
I will probably try to implement this myself but if someone else wants to pick it up feel free to do it
The text was updated successfully, but these errors were encountered: