Re: [[css-shapes]] feedback

On Tue, Sep 10, 2013 at 5:42 AM, David Dailey <ddailey@zoominternet.net> wrote:
> Thanks for your answer, but I'm still having a hard time visualizing what the actual code would look like to flow text into an SVG <rect> that already, let us say, has a pattern and a filter. If I understand it correctly, one would have to declare the <rect> redundantly, once as a rect, and once as a  CSS rectangle([<length>|<percentage>][, [<length>|<percentage>]] that seems to have no x or y attributes. How would one bind the rectangle to the <rect>, if, say, the <rect> were animated on its x and its width attributes? A <use>? How or why does the alpha channel enter the picture? It all seems rather complex, without an example of what the code for this sort of simplest of use cases (the SVG textArea) would look like.

I think you're confused about what the purpose of this feature is.

If you're using SVG to draw something, and want to flow text, use the
<text> element as normal.  SVG2 is adding the ability to use the CSS
text-layout model, which'll help a lot.

The CSS Shapes spec also allows you to specify non-rectangular shapes
for a box, and have the content inside and outside flow accordingly.
Shapes level 1 defines shape-outside, which lets you change the outer
shape of floats (and exclusions, once they're supported), so that text
outside of the float will flow around the given shape.  Shapes level 2
defines shape-inside, allowed on any element, which makes the text
*inside* the element flow around the given shape.

Turning back to SVG, you'd use this by first creating a <text
width="XXX">...</text>.  The width='' attribute opts it into the CSS
text-layout model, flowing it into a rectangle of the given width (and
whatever height it ends up with, unless you specify height='' as
well).  Then you can apply the shape-inside property to it, to get it
to change its shape to whatever you desire.

Alternately, you could do the same with a <p> or <div> or whatever
element in HTML.

~TJ

Received on Monday, 16 September 2013 21:16:47 UTC