Re: css3-layout, equality, and Re: [css3-box] a width that is a little less than 'fit-content'

Brandon D Hechinger wrote:
> In an ideal world we would have an option to make it as thin as 
> reasonable (without any squishing of font glyphs, adjustment of 
> tracking, etc.).  In general it would just cause text to word wrap, the 
> width matching the longest word.
> 
> Then you'd have an extra-thin, which made some reasonable available 
> adjustments.
> 
> Whatever is developed here also would also find itself happily at home 
> when applied to css3-layout's display templates I believe.

While ago I've published proposal about different layout managers and
flex units in CSS:
http://lists.w3.org/Archives/Public/www-style/2009Apr/0154.html

Display template is one of layout managers that it covers.

> 
> Speaking of which,
> 1. is there a way to either relate element size without tabular layout, 
> so elements can still flow, or allow table layout to break so the cells 
> can flow?

Say you have some list (<ul>) and you need to replace its items in rows
having three cells each:

ul
{
   flow:horizontal-flow; /* bricks in the wall layout */
}
ul > li {
   height: 1*; /* li height spans full row height */
}
ul > li:p:nth-child(3n+1)
{
   width: 25%; /* first column, fixed width */
}
ul > li:p:nth-child(3n+2)
{
   width: 1*; /* second column, flex = 1 */
}
ul > li:p:nth-child(3n+3)
{
   width: 2*; /* third column, flex = 2
                 two times wider (if space allows)
                 than second */
   clear: right; /* each third items ends row, row break after it */
}

Rows here can have variable number of items in them - matter
of clear:right | left definition.


> 2. I can't discern (or haven't) from the css3-layout what to do if you 
> want a table a thousand rows high -- do we need a display: of 1000 
> string literals?

Different cases require different layout managers. For master page
layout template is pretty good. Even for the long lists I saw it being used.

li /* each item in this (long) list is defined
       by the template: */
{
   flow: "a a b"
         "c d e";
}
li > div.caption   { float:"a"; }
li > div.price     { float:"b"; }
li > div.note      { float:"c"; }
li > div.principal { float:"d"; width:1*; }
li > div.rebate    { float:"e"; }


> 
> Basically, I've been having an extremely difficult time handling 
> portable, accessible, and i18n layout.  The content-based features are 
> going to be helpful, but I still need a way for related-dimension 
> elements to flow.

I suspect that flex units are what you are looking for.

> 
> I would generally use this for tabular-like layout (nice pretty form, 
> with min-content or something), which breaks apart and flows.  In this 
> way I could handle the plethora of small displays, visually-impaired 
> people using huge fonts, and the variations in language widths/heights 
> (vertical languages?). 
> 
> Thanks.  I'm writing in private because I do not feel proficient enough 
> on CSS internals to publicly display this.
> 
> ...Brandon
> 
> 


-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Thursday, 24 September 2009 02:53:34 UTC