Re: [css-layout] Syntax for CSS3 Advanced Layout

On Sunday 06 August 2006 20:54, William Birchenough wrote:
> I have been pondering the Advanced Layout working draft since its
> publication.  Clearly, this sort of layout functionality could be
> important for simplifying the specification of complex layouts.  On
> the other hand, the proposed syntax concerned me.  Finally, though, I
> put my finger on *why* it concerns me.  Armed with my new
> self-knowledge, I come to the list with a proposal...
>
[...]
> My concern is that the syntax appears very general 
> (using ordinary, unadorned strings and characters) while applying to
> a specific situation (this particular template-based layout).  I find
> this nonintuitive, but more importantly, it might limit the extension
> of CSS for future levels.
[...]
>
> On a similar note, I propose a comma-delimited syntax for
> /display-model/ over the current space-delimited syntax.
[...]
> (For 
> example, what about specifying minimum and maximum row heights?  Or
> using a keyword to declare a stationary slot?)  I find
>
>     display-model: template ("a@@" 10em 30% fixed, "@@@", "@@b" 10em
>     30%, 20% * 20%);
>
> slightly easier to understand than
>
>     display-model: template ("a@@" (10em 30%) fixed "@@@" "@@b" (10em
>     30%) 20% 80% 20%);
>
> although others' mileage, of course, may vary.

I had this syntax, with template() and commas (but without min/max), in 
an earlier, unpublished version, but finally decided that the 
parentheses weren't needed and just made the line longer.

But taste may vary and I have nothing against template(). It's true that 
the comma helps to group the row and its height together. The working 
group is still looking at other syntaxes (including ones based on 
@-rules or external template files instead of properties) but so far 
none has come up that convinced everybody.


About min/max (and the same holds for other extensions, such as 
backgrounds and borders): My idea is that the templates should be as 
simple as possible and not provide anything that can be achieved in 
other ways, unless those other ways are really cumbersome.

You can already set min/max-height properties on elements and that may 
be enough. E.g., the height of a row with 'intrinsic' height is already 
automatically constrained by the max-heights of all elements in that 
row.

    div {display: "abc" intrinsic; min-height: 4em}
    p#a1 {position: a; max-height: 10em}
    p#a2 {position: b; max-height: 8em}
    p#a3 {position: c; max-height: 12em}

Assuming there are no other elements than those, the template has an 
implicit maximum height of 12em (and an explicit minimum height of 
4em).

Of course, that is less powerful than your proposal, where you can say 
that a row is the same height as all other rows up to a certain 
maximum.

But we also have Media Queries and at least the case where the 
template's size depends on the screen size can be captured with those.

There are several different ways one can imagine distributing available 
space over the rows and columns. Some may already be possible, some 
others may be necessary, yet others may be interesting, but not 
necessarily worth the effort.

The current draft provides three simple ways that I believe are all 
necessary:

   1) fixed size
   2) fixed ratios between slots (i.e., each slot is a fixed percentage)
   3) intrinsic size, up to the available space (like in tables)

Here are some other ways:

   4) linear functions: the height of each slot i is a_i + b_i x, where
      a_i and b_i are constants and x is chosen such that
      sum(a_i + b_i x) = the total height of the element. (This is what
      XUL does, with b_i given by the "flex" attribute.)

   5) any of the above, combined with min/max sizes.

   6) other linear functions: there is likely to be a calc() functional
      notation in CSS3, to make linear expressions over different units,
      e.g., calc(20% + 1em - 2px) to make something that is 1/5 of the
      total height, plus the size of the current font minus 2px.

   7) non-linear functions...

(6) is likely to happen automatically, because calc() may be used 
basically everywhere where a length is required. So no special syntax 
extension is necessary within the templates.



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 Tuesday, 8 August 2006 12:27:35 UTC