Re: [css3-exclusions] Feedback on exclusions document

On May 10, 2011, at 3:34 PM, David Hyatt wrote:

> I am assuming wrap-shape-mode applies to block-level elements.  This would also allow it to be applicable to replaced elements like images.
> 
> Keywords like left/right/top-bottom are bothersome from a writing-modes perspective, since there's no way they would really be physical (you're really referring to line edges with left/right).
> 

I would suggest splitting this into a number of properties. Whilst this proposal has more properties it should make it easier for authors to get contour wrap with specifying shapes directly. It hopefully also addresses the naming of value from a writing-mode perspective.

Proposed properties and their values (default specified in bold):

wrap-shape-fit: auto | none | rectangular | contour
wrap-shape-clear: none | before | after | both | smallest
wrap-shape-exclusion: auto | <shape>
wrap-shape-content: auto | <shape>

wrap-shape-mode could be used as a short-hand property.

wrap-shape-fit and wrap-shape-clear would control if/how the wrap-shape-exclusion was used.

I'd also allow wrap-shape-margin to take auto as a value:

wrap-shape-margin: auto | <length>

Computed values would be derived as follows:

wrap-shape-margin:
- auto - avg. of left/right or top/down depending on writing mode.

wrap-shape-fit:
- auto w/float - computed value = rectangular
- auto w/any other element - computed value = none

wrap-shape-exclusion:
- auto w/rectangular fit - computed value = margin box
- auto w/contour for a box w/border - computed value =  border shape (e.g. considering rounded corners) outset by margin (wrap-shape-margin).
- auto w/contour for an image - computed value = shape(s) of alpha channel above threshold
- auto for all other elements (including positioned elements) - computed value = TBD (not sure...)

wrap-shape-content:
- auto - content box

This would allow the following use case not addressed by the current proposal:
- different types of exclusion and content shapes - e.g. a rounded rect exclusion with a rectangular content would be quite common

It also allows most of these properties to be automatically derived saving the author from redundant specification. E.g. a float with rounded corners and contour fit:

div.float
{
	float: left;
	border: solid thin;
	border-radius: 8pt;
	margin: 12pt;
	width: 144pt;
	wrap-shape-fit: contour;
}

This float's height will be sized dependent on content and it's wrap-shape-exclusion will be automatically calculated.

wrap-shape-clear values have the following meaning:
- none - don't clear
- before - clear before the shape in block inline progression
- after - clear after the shape in block inline progression
- both - clear on both sides in block inline progression of shape 
- smallest - clear the smallest side (in block inline progression); i.e. text will be on the largest side

For 'smallest' I would suggest picking one side and sticking to it or splitting into two values - smallest-line, smallest-area.

I'd also suggest that the block inline progression used to evaluate before, after, both and smallest is that of the exclusion element and element that contains the wrapped text.

Kind regards,
- Jacob