Re: Fw: RE: [css-flexbox] Summary of planned changes to Flexbox Module

From: Robert O'Callahan
>Sent: Sunday, May 09, 2010 1:56 AM
>To: Tab Atkins Jr.
>Cc: Adam Del Vecchio ; www-style@w3.org
>Subject: Re: Fw: RE: [css-flexbox] Summary of planned changes to Flexbox 
>Module

>Those changes sound quite good to me.

>>On Sat, May 8, 2010 at 12:54 PM, Tab Atkins Jr. <jackalmage@gmail.com> 
>>wrote:
>>
>>I feel pretty strongly that this sort of change is worth breaking the
>>current experimental implementations in Gecko and Webkit.
>
>
>To be honest, we probably want to rewrite our implementation
>anyway, or rather do a new implementation of the new spec
>alongside our legacy XUL box layout. However, it would be nice
>to at least be able to map existing flexbox functionality cleanly
>into the new model. It seems like that will be possible.

Here is sample that uses -moz-box and -moz-box-flex:

<html>
  <head>
    <title>Mozilla FlexBox</title>
    <style>
    body { font:10pt verdana; }
    #box1 { display:-moz-box; width:300px; -moz-box-orient:horizontal; }
    #box2 { -moz-box-flex: 1.0; width: 100px; background:blue;}
    #box3 { -moz-box-flex: 2.0; width: 140px; background:red;}
    #ruler100 { width: 100px; border-bottom:3px dotted green;}
    #ruler300 { width: 300px; border-bottom:3px dotted magenta;}
    </style>
  </head>
<body>
  <div id="box1">
    <div id="box2">box 2</div>
    <div id="box3">box 3</div>
  </div>
  <div id="ruler100" ></div>
  <div id="ruler300" ></div>
</body>
</html>

that is rendered in Mozilla (3.6.3) as
http://terrainformatica.com/w3/flex-mozilla.png

And here is the same sample but with use of flex units:

<html>
  <head>
    <title>H-SMILE FlexBox</title>
    <style>
    body { font:10pt verdana; }
    #box1 { display:block; width:300px; flow:horizontal; }
    #box2 { width: 1*; background:blue;}
    #box3 { width: 2*; background:red;}
    #ruler100 { width: 100px; border-bottom:3px dotted green;}
    #ruler300 { width: 300px; border-bottom:3px dotted magenta;}
    </style>

  </head>
<body>
  <div id="box1">
    <div id="box2">box 2</div>
    <div id="box3">box 3</div>
  </div>
  <div id="ruler100" />
  <div id="ruler300" />
</body>

And its rendering:
http://terrainformatica.com/w3/flex-h-smile.png

I put rulers there to demonstrate calculation.

As you see results are close but not exact.

I think that algorithm used in Gecko has an error or
if it is correct (that mysterious "additive" to something?)
then it is highly non-intuitive.
User will expect box2 to be of width 100px and box3 of
200px as these two elements have weights in distribution
1 and 2 respectively.

(OT: Please note that peculiar bottom-border/dotted rendering
 manner in Mozilla )

>Hmm, will your flexunits proposal allow authors to set an absolute
>preferred width and a flex width on the same element?

As far as I understand box-flex in your implementation can make
used width less or greater than its declared width.
So it is not clear what exactly "absolute preferred width" stands or
used for.

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Sunday, 9 May 2010 19:49:06 UTC