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             | |
> |                   | |
> |-------------------- |
> -----------------------


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:

    float-displace: line | block | block-within-page

    indent-edge-reset: none | padding-edge | border-edge |
        margin-edge | content-edge

where:

  line:
    The line box of each line that is next to a float is shortened (the
    default)

        xxxxxxxxxxxxx
               xxxxxx
        #####  xxxxxx
        #####  xxxxxx
        #####  xxxxxx
               xxxxxx
        xxxxxxxxxxxxx
        xxxxxxxxxxxxx

  block:
    All line boxes in a block are shortened.

               xxxxxx
               xxxxxx
        #####  xxxxxx
        #####  xxxxxx
        #####  xxxxxx
               xxxxxx
               xxxxxx

  block-within-page:
    ditto but only until the next page break

When line boxes are shortened, they are shortened just enough that they 
don't overlap with the margin box of the float, and then some extra 
indent is added, which is calculated as follows: Find the nearest 
ancestor in the same flow that has an 'indent-edge-reset' property 
other than 'none' and add up all the margins, borders and paddings 
between the edge indicated by that property and the content edge of the 
current element. (If there is no such ancestor, no extra indent is 
added.)

'Indent-edge-reset' is particularly useful for lists, because list items 
need some padding or margins to put the bullet in, and these values 
ensure that a list item next to a float has the same room for bullets 
as other list items:

    ul {indent-edge-reset: margin-box}

    xxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxx
     o xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxxx
            xxxxxxxxxxxxx
    #####   xxxxxxxxxxxx
    ##### o xxxxxxxxxxxxx
    #####   xxxxxxxxxxxxx
            xxxxxxxxxxxx
     o xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxx

vs the current situation:

    xxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxx
     o xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxx
    ##### xxxxxxxxxxxxxx
    ####o xxxxxxxxxxxxxxx
    ##### xxxxxxxxxxxxxxx
          xxxxxxxxxxxxxx
     o xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxx

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).



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Monday, 26 May 2008 15:15:54 UTC