[ZPT] Stylesheet Language

Evan Simpson evan@4-am.com
Fri, 10 May 2002 12:39:32 -0500


Thanks to Casey Duncan, I'm now thinking hard about an extension to ZPT 
that I'm tentatively calling Template Style Sheet Language (pronounced 
"Tassle").  Much like CSS, this would allow you to write the equivalent 
of TAL statements out-of-line, and apply them based on tag selectors.

Stylesheet sytax is much more forgiving than attribute syntax, so some 
of the more awkward aspects of TAL could be abandoned.  For instance, we 
can use "=" instead of "define", and we can have multiple instances of 
the same kind of statement applied in whatever order we specify.  String 
expressions could simply be quoted strings, and explicit expression 
types could become pseudo-functions such as "python(<expr>)". A major 
advantage would be the ability to attach generic code to tags based on 
pattern matching.  This also eliminates the need to add new tags in 
order to control scope and order of operations.

Here's a complex example with made-up syntax:

<style type="text/tssl">
   @begin { base = template/portal_url; }
   .item-list {
     items = path-string(attrs/items);
     @if not(items) replace: structure "<b>No items</b>";
   }
   .item-list > * {
       repeat: item items;
       i = repeat/item/number;
       [name] = "item-$1";
   }
   img.portal { [src] = "$base/${attrs/src}"; }
   form.auto {
     recname = attrs/name;
     recpath = "$recname | options/$recname | nothing";
     rec = path_string(recpath);
   }
   form.auto input, select, textarea {
     name = attrs/name;
     [name] = "$recname.$name:record";
     value = path_string("rec/$name | nothing");
   }
   form.auto input[type=text] {
     [value] = value;
   }
   form.auto textarea {
     content: value;
   }
   form.auto option {
     optvalue = attrs/value;
     [selected] = python(value == optvalue);
   }
</style>

<ul class="item-list" items="here/query.sql">
   <li tal:content="item/text">Record</li>
</ul>

<form class="auto" name="person">
   <img class="portal" src="face.png" />
   Name: <input type="text" name="fullname" />
   Password: <input type="password" name="password" />
   <textarea name="bio"></textarea>
   Sex: <select name="sex">
     <option value="M">Male</option>
     <option value="F">Female</option>
   </select>
</form>

The interaction between TAL and TSSL could be controlled by having all 
TSSL statements for a tag execute before TAL on the tag, but providing a 
  "@tal;" statement, so that the following:

<style type="text/tssl">
* { x = "1"; @tal; y = "$z 3"; [z] = z; }
* { y = "2"; @tal; content: y; }
</style>

<p tal:define="z string:$x $y"></p>

...would produce:

<p z="1 2">1 2 3</p>

...since the order of execution would be:

1) x = "1";
2) y = "2";
3) tal:define="z string:$x $y"
4) y = "$z 3";
5) [z] = z;
6) content: y;

For documents, such as XML with a DTD, in which an inline <style> would 
not work, we could (ab)use the standard:

<?xml-stylesheet path="here/autoform" type="text/tssl"?>

Cheers,

Evan @ 4-am