[css-layout] Syntax for CSS3 Advanced Layout

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...

The /display/ property (along with its proposed sub-properties, 
/display-model/ and /display-role/) and the /position/ property are 
fundamental to CSS.  The proposed syntax would add an interpretation to 
/display-model/ for strings and an interpretation to /position/ for 
characters.  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.  There might be another equally-useful interpretation 
of strings for /display-model/ or characters for /position/ in the 
future which is unrelated to this specific layout mechanism.  (As an 
example, consider the alternate syntax using x's and numbers mentioned 
in the section 3 of the Advanced Layout draft.  Without some additional 
decoration, the primary proposed syntax and this alternate syntax could 
not be distinguished.)

On a similar note, I propose a comma-delimited syntax for 
/display-model/ over the current space-delimited syntax.  Admittedly, 
some of my bias against space-delimited strings comes from my C/C++ 
background, which insists that such strings get smooshed into a single 
string by the preprocessor.  However, using commas to delimit the 
description of individual rows (and any subsequent column information) 
might make the grouping more apparent to the human reader, particularly 
if the possible row detail expands.   (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.

Thus, the formal description of the new values for /display-model/ and 
/position/ might look like this:

    Name: display-model
    New Value: template ([ <string> [ <row-height> ]? ,]* [ <string> [
    <row-height> ]? ] [, <col-width>*]?)

and

    Name: position
    New Value: slot (<letter>) | same

An example, one might declare:

    body { display: template ("a@@",
                              "@@@",
                              "@@b",
                              "@@@",
                              "c@@",
                              "@@@",
                              "@@d") }
    img#a { position: slot(a); }
    img#b { position: slot(b); }
    img#c { position: slot(c); }
    img#d { position: slot(d); }

Ultimately, I very much like the ideas within the Advanced Layout 
module.  Please consider my proposal a refinement in favor of, rather 
than an argument against, the ideas presented therein.

Bill Birchenough
Long-Time Reader, Second-Time Poster
bircheno@apk.net

Received on Monday, 7 August 2006 06:13:31 UTC