This Section defines the SMIL layout module. This module contains elements and attributes allowing for positioning of media elements on the rendering surface (either visual or acoustic). Since these elements and attributes are defined in a module, designers of other markup languages can reuse the functionality in the SMIL layout module when they need to include media layout in their language. Conversely, language designers incorporating other SMIL modules do not need to include the layout module if other layout functionality is already present.
Changes with respect to the layout elements and attributes in SMIL 1.0 [SMIL10] are expected to be minor. SMIL 1.0 already provides for using alternative layout models, for example CSS [CSS2], and these can provide much of the additional functionality desired over the SMIL basic layout module. The support for hierarchical regions is one area in which the syntax may be extended.
SMIL 1.0 includes a basic layout model for organizing media elements into
regions on the visual rendering surface. The
<layout> element is used in the document
<head> to declare a set of regions on which media elements
are rendered. Media elements declare which region they are to be rendered
into with the region attribute.
Each region has a set of CSS2 compatible properties such as top,
left, height, width, and
background-color. These properties can be declared using a syntax
defined by the type attribute of the layout element. In this
way, a set of regions can be described using the SMIL 1.0 basic layout syntax,
CSS2 syntax, or some other syntax [SMIL-CSS2].
For example, to describe a region with the id "r" at location 15,20 that is 100 pixels wide by 50 pixels tall using the SMIL basic layout model:
<layout>
<region id="r" top="15px" left="20px" width="100px" height="50px"/>
</layout>
To create the same region using CSS2 syntax:
<layout type="text/css">
[region="r"] { top: 15px; left: 20px; width: 100px; height:50px; }
</layout>
To display a media element in the region declared above, specify the region's id as the region attribute of the media element:
<ref region="r" src="http://..." />
Additionally, implementations may choose to allow using the CSS syntax to set the media layout directly. This can be done by using the selector syntax to set layout properties on the media elements. For example, to display all video and image elements in a rectangle at the same size and position as the examples above:
<layout>
video, img { top:15px; left:20px; width:100px; height=50px; }
</layout>
Note that multiple layout models can be specified within a
<switch> element, each with a different type.
The first layout with a type supported by the implementation
will be the one used.
This section defines the elements and attributes that make up the SMIL basic layout module.
<layout>
element
The <layout> element determines how the elements in the
document's body are positioned on an abstract rendering surface (either visual
or acoustic).
The <layout> element must appear before any of the declared
layout is used in the document. Typically the
<layout> element appears in the document head section.
If a document contains no <layout> element, the positioning
of the body elements is implementation-dependent.
A SMIL document can contain multiple alternative layouts by enclosing several
<layout> elements within a "switch" element. This can
be used for example to describe the document's layout using different layout
languages.
Element attributes
Element content
If the type attribute of the layout element has the value "text/smil-basic-layout", it can contain the following elements:
If the type attribute of the "layout" element has another value, the element contains character data.
<region>
element
The region element controls the position, size and scaling of media object elements.
In the following example fragment, the position of a text element is set to a 5 pixel distance from the top border of the rendering window:
<smil>
<head>
<layout>
<region id="a" top="5" />
</layout>
</head>
<body>
<text region="a" src="text.html" dur="10s" />
</body>
</smil>
Element attributes
The "region" element can have the following attributes:
The default value of "fill" is "hidden".
If the value of the "skip-content" attribute is "true", and one of the cases
above apply, the content of the element is ignored. If the value is "false",
the content of the element is processed.
The default value for "skip-content" is "true".
- If two boxes generated by elements A and B have the same stack level, then
- If the display of an element A starts later than the display of an element B, the box of A is stacked on top of the box of B (temporal order).
- If the display of the elements starts at the same time, and an element A occurs later in the SMIL document text than an element B, the box of A is stacked on top of the box of B (document tree order as defined in CSS2).
Element content
"region" is an empty element.
root-layout> element
The <root-layout> element determines the value of the
layout properties of the root element, which in turn determines the size
of the viewport, e.g. the window in which the SMIL presentation is rendered.
If a document contains more than one "root-layout" element, this is an error, and the document should not be displayed.
Element attributes
The "root-layout" element can have the following attributes:
<region> element.
<region> element.
<region> element.
<region> element.
<region> element.
Element content
"root-layout" is an empty element.
SMIL basic layout is consistent with the visual rendering model defined in CSS2, it reuses the formatting properties defined by the CSS2 specification, and newly introduces the "fit" attribute [CSS2]. The reader is expected to be familiar with the concepts and terms defined in CSS2.
SMIL basic layout only controls the layout of media object elements. It is illegal to use SMIL basic layout for other SMIL elements.
The type identifier for SMIL basic layout is "text/smil-basic-layout".
Fixed property values
The following stylesheet defines the values of the CSS2 properties "display" and "position" that are valid when using SMIL basic layout with the SMIL language. These property values are fixed:
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}
Any other XML language using SMIL basic layout will have to define similar
fixed attributes for its elements. Note that as a result of these definitions,
all absolutely positioned elements ( <animation>,
<img>, <ref>,
<text>, <textstream> and
<video>) are contained within a single containing block
defined by the content edge of the root element.
Default values
SMIL basic layout defines default values for all layout-related attributes. These are consistent with the initial values of the corresponding properties in CSS2.
If the author wants to select the default layout values for all media object elements in a document, the document must contain an empty layout element of type "text/smil-basic-layout" such as:
<layout type="text/smil-basic-layout"></layout>
The current SMIL 1.0 basic layout syntax is useful for its intended purpose as a simple, lightweight means of laying out a multimedia presentation that is available in all SMIL players. However, the need has arisen for additional layout functionality. It is expected that this additional functionality can be added at low implementation and runtime cost and not violate the original lightweight design goals of SMIL basic layout.
Additional functionality expected to be provided via new syntax includes:
<layout> element. In this manner, an appropriate layout
can be selected for users with different accessibility requirements, or players
with different capabilities.
Additional functionality that may be provided via new syntax includes:
Additional functionality expected to be provided by support for additional CSS2/CSS3 properties includes:
Even given the straightforward extensions of the SMIL layout model discussed above, a number of open issues remain:
Ed: I think that we need to define a supported set of properties for visual
and audio regions and make this set as complete as possible, supporting any
attributes that have reasonable utility. If we do not define the list of
properties, we run the risk of having layout be non-interoperable.
Ed: This depends upon the cost of including a CSS parser in the runtimes.
If the cost is high, the current strategy allows for a direct mapping between
CSS and SMIL 1.0 layout syntax and requiring only the SMIL 1.0 is simpler.
If the cost is low, it would be advantageous to align with other W3C efforts
and require support for the CSS syntax.
Ed: This again depends upon the cost of including a CSS parser in the
runtimes. If the cost is low, it would be advantageous to deprecate the SMIL
1.0 syntax and encourage people to use the more powerful CSS syntax. I don't
think that we should disallow the SMIL 1.0 syntax altogether in this
release.
Ed: If we do not deprecate or remove the SMIL 1.0 syntax, we should extend
the attribute list to include the supported CSS properties.