[css3-layout] Is Template Layout just syntactic sugar?

In the other thread [1], starting from a syntactic addition to the
beloved Template Layout syntax, we slipped into a big discussion about
the Final CSS Layout System for Everything™.

And I thought: we have a flexible, tabular layout system (tables), we
have a method to control shadow trees (binding), we have a method to
rearrange the formatting structure (named flows). What else is covered
by Template Layout, except doing it very very quickly and having an
awful lot of magic?

That is, consider the template
"aaa" / 5em
"b@c" / auto
"ddc" / 3em
It is a standard 3 column layout with one column longer (running along
the footer).
Then I put things within the appropriate slot with "position:<letter>".

Now consider:
<table><tr><td colspan="3" id="a">A</td></tr>
<tr><td id="b">B</td><td>@</td><td rowspan="2" id="c">C</td></tr>
<tr><td colspan="2" id="d">D</td></tr></table>
It is the same layout, but in my document, logically, the content goes
immediately after the header, the footer, then the sidebar, then the
longer navigation bar.

How do I solve the problem?
<table><tr><td colspan="3" id="a"></td></tr>
<tr><td id="b"></td><td><div>everything, including header, footer,
navigations, etc.</div></td><td rowspan="2" id="c"></td></tr>
<tr><td colspan="2" id="d"></td></tr></table>
<style>
#a { content: from(slot-a); }
#b { content: from(slot-b); }
#c { content: from(slot-c); }
#d { content: from(slot-d); }
tr:first-of-type { height: 5em; }
tr:last-of-type { height: 3em; }
</style>
Again, same layout, and I got source order independence. But
unfortunately, I cannot include those elements in my document, it
would break semantic.

So the final solution is:
<xbl xmlns="http://www.w3.org/ns/xbl">
<binding id="my-template">
<template><div id="table"><div class="tr"><div id="a" /></div>
<div class="tr"><div id="b" /><div id="content"><content /></div><div
id="c" /></div>
<div class="tr"><div id="d" /></div></div></template>
<style>
#table { display:table; }
.tr { display:table-row; }
#a, #b, #c, #d { display:table-cell; }
#a { content: from(slot-a); column-span: 3 }
#b { content: from(slot-b); }
#c { content: from(slot-c); row-span: 2 }
#d { content: from(slot-d); column-span: 2 }
tr:first-of-type { height: 5em; }
tr:last-of-type { height: 3em; }
</style></binding></xbl>

and
#template { binding:url(mybinding.xml#my-template); }
header { float:to(slot-a); }
aside { float:to(slot-b); }
nav { float:to(slot-c); }
footer { float:to(slot-d); }

I achieved a full liquid layout, with full source independence,
without using any of Template Layout. So I ask... why so much magic in
Template Layout?

Giovanni

[1] http://lists.w3.org/Archives/Public/www-style/2009Oct/0144.html

Received on Monday, 19 October 2009 14:37:49 UTC