W3C home > Mailing lists > Public > www-style@w3.org > October 2005

Re: What 'Advanced Layout' suggestions have been proposed?

From: Bert Bos <bert@w3.org>
Date: Wed, 5 Oct 2005 15:19:15 +0200
To: www-style@w3.org
Message-Id: <200510051519.15247.bert@w3.org>

On Wednesday 28 September 2005 04:29, Jacob Floyd wrote:
> It seems that a lot of people have suggested a lot of different ways
> to do 'advanced layout' or at least, features that might end up in
> CSS3 advanced layout module. It seems like a royal pain for the WG to
> have to keep track of every suggestion, so let's make a list for
> them, then they can evaluate them (hopefully) and choose what they
> think is/are the best solution(s) and/or CSS improvements for
> advanced layout.

There is also http://www.w3.org/TR/NOTE-layout (from 1996). It defines 
@-rules to partition the canvas into "frames" with different layout 
policies.

There are the box-* properties from Mozilla (used in XUL): 
http://www.xulplanet.com/references/elemref/ref_StyleProperties.html
They allow an element to stack all its children vertically, force their 
sizes to be the same, distribute space between them, etc.

And an idea I briefly alluded to before: 
http://lists.w3.org/Archives/Public/www-style/2005Mar/0058

The latter hasn't been fully published yet, but an example would be like 
this:

    body { display: "abbb"
                    "c@@d"      /* A grid with 5 slots: a b c d @ */ }
    #logo { position: a }
    #banner { position: b }
    #menu { position: c }
    .item { position: d }
    /* Everything else automatically goes to "@" */

    <body>
      <h1>...</h1>                <!-- goes to "@" -->
      <div id=banner>...</div>    <!-- goes to "b" -->
      <p id=logo>...</p>          <!-- goes to "a" -->
      <div class=item>...</div>   <!-- goes to "d" -->
      <div class=item>...</div>   <!-- goes to "d" -->
      <p>...</p>                  <!-- goes to "@" -->
      ...
      <div id=menu>...</div>      <!-- goes to "c" -->
    </body>

Any element can have a grid-like template and then its descendants can 
be placed in that grid. Multiple elements can go in the same slot and 
unassigned descendants go into the default (@) slot. Extra parameters 
on 'display' can change the size of slots or make the size flexible. In 
this example, the width is fixed and the "a" slot is 25% of the width 
and 50% high, while the "b" slot is 75% wide and also 50% high.



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 Wednesday, 5 October 2005 13:19:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:41 GMT