NOTE-CSS-smil-19980720
NOTE-CSS-smil-19980720
W3C Note 20-July-1998
Copyright © 1998 W3C (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.
Authors:
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.
Please direct comments to www-smil@w3.org, a public discussion forum.
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}
|
auto | Only pixel values are exposed |
height="H%" |
{height: H%}
|
- | None |
left="L" |
{left: Lpx}
|
0 | Only pixel values are exposed |
left="L%" |
{left: L%}
|
- | None |
top="T" |
{top: Tpx}
|
0 | Only pixel values are exposed |
top="T%" |
{top: T%}
|
- | None |
width="W" |
{width: Wpx}
|
auto | Only pixel values are exposed |
width="W%" |
{width: W%}
|
auto | None |
z-index="Z" |
{z-index: Z}
|
0 | None |
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.
Example: The following example SMIL document:
<smil>
<body>
<par>
<img src="img1" begin="5s" dur="10s" />
<img src="img2" begin="0s" dur="10s" />
</par>
</body>
</smil>
should be rewritten as follows before being rendered by a CSS-based renderer in order to achieve the correct stacking order:
<smil>
<body>
<par>
<img src="img2" begin="0s" dur="10s" />
<img src="img1" begin="5s" dur="10s" />
</par>
</body>
</smil>
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:
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.
The following abbreviations are used:
| SMIL code | CSS2 code |
height="Hpx"no width attribute, no fit attribute |
{height: Hpx; |
width="Wpx"no height attribute, no fit attribute |
{width: Wpx; |
fit="fill" |
{height: ITR_Hpx; |
fit="fill" |
{height: Hpx; |
fit="fill" |
{height: Hpx; |
fit="hidden" |
{overflow: hidden} |
fit="meet" |
{height: itr_h*min(H/ITR_H,W/ITR_W)px; |
fit="meet" |
{height: Hpx} |
fit="meet" |
{width: Wpx} |
fit="slice" |
{height: h-i*max(H/ITR_H,W/ITR_W)px; |
fit="scroll" |
{overflow="auto"} |
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.
a {display:block}
anchor {display:block}
animation {display: block;
position: absolute}
body {display: block}
head {display: none}
img {display: block;
position: absolute}
layout {display: none}
meta {display: none}
par {display: block}
region {display: none}
ref {display: block;
position: absolute}
root-layout {display: none}
seq {display: block}
smil {display: block}
switch {display:block}
text {display: block;
position: absolute}
textstream {display: block;
position: absolute}
video {display: block;
position: absolute}
The following examples show two SMIL documents. The first one uses SMIL basic layout. The second one uses CSS2. These two documents are exactly equivalent, using the mappings defined earlier.
<smil>
<head>
<layout>
<region id="r" top="20" left="20" />
</layout>
</head>
<body>
<img region="r" src="test"
dur="10s" />
</body>
</smil>
<smil>
<head>
<layout type="text/css">
[region="r"] { top: 20px; left: 20px }
</layout>
</head>
<body>
<img region="r" src="test"
dur="10s" />
</body>
</smil>
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:
These requirements should be treated in future work on CSS3.