[css-layouts] row/column model ?

Consider the following markup (fragment of some help/documentation):

<body>
  <h2>Properties</h2> 
  <dl>
      <dt>length</dt><dd>sequence length</dd>
      <dt>type</dt><dd>....</dd>
  </dl>
  <h2>Methods</h2> 
  <dl>
      <dt>append</dt><dd>...</dd>
      <dt>remove()</dt><dd>....</dd>
      ...
  </dl>
  ...
</body>

Designer's wish is to replace all <dt> elements
in one column and all <dd>s in another column. 
It is also desirable for both <dl>'s to share same column
distribution. Similar to this: 
http://terrainformatica.com/w3/help-columns.jpg

I believe that this kind of alignment is pretty common.

As for now the only way to achieve something close to this
in HTML/CSS  is to use <table> with colspan's (for <h2>). 
But that will require semantic changes: dt/dd->td + adding 
redundant <tr>. 

It appears as I need to add one more layout manager to the 
collection that I've implemented already. All layout managers
in my case are defined by my own 'flow' CSS property:

flow: vertical | horizontal | grid | "template" | etc.

So for the layout above I am thinking about something like this:

dl 
{
  flow: row(dt dl) body;
}

where 'row()' defines model of sequence of elements.
and 'body' defines parent element - owner of columns distribution
information. According to the rule above all <dl>s
inside the <body> will have any two consequent <dt> and <dd>
laid out in rows. Columns distribution will be 
shared among all such <dl>s, the body element will hold columns
distribution information. 
Particular widths of columns are determined by standard CSS means
- [min-/max-]width/height.

For example column dimensions can be defined as:

dl > dt 
{ 
  width:*; 
  max-width: max-intrinsic; // widest element defines column width
  margin-right: 1em; // inter column gap
} 
dl > dd 
{  
  width:*; // takes the rest left from dt's
} 

I am just thinking aloud. Any ideas are greatly appreciated.
Just imagine that we have the 'flow' and flex units in CSS, 
how you would define all this? 

I would like to highlight again the need of some property
that will define type of layout manager used. Accepting
flexbox in its current form is not that wise I would say. 
It is not extendible in principle - just covers one
particular layout from many. 
We have to put foundation that will allow to extend the 
list without logical conflicts in future.
Yes, these are basics of systems design, but it seems
some people are going to make another attempt to step
on the rake [1].

---

I've considered implementation of http://www.w3.org/TR/css3-grid/
as another 'flow' manager for the task but decided not to go 
there as:
1) I already have flow:"template" close to this 
  http://www.w3.org/TR/2009/WD-css3-layout-20090402/
  that in principle is about the same type of layout.
2) The css3-grid is too intrusive and redundant - dimension
  information defined in grid-rows/columns clushes with 
  width/height defined on elements themselves.  

[1] http://en.wiktionary.org/wiki/step_on_a_rake

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 25 February 2011 06:09:40 UTC