Comments during the SMIL review period suggested that the relationship between
SMIL and CSS should be more clearly explained. This note provides a detailed
explanation of the relationship between SMIL layout and CSS. It updates a
Note from June 15. Most changes are editorial. A section on mapping z-index
values from SMIL basic layout to CSS has been added.

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.

The layout language in SMIL 1.0 [SMIL10] exposes
parts of CSS2 [CSS2], in the same way as presentational
aspects of HTML 4.0 [HTML40] and MathML 1.0
[MathML10]. This paper makes explicit the mapping
from SMIL basic layout to CSS2, for the benefit of implementors building
a SMIL viewer by translating directly into CSS2. In most cases, this is a
trivial 1:1 mapping.

SMIL basic layout has a few multimedia-related options that the initially
text-based CSS does not cover yet. These will be submitted as requirements
for work on CSS3.

The SMIL basic layout language is an XML-based language that exposes parts
of the W3C formatting model as defined by properties in the CSS2 recommendation.
The majority of CSS2 properties only apply to text. Only a small number of
the properties (7 out of 104) apply to multimedia. SMIL provides an XML-based
syntax to interface with these properties rather than using CSS-syntax. The
working group considered that is was too burdensome to require SMIL players
to implement an additional parser for a CSS-based syntax when using such
a small percentage of the CSS properties. However, SMIL allows the use of
CSS2 as an alternate layout language, which allows a smooth upgrade to CSS2
in the future.

SMIL is not the only W3C specification that exposes a subpart of the W3C
formatting model, or uses a different syntax. Others are HTML 4.0 transitional,
MathML and XSL [XSL].

In the following, we give the information required to build a SMIL renderer
on top of a CSS2 implementation. Section 2 shows how the XML attributes used
in SMIL basic layout are mapped into the syntax of CSS2 properties. Section
3 defines a fixed stylesheet that contains the values for all properties
that are constant in SMIL basic layout, and different from the initial values
defined in CSS2. Section 4 shows an example in which a SMIL document containing
SMIL basic layout is converted into a document containing CSS2 which has
the equivalent layout. Section 5 lists requirements for CSS3 that have been
discovered during the work on SMIL.

The SMIL basic layout language consists of two XML elements: "region" and
"root-layout". This section shows how the layout-related attributes of these
elements can be mapped onto CSS2 properties.

The following table gives the equivalent CSS2 code for attribute-value pairs
in SMIL basic layout in cases where a 1-1 mapping is possible. The first
column shows assignements to the XML attributes in SMIL basic layout. The
second column shows the equivalent CSS2 code. The third column shows the
default value of the attribute, and the forth column shows any restrictions
that SMIL puts on the property values defined in CSS2.

For the mapping of the z-index attribute, see additional rules below.

SMIL code

CSS2 code

Default value

Restrictions on property values

background-color="C"

{background-color: C}

transparent

"system colors" not exposed

height="H"height="Hpx"

{height: Hpx}

auto

Only pixel values are exposed

height="H%"

{height: H%}

-

None

left="L"left="Lpx"

{left: Lpx}

0

Only pixel values are exposed

left="L%"

{left: L%}

-

None

top="T"top="Tpx"

{top: Tpx}

0

Only pixel values are exposed

top="T%"

{top: T%}

-

None

width="W"width="Wpx"

{width: Wpx}

auto

Only pixel values are exposed

width="W%"

{width: W%}

auto

None

z-index="Z"

{z-index: Z}

0

None

z-index Attribute

CSS2 prescribes that boxes with the same stack level in a stacking context
are stacked in the order in which they appear in the document tree.

This is to allow "progressive rendering" for formats such as HTML, i.e. by
default elements are rendered in the temporal order in which they are
received by the client. This avoids that the renderer must "look ahead" in
the file when formatting the document. Instead, document parts can be displayed
on the screen as soon as they are received from the Internet or read from
a file.

For SMIL, the same consideration results in an additional rule that has to
be followed when two boxes have the same stack level within a stacking context.
Boxes are stacked in temporal order, i.e. if an element A has a later effective
begin time than an element B, the box for A is stacked on top of the box
for B. If the effective begin times are identical, the boxes are stacked
in order of the document tree.

Before being passed to a CSS-based renderer, the order of elements in the
SMIL document tree should thus be changed so that elements are ordered by
increasing begin time. This is only relevant for children of a "par" element.
It can be achieved, for example, by reordering the parse tree, or by rewriting
the document before parsing it.

A particularity of SMIL is that many of its elements are what CSS2 calls
"replaced elements". This means that they behave like the "img" element in
HTML, i.e. the content of the element is include by reference (a URI) rather
than contained in the SMIL file itself.

For layout, this raises the issue that the width and height defined in the
SMIL document may differ from the "intrinsic" width and height of the included
media object. The layout language has to be prepared to handle this issue.

SMIL offers the following alternatives:

fill: Resize the media object so that it fills the width and height defined
in the SMIL document

hidden: Do not resize the media object, but fill the box with the background
color, or crop the object

meet: Scale the object so that its aspect ratio is kept, and it is stays
fully visible

scroll: Scale the object so that its aspect ratio is kept, and some parts
are cropped

slice Add a scrolling mechanism if the object exceeds the box

These alternatives can be selected using a single attribute ("fit").

The table below shows how they can be mapped onto CSS. The first column shows
SMIL code, and the second column shows the equivalent CSS2 code.

This fixed stylesheet defines the values of properties that differ from the
initial values defined in CSS2 for properties which are not exposed in SMIL
basic layout, and thus cannot be changed when using SMIL basic layout.

The W3C formatting model as defined by CSS was originally designed as a
stylesheet language for textual content. In CSS2, a number of properties
have been added that make the W3C formatting model also usable for multimedia
content. SMIL makes use of these properties.

Naturally, SMIL took a much closer look at the requirements for multimedia
than it was possible for the CSS designers. Consequently, a couple of
requirements for future work were discovered:

A future version of CSS should support replaced elements that do not have
an intrinsic size. The behavior of the rendering engine for these elements
is undefined in CSS2.

A future version of CSS currently should allow easy authoring of the
functionality supported by the SMIL "fit" attribute.

A future version of CSS should allow a simplified way to create an atomic
stacking context for the z-index property.