Re: [css3-flexbox] Proposal for collapsing box elements depending on containing box size

On Thu, Jul 30, 2009 at 6:49 PM, Pierre
d'Herbemont<pdherbemont@apple.com> wrote:
> This is about extending the flex box WD by giving the ability to
> automatically collapse elements contained in a box:
> [1] http://www.w3..org/TR/2009/WD-css3-flexbox-20090723/
> According to [1], when a container box has extra space, the container will
> resize flexible element to fill up that space.
> However, when there is too little space, the spec just says:
>
> Elements within a box may use the ‘overflow’ property to control whether a
> scrolling mechanism appears when the children of a box overflow.
>
> Instead of simply overflowing, I would like to be able to collapse arbitrary
> children elements to reduce the container box overflow area. Collapsing
> children elements would be following a priority value assigned to each
> elements.
> A use case for this is toolbars: we want to collapse less important toolbar
> items when the toolbar is too small to display all its items in its box.
> -
> Here is the proposal:
> Each element directly within a box may be made
> either collapsible and non-collapsible. Collapsible elements may be
> collapsed if their original size would cause the containing box to overflow.
> This is described later.
> Non-collapsible elements will never be collapsed or uncollapsed, even when
> the containing box overflows, or has extra space.
> Also, collapsing will not affect the computed values of the collapsed
> elements "visibility" properties. However, an element that
> is collapsed behaves as though they have a computed "visibility" value of
> "collapse".
> A result of this rule is that, elements whose "visibility" is "collapsed"
> will always be in the collapsed state.
>
> box-collapse-priority: <number>
> An element becomes collapsible when the box-collapse-priority property is
> specified. The box-collapse-priority property is an unsigned integer value
> representing the priority in which element should be collapsed. Its initial
> value is 0, which indicates that the element is non-collapsible. Elements
> that are collapsible can be collapsed when the container box overflows.
> The collapsible elements will be collapsed first following the increasing
> order given by their box-collapse-priority values. For instance, an element
> whose box-collapse-priority is 1 will be collapsed before an element whose
> box-collapse-priority is 2. When two elements have the same value
> for box-collapse-priority, the element later in the layout order will be
> collapsed first.
> During layout, collapsible elements should be collapsed in order, while
> the there is non-collapsed and collapsible elements to collapse and if
> the containing box overflows.
> In an horizontal layout, there is an overflow if the sum the widths of
> contained non-flexible and non-collapsed elements, plus the sum of the
> minimum width of flexible and non-collapsed elements, is greater than the
> width of the containing box.
> When there are no more collapsible elements to collapse, the regular flex
> algorithm described in "(5) Flexibility" should be used.
> After applying the flex algorithm, and if applicable the "overflow" property
> will be used independently as described in "(1) Overview".
> -
> Here is a usage example:
> <style>
> .container {
>     display: box;
>     box-orient: horizontal;
>     box-align: center;
>     width: 100%;
> }
> .A {
>     box-flex: 0;
>     width: 80px;
>     box-collapse-priority: 1; /* Specify that this box should be collapsed
> first when the container overflows */
> }
> .B {
>     box-flex: 1;
>     min-width: 100px;
> }
> .C {
>     box-flex: 0;
>     width: 80px;
>     box-overflow-drop-order: 2; /* should be collapsed after A, if container
> overflows */
> }
> </style>
> <div class="container">
> <div class="A"></div>
> <div class="B"></div>
> <div class="C"></div>
> </div>
>
> I would expect the following behavior:
>
> Here are the three boxes. Here they can fit - i.e. A.width + B.min-width +
> C.width > container.width.
> +-------+-------------+----+
> |   A   | B: Flexible | C  |
> +-------+-------------+----+
>
> Here is what would happen when A.width + B.min-width + C.width <
> container.width, (container.width = 200px)
> +-------+----+
> |   B   | C  |
> +-------+----+
> -> A is collapsed.
>
> Here is what would happen when B.min-width + C.width < container.width,
> (container.width = 150px)
> +-------+
> |   B   |
> +-------+
> -> C is collapsed.

I like it.   Two comments:

1. I would prefer a keyword to indicate that a box isn't collapsible,
rather than hijacking the value 0 for that.  It doesn't make sense
that 1 collapses before 2, but 0 never collapses at all.  As all
elements are non-collapsible by default, just having "auto" be the
non-collapse value will work.

2. Does anybody have any experience with something similar to this in
existing application designs?  I'd want to know about Firefox XUL
specifically, but any application, browser or not, would be nice to
hear about.

~TJ

Received on Friday, 31 July 2009 13:32:08 UTC