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.

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.

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.

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 element selector

explosive attribute addressing selector

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.

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.

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 !.

References

Acknowledgements

Special thanks to

for his help, support and ideas

Chris Lilley, W3C

for all their work

CSS 1 and 2 authors

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.