[This local archive copy mirrored from the canonical site: http://www.w3.org/TR/NOTE-CSS-smil; links may not have complete integrity, so use the canonical document at this URL if possible.]

NOTE-CSS-smil-19980615

Displaying SMIL Basic Layout with a CSS2 Rendering Engine

W3C Note 15-June-1998

This version:

http://www.w3.org/TR/1998/NOTE-CSS-smil-19980615

Latest version:

http://www.w3.org/TR/NOTE-CSS-smil

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:

• Philipp Hoschka, W3C, Chair SYMM WG (hoschka@w3.org)
• Chris Lilley, W3C, Chair CSS WG (chris@w3.org)

Status of This Document

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.

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.

1. Introduction

The layout language in SMIL 1.0 exposes parts of CSS2, in the same way as presentational aspects of HTML 4.0 and MathML. 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 chose to provide 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.

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.

2. Mapping onto CSS2 properties

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.

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

Fit Attribute

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.

The following abbreviations are used:

• ITR_H: intrinsic height of replaced element
• ITR_W: intrinsic width of replaced element

SMIL code	CSS2 code
height="Hpx" no width attribute, no fit attribute	{height: Hpx;  width: ITR_Wpx;  overflow: hidden }
width="Wpx" no height attribute, no fit attribute	{width: Wpx;  height: ITR_Hpx;  overflow: hidden }
fit="fill" width="Wpx"	{height: ITR_Hpx;  width:  Wpx }
fit="fill" height="Hpx"	{height: Hpx;  width:  ITR_Wpx }
fit="fill" height="Hpx" width="Wpx"	{height: Hpx;  width:  Wpx }
fit="hidden"	{overflow: hidden}
fit="meet" height="Hpx" width="Wpx"	{height: itr_h*min(H/ITR_H,W/ITR_W)px;  width:  itr_w*min(H/ITR_H,W/ITR_W)px }
fit="meet" height="Hpx"	{height: Hpx}
fit="meet" width="Wpx"	{width: Wpx}
fit="slice"	{height: h-i*max(H/ITR_H,W/ITR_W)px;  width:  w-i*max(H/ITR_H,W/ITR_W)px }
fit="scroll"	{overflow="auto"}

3. Fixed Stylesheet for SMIL Basic Layout

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}

4. Translation of SMIL Basic Layout elements into CSS2

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>

5. New Requirements for CSS

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.

These requirements should be treated in future work on CSS3.