Re: [css3-exclusions] Resolving shape-inside for inline content

Hi Bear,

On Feb 22, 2013, at 12:27 PM, Bear Travis <betravis@adobe.com<mailto:betravis@adobe.com>> wrote:

Hi All,

I'm trying to understand which shape-inside should be used when there are multiple shapes applied to the content.

As I understand it, a shape-inside on a block can affect all descendant inline content. A common example would be:
<div style='shape-inside: circle(50%, 50%, 50%)'>
  <p>text</p>
  <p>text</p>
</div>

I couldn't find the exact wording, but I believe these [1][2] are the relevant areas of the specification.

My question is, if child blocks also have a shape-inside set (the paragraphs in the above example), which shape-inside should be used? To me, it seems like the shape-inside from the most immediate ancestor should be used.


I would expect to use an intersection between the shapes, in this case the intersection between the shape defined on the outer div (circle) and the shape defined on the first paragraph.
Is the above option worth considering from your point of view?

This also comes into play when shape-inside is set on regions. For example, if the flow content and region both have a shape-inside set, which should be respected? The flow content shape-inside seems like the most immediate to me in this case.

Both of these are probably edge cases, but it would be useful to understand the expected behavior.

-Bear

[1] http://dev.w3.org/csswg/css3-exclusions/#declaring-shapes
[2] http://dev.w3.org/csswg/css3-exclusions/#shape-inside-property

Cheers,
Mihnea