Re: [CSS3-box] Need for in-flow block-level neutral flow roots ("block formatting contexts")?

> On Sunday 25 May 2008 21:18, Anton Prowse wrote:
>> I perceive a need for in-flow block-level flow roots ("block
>> formatting contexts") which have neutral behaviour.
 >> Motivating example:
 >> -----------------------
 >> |--------- ---------- |
 >> ||floated| |prod1   | |
 >> ||  ad   | |        | |
 >> ||       | ---------- |
 >> ||       | ---------- |
 >> |--------- |prod2   | |
 >> |          |        | |
 >> |          ---------- |
 >> |-------------------- |
 >> ||prod3             | |
 >> |                   | |
 >> |-------------------- |
 >> -----------------------

Bert Bos wrote:
> One idea that was mentioned in the WG a long time ago, but hasn't been 
> properly investigated yet, is a pair of properties 'float-displace' 
> and 'indent-edge-reset'. (The names and keywords may vary.) They 
> specify what is displaced by a float and by how much:

Very interesting indeed; this sounds like this would provide a 
significant deal of control over floating.

However, regarding the original situation, the position of the border 
box is perhaps the lesser of the two concerns; more important is that 
whenever a given "product description" (in the example above) has a 
descendant whose value of 'clear' is other than none, the clearing 
effect should be restricted to the product description and not permitted 
to interact with floats outside of this scope.

Only flow roots have this scoping property, and it is one of their 
defining features.  This property proves very useful on the modern web 
where mash ups are formed from units of content+style (eg from other web 
pages) which must live in isolation from each other.

> As described, none of these reduce the width of any block boxes, only 
> line boxes get shorter. (In particular, left and right borders are 
> never displaced, only content is.) Maybe it is possible to add a 
> keyword that makes the border box narrower, instead of the line boxes. 
> Or maybe that is more properly done with Template Layout 
> (http://www.w3.org/TR/css3-layout).

This was something I was pondering, certainly.  However, whilst using 
Template Layout for this would solve the cleared descendants issue, I am 
not sure whether or not the "product descriptions" could be flowed 
around and under the float as depicted in the example.  I need to think 
some more about the Template Layout spec as it currently stands. 
(Initial thought: if the first column of a two-column template contains 
only a float with a negative right margin going all the way back so that 
the right margin edge is incident with the left margin edge, would this 
cause the first column to have zero width yet allow the float -- which 
would not be overflow in the usual sense -- to overlap into the second 
column and push away any product descriptions there that lay on the same 
horizontal level as the float?  Even if so, this would only solve the 
problem in conjunction with an new keyword for floats which would cause 
them to push the whole border box away, and Bert suggests.)

On the face of it, it would certainly seem easier to make use of in-flow 
block-level flow roots with neutral behaviour (if such things were to 
exist) than going via Template Layout, as all the conditions for the 
example currently exist in CSS 2.1 (eg it is frequently achieved using 
overflow:auto) with the exception of neutrality of behaviour (we don't 
actually want to interfere with overflow).

Anton Prowse
http://dev.moonhenge.net

Received on Tuesday, 27 May 2008 17:52:05 UTC