Comments (6)
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
from revery.
I started an implementation in #300
from revery.
@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.
from revery.
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.
from revery.
Thanks for thinking about this @OhadRau !
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.
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.
from revery.
@jchavarri I would say I'll throw away my wrapping implementation and replace it with yours, other code is pretty similar
from revery.
Related Issues (20)
- Ubuntu 20.10: revery-ui/esy-skia build failed HOT 3
- Ubuntu 18.10 / 19.04: @opam/ocamlfind@opam:1.8.1 build failed HOT 5
- esy '@examples' run output has no text (Revery.FontCache: Error loading typeface (skia)) HOT 4
- Uncaught Division_by_zero crash on window resize. (maxHeight vs flexGrow ?) HOT 1
- Revery roadmap in face of Reason->Rescript rebrand HOT 2
- Having problem with building revery-quick-start project on Mac HOT 7
- MacOS: Allow selective modifier key mapping
- esy install failing on Windows. HOT 3
- Build Revery is presenting failure in shell.c HOT 2
- ScrollView does not work if children are added after initial mount
- CI: esy-skia won't build on Linux HOT 1
- createWindow with visible=false does not create a hidden window HOT 3
- Update the build guide for Fedora HOT 4
- SVG drawing mangled if OS locale does use a different floating point presentation HOT 4
- Quickstart build step error HOT 1
- Windows10 esy is installed but revery-ui can not be installed
- Build revery with esy on mac failed HOT 9
- Can't build on Fedora 35 due to glibc bug HOT 4
- OCaml <=14.12 doesn't support glibc>=2.34 HOT 9
- Support for FreeBSD HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from revery.