Algorithm for Text Wrapping Within a Shape
For a simple algorithm, let's assume that you can compute a bounding box around each word, and that you have an image with a mask of the shape that you want to fill.
Sweep down from the top of the image mask until you find a line that is as long as the first word. See if you can extend it downward into a rectangle the size of the bounding box. If so, drop the first word there. If not, keep sweeping.
Once you drop a word, see if you can extend the bounding box to be the width of (first box + second box + space) and the height of max(first box,second box). If so, drop the second word there. If not, center the first word left-to-right within the bounding box that will fit within your image mask (left to right), remove that bounding box from the mask, and keep going.
You can make this slightly fancier by insisting that lines have the same baseline even if broken by the shape (e.g. lines across the top nubs of the heart); you then need to have an alternate "continue along this baseline" condition. But the basic idea above, with an image mask that you use to try to fit rectangles inside which are removed when you're done, will do the job.
(It is faster to use geometric operations than pixel-based ones described here, but then one has to worry about all the cases for figuring out how a bounding box fits within an arbitrary polygon, and that's a bit long to explain here.)
Edit, Updated
Try
text / html
gggggggggggggg gggggggggggggg gggggggggggggggggggg gggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggggggg ggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggg gggggggggggggggggggggggg gggggggggggggggggg gggggggggggg gggggggg ggggg ggg g
js
var text = "Lorem ipsum dolor sit amet," // `string` , `array` , i = -1, elem = document.querySelector("pre");elem.innerText = elem.innerText.replace(/[^\n|\r|\t|\s+]/g, function() { return text[++i] }); Lorem ipsum do lor sit amet, consectetur adipisci ng elit. Vivamus b landit nisl eu posuere s uscipit. Etiam at quam sed nulla consequat finibu s et eget ligula. Nam sit amet imperdiet eros. Ut a congue nibh. Sed ac arcu non risus commodo lobortis et at lorem. Pellentesque pulvinar venenatis pellentesque. Praesent sed pulvinar justo. Ut nec turpis lectus. Suspendisse porta ipsum orci, nec vestibulum tellus luctus quis. Morbi eleifend vel nibh sed rutrum. Etiam feugiat, nunc et efficitur accumsan, quam magna lac inia neque, eu ullamcorper purus turpis eget urna. Etiam lacus mi, gravida vel mollis ut, viverra sed ipsum. M auris in augue turpis.Nulla facilisi. In tristique t ortor sit amet leo cursus, sit amet varius ligula sollicitudin. Mauris commodo et sapien id sce lerisque. Integer et diam eget arcu bibend um ornare a in tortor. Lorem ipsum do lor sit amet, consectetur adip iscing elit. Aliquam veh icula diam ac laor eet tincidun t. Integ er se d t e
Let's say each letter has a specific size(width and height, in this case we probably only care about width because all letters have the same height). Then we need the following:
- Wrapped objects of each word - to make sure there's no fragmentation of the word
- given width of each word.
- Partition the polygon into chunks that are the heights of the word. So you have x horizontal strips that make up the image.
- Then, find the width of the inside polygon if you were to inscribe words inside. This means you're removing the round edges of the heart. Where a vertical line can intersect the edge of the heart on the strip is where you remove the round edge.
Now that we have the size of each strip of the image, let's say we have this (i'm using arbitary unit for width):
[_________] [__________] <-- 10 width (5 each) [__________________] <-- 9 width [_____________] <-- 7 width [_______] <-- 5 width [___] <-- 3 width [_] <-- 2 widthEDIT: Just realized how ugly the heart is, my bad.
Now we need the size of each word, and insert them sequentially. Each block has x width, and each word object has y width. If y width > x width, we move to the next line and check there
considering we already have widthswhile(image.hasNextChunk()){ currentChunk = image.nextChunk(); if(currentWord.width < currentChunk.width) //insert here and then change currentWord to nextWord ...}I think this is what you want, but I'm not completely sure. Let me know if this helped! :)