Wrapping Text in SVG

Hi, folks-

I know that more powerful text-wrapping into and around arbitrary shapes 
is in the wings, but I also think there is room for a very simple 
wrapping of text based on a defined width (and/or height). This would 
solve the majority of use cases in the simplest way possible for authors.

I've written up a basic proposal [1] in the SVG WG wiki, and opined a 
bit more on my blog [2], including a couple of simple test cases [3][4]; 
I also spoke with Cameron and Tab about this on IRC. The key, of course, 
is to use the browser's existing CSS text layout, but in an SVG context, 
by defining the "inner box" (the rendering area inside the margins and 
padding).

I know that even simple text wrapping is more involved than my basic 
strawman; we would still want: better positioning (maybe CSS Flexbox 
could help there); a text metrics API; auto-font-sizing of text to fit 
an area (especially for labels); an 'inherit' value for @dx to allow it 
to take on the @x value of its parent so you don't have to set @dx with 
an explicit numerical value; and many other things.

But I hope that my simple proposal helps move the discussion along, so 
we can have wrapping text in SVG in the next major release of all browsers.

[1] http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Wrapping_Text
[2] http://schepers.cc/its-a-wrap
[3] http://schepers.cc/svg/text/text-wrap-width.svg
[4] http://schepers.cc/svg/text/text-wrap-width-tspan.svg

Regards-
-Doug

Received on Monday, 3 June 2013 17:42:34 UTC