Wrap text around SVG shape

[Yotam]

Dear community,

Is it possible to (a) place on the same SVG both a shape/image element and a text (either the SVG text or the regular text), (b) to apply a drag behavior on the element, (c) and then make the text break according to the location of the element and basically to wrap it around the element container once the element is dragged over the text?

I'm looking to implement a behavior which resembles the CSS3 exclusions.

Perhaps I don't understand correctly the way that SVG text behaves but anyway I would love to hear from you what you think.

Thanks in advance,
Yotam

[Ian Johnson]

It is possible, but it would mean a lot of custom code. currently svg does not even support normal text wrapping. there are some javascript polygon clipping libraries that would be helpful in this pursuit, but it seems like it would still be quite a bit of work.

Hopefully the interoperation between svg and html will continue to improve with css, so when exclusions come true there may be easier ways to accomplish what you want.

--
Ian Johnson

http://enja.org

[Yotam]

Thank you for the quick reply.

Can you mention a few libraries that might come in handy? Or any other subjects I should got myself familiar with?

[Stark]

I would recommend SVG foreign objects. They do cause problems in some browsers though.

[Ian Johnson]

i've been meaning to play with polygon clipping but haven't gotten around to it. here are some links i've collected:

http://stackoverflow.com/questions/5697851/detect-and-apply-restriction-to-objects-paths-using-intersection-library
http://alienryderflex.com/polygon/
http://www.kevlindev.com/gui/math/intersection/index.htm#Anchor-intersectEllipsePolygo-29474
https://github.com/thelonious/js-intersections

http://www.cs.man.ac.uk/~toby/gpc/

[Yotam]

@Stark - Thanks, indeed they seem to cause problems and also not the most fitting solution, yet, interesting subject.
@Ian - Great collection of entry points to the subject of clipping and intersections. It will take a while to go through all the material, wish me luck :)

[Ian Johnson]

best of luck, and hopefully you share any discoveries, i'd love to see what you come up with! :)

[Jason Davies]

On Sat, Oct 20, 2012 at 12:24:23PM -0700, Yotam wrote:
> Is it possible to (a) place on the same SVG both a shape/image element and
> a text (either the SVG text or the regular text), (b) to apply a drag
> behavior on the element, (c) and then make the text break according to the
> location of the element and basically to wrap it around the element
> container once the element is dragged over the text?

Related: I made HTML text wrap around circles here, using CSS:

http://www.jasondavies.com/maps/random-points/

The trick was to create some floating <div> elements of varying widths
to mark out the circle edge.

--
Jason Davies, http://www.jasondavies.com/

[marc fawzi]

> Related: I made HTML text wrap around circles here, using CSS:
>
> http://www.jasondavies.com/maps/random-points/

Well, you know, Unicode has a breaking-hyphen character that will
break the line where inserted and adds a hyphen so this way you can
use canvasContext.measureText to measure the text in each line and
break it at the desired point, so it would work for any distribution
of word length and any curvature

[Yotam]

@Jason, nicely done. It helps a lot. Do you have any hints on how to progress a wrap which will be applied dynamically? Should I leave the D3 and focus on the css3 exclusions (I can try to dynamically give values to the .exclusion, see use case 5 here)? The only problem is that it will be widely accepted standard in 3 years from now...

@Marc, I wasn't familiar with the measureText function. This is a good option and I will take a look at it.

When thinking about it from a wide point of view, each SVG element have attributes of its location and its dimensions, the same goes for text (where word is the nucleus element and it's location attribute is somewhat deeper in the page). It sounds quite logic to me that there must be some simple way to break text which is embedded within SVG canvas based on the other embedded elements properties.
So far I haven't managed to discover this "simple way", but It seems to me rather basic feature, so I hope I'll find it out soon.

Thanks for both of you for the reply.

[Ian Johnson]

SVG elements have getBBox and text elements have getComputedTextLength available.

I've written a text wrapping method in the past that would split text up into words (just split on " ") and then append tspan elements one by one, checking the total computed length and if it surpasses the width, set the dy attribute to begin the next line.

another way to think about it would be trying to fit a bunch of variable width rectangles in some area with collision detection. even though you don't want a word cloud, the techniques Jason used for his wordcloud plugin might be helpful: 

http://www.jasondavies.com/wordcloud/

[Yotam]

Well people, you gave me plenty of resources and I highly thank you for your assistance. Will try to put something to work and will hopefully come back with some results.
Cheers