W3C

NOTE-stts2

Simple Tree Transformation Sheets 2

Submitted to W3C 17 October 1997

This version:
http://www.w3.org/TR/NOTE-stts2-971017
French version:
http://www.w3.org/TR/NOTE-stts2-971017.html.fr
Author :
Daniel Glazman , Electricité de France , Research and Development Division

Status of this document

This document is a NOTE made available by the W3 Consortium for discussion only. This indicates no endorsement of its content, nor that the Consortium has, is, or will be allocating any resources to the issues addressed by the NOTE.

This document is a submission to W3C from Electricité de France. Please see Acknowledged Submissions to W3C regarding its disposition. This document is a proprietary specification developed by ELECTRICITE DE FRANCE partly based on the Cascading Style Sheets specification. This document has been writen using a HTML 3.2 editor and then transformed by CSSize to take advantage of CSS.


  1. Status of this document
  2. Introduction
  3. Definitions and conventions
  4. Selectors
    1. Groups of selectors
    2. Hierarchical selector
    3. Sequential selector
    4. Unique hierarchical selector
    5. Direct relationship selector
    6. Attribute addressing selector
    7. Explosive selector
    8. Class addressing selector
    9. ID addressing selector
  5. Declarations
  6. Properties
    1. Change an element : transform-element
    2. Add a CSS style : add-style
    3. Add a class : add-class
    4. Add a style sheet : add-css
    5. Add a rule to a local style sheet : add-rule ou add-unique-rule
    6. Add a HTML attribute: add-attribute
  7. Proof of concept
  8. STTS ruleset for deprecated HTML structures replacement
  9. References
  10. Acknowledgements

Introduction

The release of the Cascading Style Sheets in the World Wide Web universe the 17 december 1996 is a major evolution of Web publishing. For the first time in very common software tools, it is possible to separate content and presentation in data. This old dream of SGML gurus, fighting against the rest of the world to make them realize this is important, is now a reality. Each HTML element can carry presentation styles.

The main effect of this evolution is the deprecation of several HTML elements and attributes. It is then necesssary to describe the set of transformations that should been applied to a HTML document containing these deprecated informations in order to make it conformant to HTML Clean and take advantage of CSS.

The current specification does not want to re-invent the wheel and it should not be extended to a very large set of operations. DSSSL is recommended for large applications. The goal of the current specification is only providing a very simple, easy, quickly implementable of a transformation algorithm of HTML documents that a HTTP server could handle on the fly for instance.

Definitions and conventions

A set of STTS transformations is made of rules . Each rule is itself made of two parts : selectors and declarations .

Whenever a set of STTS rules is contained in a file and the operating system ruling this file allows it, the common extension associated to this file should be *.tts

A selector is a condition attached to a HTML structure. If this condition is true, the declarative part of the corresponding rule will be applied to the deepest selected element in the document's structure.

A declaration is made of tho parts : a property and the value of this property. This property rules the transformation applied to the element making the selector condition true.

The definition of each STTS property in this document contains a summary table like the following one :

Value possible values or possible set of values
Applies to elements this property applies to

Selectors

A selector is conditional link between the structure of a HTML document and a set of STTS declarations.

Groups of selectors

It is possible to group selectors having the same declarative section separating them with commas.

The following example

H1 { add-class : "centered" }
H2 { add-class : "centered" }
H3 { add-class : "centered" }

is then strictly equivalent to

H1, H2, H3 { add-class : "centered" }

Hierarchical selector

Two selectors separated by a space specify a condition on a HTML subtree (a hierarchical selector). For instance

DIV TT

specifies that the corresponding declarations are to be applied to all TT elements contained in a DIV element or in its descendance. Hierarchical selectors are compatible with groups of selectors

P TT I, P TT EM

Sequential selector

A sequence of selectors surrounded by slashes / indicates a sequence of conditions on a corresponding sequence of HTML elements. For instance

DIV /IMG UL/ { ... }

is to be applied to UL lists following an image IMG and having the same parent, both of them contained in a DIV or in its descendance.

A double starting (respectively ending) slash indicates that the following (resp. preceeding) selector holds an additionnal condition : the corresponding selected element has to be the first (resp. last) child of its parent. For instance :

DL ~ //DT/ { ... }

is to be applied to DT elements being the first child of a DL definition list..

Unique hierarchical selector

A unique hierarchical selector is a special case of a sequential selector.

UL ~ //LI// { ... }

is to be applied to LI list items being the unique child of a UL unordered list..

Direct relationship selector

Two selectors separated by a tilda specify a direct relationship. For instance

DIV ~ TT { ... }

is to be applied to all TT elements directly contained in a DIV element. Without the tilda, declarations are to be applied to all TT contained in a DIV or any element of its descendance.

/EM ~ TT/ { ... }

is to be applied to all TT directly following a EM (they have the same parent). Without the tilda, declarations are to be applied to all TT in the chain of elements following a EM (they have the same parent).

Attribute addressing selector

An attribute addressing selector is a condition on the existence or on the value of an attribute carried by a HTML element. This condition is described between square brackets. For instance

P[ALIGN=CENTER] { ... }

is to be applied to P elements carrying the ALIGN attribute having CENTER for value.

TABLE[BORDER]   { ... }

is to be applied to TABLES elements carrying the BORDER attribute regardless to its value.

SPAN[CLASS=="abstract"] { ... }

Important : please note the double equal sign.
This rule is to be applied to SPAN elements carrying the CLASS attribute, this attribute being defined as cdata-list , one of its values being abstract .

STTS rules using an attribute adressing selector can use the selected values of these attributes (or the values of these attributes if no value selection is specified) in the declarative section of the rule. These values are available as environment variables $$1$ $$2$ ... . Two other variables are available : $$N$ which contains the name of the element the rule is applied to and $$P$ which contains the name of its parent element, if any.

For instance :

BODY[BGCOLOR][TEXT] {
        add-style : "background-color : $$1$";
        add-style : "color : $$2$";
       }
[align=CENTER] { add-class : "centered" }

Warning : groups of selectors can use different attribute addressing selectors. Using these variables may then be incompatible with groups of selectors.

Explosive selector

There are two kinds of explosive selectors, both specified by the circumflex accent ^ :

Explosive selectors are only meaningful on the deepest selector.

An explosive element selector indicates that the content of the element must replace the element itself and that the declarative part of the rule is to be applied to the parent element. For instance :

P ~ //^CENTER//  { add-class : centered }

applied to

<P><CENTER>coucou</CENTER></P>

will result in

<P CLASS=centered>coucou</P>

while

P ~ //CENTER//  { add-class : centered }

(without ^ ) will result in

<P><CENTER CLASS=centered>coucou</CENTER></P>

An explosive attribute addressing selector is an attribute addressing selector indicating that this existing attribute has to be removed from the HTML structure after storing internally its value and before applying the declarative part of the rule.

P[^ALIGN]  { add-style : "text-align : $$1$ }" }

Class addressing selector

A class addressing selector is a condition on one of the values of the CLASS attribute carried by a HTML element. This condition follows a dot . . Only one class addressing selector is allowed per element. For instance

DIV ~ //P.abstract// { ... }

is to be applied to P elements carrying the abstract class and being the unique content of a DIV element.

ID addressing selector

An ID addressing selector is a condition on the existence on the value of the ID attribute carried by a HTML element. This condition follows a pound # . Only one ID addressing selector is allowed per element, of course. For instance

TD#a12 { ... }

is to be applied to TD table cells having ID a12 .

Declarations

The declarative part of a STTS rule follows the selectors and is described between round brackets

{ ... }

If this section contains more than one declaration, a semi-column ; separator is used between declarations.

Important : order of declarations does not matter.

Properties

Change an element : transform-element

Value name of a HTML element, between quoted or not.
Applies to all HTML elements

This property changes the name of the element the current rule is applied to.

For instance, the rule

P#a12 { transform-element : DIV }

applied to

<P ID=a12>bonjour à tous </P>

will result in

<DIV ID=a12>bonjour à tous </DIV>

Warning : this transformation is performed regardless to the HTML DTD.

Add a CSS style : add-style

Value a set of CSS declarations between quotes
Applicable à all HTML elements

This property adds the STYLE attribute to the current element if necessary. It adds the contents of the declared value to the contents of this attribute.

For instance, the rule

H1[^ALIGN] { add-style : "text-align : $$1$"
           }

applied to

<H1 ALIGN=CENTER>Chapitre 1</H1>

will result in

<H1 STYLE="text-align : CENTER">Chapitre 1</H1>

Add a class : add-class

Value name of a class, or a string containing a list of classes
Applies to all HTML elements

This property changes the current element adding the declared class(es) to its CLASS attribute, which is created if necessary.

For instance, the rule

H1[^ALIGN] { add-class : "$$1$justif"
           }

applied to

<H1 ALIGN=CENTER>Chapitre 1</H1>

will result in

<H1 CLASS=CENTERjustif>Chapitre 1</H1>

Add a style sheet : add-css

Value value is made of two data :
  • a keyword
    • link if a LINK reference to an external CSS style sheet is to be added to the current document
    • style if the contents of the declared style sheet is to be integrated in the HTML document in a new STYLE element
  • a character string between quotes containing the URL or path to a file containing the style sheet
Applies to HEAD only

This property adds to HEAD a LINK to a CSS style sheet or a new STYLE containing the contents of the style sheet.

For instance, the rule

HEAD { add-css : link "http://www.edf.fr/styles/default.css" }

applied to

...
<HEAD>
<TITLE>title of this document</TITLE></HEAD>
...

will result in

...
<HEAD>
<TITLE>title of this document</TITLE>
<LINK REL=stylesheet TYPE="text/css"
      HREF="http://www.edf.fr/styles/default.css">
</HEAD>
...

Add a rule to a local style sheet : add-rule and add-unique-rule

Value the definition of a CSS rule
Applies to all HTML elements

This property adds to the current document, in an existing or created STYLE element in HEAD document's header, the specified CSS rule. If its definition contains double-quotes " , these quotes have to be preceeded by a backslash \ .

For instance :

BODY[^LINK] {
     add-rule : "A:LINK { color : $$1$ } "
    }

Important warning : this rule will be added each time selectors are matching the internal HTML structure. Replace add-rule by add-unique-rule if you want this declaration to be applied only once over the whole document. For instance, if you want to define a CSS rule only if a certain CLASS exists in the document :

.thisClass {
    add-unique-rule : ".otherClass { color : red }"
}

Note : factorization of CSS rules if they have the same selector, and factorization of CSS rules having the same declarative part but different selectors is a more complex job, but is implementable. The way add-rule and add-unique-rule add CSS rules to the document depends only on the implementation of the User Agent.

Add a HTML attribute: add-attribute

Value definition of a HTML attribute
Applies to all HTML elements

This property adds to the selected element the attribute defined in property's value. If this value has to contain quotes ", they should be preceeded by a backslash \. For instance : dynamic association of a CLASS to a language

.french { add-attribute : "LANG=fr" }

applied to

<H1 CLASS=french>Titre de la section</H1>

will result in

<H1 LANG=fr CLASS=french>Titre de la section</H1>

Warning : this transformation is performed regardless to the HTML DTD.

Proof of concept

STTS 2 are implemented in CSSize, proof of concept. CSSize is a new software developed by the author of the current document at the Research and Development Division of ELECTRICITE DE FRANCE, which is a W3C member.

For more information about CSSize, please contact

< cssize-t@cli51ak.der.edf.fr >

or consult the on-line data

<URL:http://lara0.exp.edf.fr/glazman/cssize.en.htm >

(after 1st November 1997).

A version of CSSize based on CSS 1 selectors (STTS 1) is already available.

STTS ruleset for deprecated HTML structures replacement

Here is an example of a set of STTS rules one can apply to a HTML 3.2 document in order to replace some deprecated or old attributes and elements by CSS rules. Warning : this set is provided as is without any garanty of any kind !.

XMP, PLAINTEXT, LISTING { transform-element : PRE }

APPLET { transform-element : OBJECT }

CENTER { transform-element : DIV ;
         add-class         : centered
       }

TT     { transform-element : SPAN ;
         add-class         : monospace
       }

I      { transform-element : SPAN ;
         add-class         : italicized
       }

DIR, MENU { transform-element : UL }

HEAD { add-css : style "standard.css" }

BODY[^BGCOLOR][^TEXT][^LINK][^ALINK][^VLINK] {
         add-style    : "background-color : $$1$" ;
         add-style    : "color : $$2$" ;
         add-unique-rule : "A:link     { color : $$3$ }" ;
         add-unique-rule : "A:actived  { color : $$4$ }" ;
         add-unique-rule : "A:visited  { color : $$5$ }"
       }

the standard.css file contains the following CSS rules :

.centered    { text-align     : center }

.monospace   { font-family    : monospace }

.italicized  { font-style     : italic }

References

Acknowledgements

Special thanks to

I also wish to thank the HTML Working Group and CSS+FP Working Group chairmen and members who welcomed me in their Ali-Baba magic cave on behalf of Electricité de France. The permanent brainstorming and discussions happening there are the best seeds for imagination and creativity.


Daniel Glazman

Logo EDF made with CSS This document has been CSSized