[whatwg] Joe Clark's Criticisms of the WHATWG and HTML 5

[Leons Petrazickis]

On 10/31/06, Charles Iliya Krempeaux <supercanadian at gmail.com> wrote:
> Hello,
>
>
> On 10/31/06, Rimantas Liubertas <rimantas at gmail.com> wrote:
> > <...>
> > > To get valid markup I must use a table tags if I want my layout to
> > > *function* that way. There is no way to fake it. It took three minutes
> > > to change the tags to table tags and the page functions perfectly now.
> > > This is for the benefit of the users.
> >
> > Some case of non sequitur, imho.
> >
> > I am in "ban tables for layout" camp. If anyone want to use them for
> > this purpose
> > they are free to use some other standard or do not use any standard at
> all...
> >
>
> Weren't we talking about creaing new HTML elements for a grid layout before?
>  (Or am I dreaming?)
>
> What ever happened to that?
>

The Dojo Javascript Toolkit (http://dojotoolkit.org/) has excellent
several excellent layout widgets, including a grid layout achieved
with proprietary attributes. I used it for an intranet web
application, and it's very intuitive. For example:

<div dojoType="LayoutContainer" layoutChildPriority="none">
	<div dojoType="ContentPane" layoutAlign="left">
		left
	</div>
	<div dojoType="ContentPane" layoutAlign="top">
		top bar
	</div>
	<div dojoType="ContentPane" layoutAlign="bottom">
		bottom bar
	</div>
	<div dojoType="ContentPane" layoutAlign="left" >
		inner left
	</div>
	<div dojoType="ContentPane" layoutAlign="right">
		inner right
	</div>
	<div dojoType="ContentPane" layoutAlign="client">
		This is the main panel.  It expands to fill all the left-over space
		after placing all the top/bottom/left/right panels.
	</div>
</div>

Take a look on the website. It's under See it in Action > Layout >
LayoutContainer. The demos are broken in Opera because of stupid site
design.

A straight conversion to tags is even clearer, but might be too presentational:
<container>
  <pane layout="left">outer left</pane>
  <pane layout="top">top bar</pane>
  <pane layout="bottom">bottom bar</pane>
  <pane layout="left">inner left</pane>
  <pane layout="right">inner right</pane>
  <pane layout="client">remainder</pane>
</container>

So we could move it to CSS, though that may present difficulties in
simulating browser compatibility via Javascript:
#container {  layout-type: grid;  }
#navbar{  layout-position: left;  }
#masthead {  layout-position: top;  }
#footer { layout-position: bottom; }
#sidenotes { layout-position: left; }
#sidelinks { layout-position: right; }
#text { layout-position: client; }

<div id="container">
  <div id="navbar">outer left</div>
  <div id="masthead">top bar</div>
  <div id="footer">bottom bar</div>
  <div id="sidenotes">inner left</div>
  <div id="sidelinks">inner right</div>
  <div id="text">remainder</div>
</div>

Again, you can stuff as many lefts, rights, and so ons in as you want.
It's like the inverse of an onion. The order in the CSS file
determines what's on the outside and what's on the inside.

Having made many CSS layouts by hand and having also used the Dojo
implementation, I have to say that this is a degree of magnitude
easier. A few lines of code sets up the whole layout without having to
worry about the arcanes of floating, widths, z-order, relative vs
absolute, and so on.

Regards,
-- 
Leons Petrazickis
http://lpetr.org/