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