W3C home > Mailing lists > Public > public-fx@w3.org > July to September 2011

Re: Hey, you©öve got SVG in my CSS!

From: Charles Pritchard <chuck@jumis.com>
Date: Thu, 14 Jul 2011 08:32:27 -0700
Message-ID: <4E1F0C0B.8090904@jumis.com>
To: Vincent Hardy <vhardy@adobe.com>
CC: David Storey <dstorey@opera.com>, "public-fx@w3.org" <public-fx@w3.org>
Thanks Vincent.

I'll run this by www-style soon.
With the recent success vendors have had in implementing SVG, it seems
like this batch of work is feasible and could be accomplished this year.

1.
There has been some discussion by Tab Atkins and Robert O'Callahan over at www-style
that css images find a harmony with paint servers, to make background: url(#paintserver) work.

<shape> from wrap-shape should allow for references to path/shape objects in the same manner.
wrap-shape: url(#savedshape)

2.
It seems to me that wrap-border ought to be added to the spec, as wrap-padding and wrap-margin already are.

3.
I'm not sure what the behavior is if margin/padding are set on the element.
I imagine they are supposed to be ignored.

4.
The wrap-image and wrap-image-threshold items provide more groundwork to
bring pointer-events threshold to css images.
http://lists.w3.org/Archives/Public/public-fx/2011AprJun/0082.html
pointer-events: opacity(60) [proposed example from the original author]
would only trigger pointer events if the css image meets the threshold.





On 7/13/2011 6:49 PM, Vincent Hardy wrote:
>
>
> From: Adobe Systems <vhardy@adobe.com <mailto:vhardy@adobe.com>>
> Date: Wed, 13 Jul 2011 18:42:15 -0700
> To: Charles Pritchard <chuck@jumis.com <mailto:chuck@jumis.com>>,
> David Storey <dstorey@opera.com <mailto:dstorey@opera.com>>
> Cc: "public-fx@w3.org <mailto:public-fx@w3.org>" <public-fx@w3.org
> <mailto:public-fx@w3.org>>
> Subject: Re: Hey, you©öve got SVG in my CSS!
>
> Hi David, Charles,
>
> The idea of wrap-shape (the css3 floats and css3 exclusions spec are
> drafts along the same idea) is to provide a shape for other content to
> wrap inside or outside in HTML.
>
> My understanding of what David was originally asking is to have a way
> to define a viewport for the HTML fragment inserted in SVG content.
> This is needed for example when the content uses percentages (and
> wrap-shape can be defined with percentages). I think that
> conceptually, you do need the box that David was suggesting and I
> think it is a great idea that would make mixing HTML in SVG much more
> palatable.
>
> >> I meant ".. the box that Charles was suggesting".
>
> From: Charles Pritchard <chuck@jumis.com <mailto:chuck@jumis.com>>
> Date: Wed, 13 Jul 2011 01:13:41 -0700
> To: David Storey <dstorey@opera.com <mailto:dstorey@opera.com>>
> Cc: "public-fx@w3.org <mailto:public-fx@w3.org>" <public-fx@w3.org
> <mailto:public-fx@w3.org>>
> Subject: Re: Hey, you¡¯ve got SVG in my CSS!
>
> On 7/13/2011 12:52 AM, David Storey wrote:
>>> > The example places HTML divs inside of SVG shapes:
>>> > > It looks something like this (tweaked a little from the example svg):
>>> > <svg>
>>> > <rect x="10" y="10" width="100" height="150" fill="gray"/>
>>> > <foreignobject x="10" y="10" width="100" height="150">
>>> > <body xmlns="http://www.w3.org/1999/xhtml">
>>> > <div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
>>> > </body>
>>> > </foreignobject>
>>> > </svg>
>>> > > > Wouldn't it be nice to do that with less code, using CSS and a new attribute named "content-path¡±:
>> CSS3 Positioned Floats does something similar to this: http://www.interoperabilitybridges.com/css3-floats/#defining_wrap_shapes_for_floats
>>> > > <div style="content-path: rect(10,10,100,150); background: gray">
>>> > Here is a <strong>paragraph</strong> that requires <em>word wrap</em>
>>> > </div>
>
> Thank you for that link, that's very similar to what I'm talking
> about. I like it.
> That's wrap-shape: auto | <shape> -- with shape defined as expected.
>
> wrap-image may have some same origin issues; it could "expose" some
> small amount of data bout the image contents. For instance, the user could
> load an image from another domain and based on transparency, tell that the
> content of the image has changed.
>
> Are wrap-margin and wrap-padding something that works with border /
> outline properties?
>
> I think that wrap-shape is pretty solid on its own; seems like it
> could be implemented by vendors
> that already have SVG foreignObject+html implementations.
>
> -Charles
>
Received on Thursday, 14 July 2011 15:33:03 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 14 July 2011 15:33:03 GMT