5.1
Introduction

This section is informative.

This section defines the SMIL 2.0 Layout Modules, which are composed of a
BasicLayout module and three modules
with additional functionality that build on top of the
BasicLayout module: the
AudioLayout,
MultiWindowLayout, and
HierarchicalLayout modules.
The modules contain elements and attributes allowing for positioning of media
elements on the visual rendering surface, and control of audio volume. Since
these elements and attributes are defined in modules, designers of other
markup languages can choose whether or not to include this functionality
in their languages. Therefore, language designers incorporating other SMIL
modules do not need to include the layout modules if sufficient layout
functionality is already present.

5.2
Overview of the SMIL 2.0
BasicLayout Module

This section is informative.

The functionality in this module is essentially identical with the layout
functionality in [SMIL10].

Like SMIL 1.0, SMIL 2.0 BasicLayout module includes a 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 backgroundColor.
These properties can be declared using a syntax defined by
the type attribute of
the layout element. In this
way, media layout can be described using the either SMIL basic layout syntax
or CSS2 syntax (note that these are not functionally identical). Other layout
types are possible as well.

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 BasicLayout module:

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:

Note that multiple layout models could be specified within a control structure
such as the SMIL switch element, each with
a different type. The
first layout with
a type supported by the implementation will
be the one used.

5.3
SMIL 2.0 BasicLayout
Module Syntax and Semantics

This section is normative.

5.3.1
Elements and
Attributes

This section defines the elements and attributes that make up the functionality
in the SMIL BasicLayout module.

The 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. If present,
the layout element must appear
in the head section of the document.
If a document contains
no layout element, the positioning
of the body elements is implementation-dependent.

It is recommended that profiles including the SMIL 2.0 BasicLayout also support
the SMIL 2.0 BasicContentControl module. A document can then support multiple
alternative layouts by enclosing
several layout elements within
the SMIL switch element. This
could also be used to describe the document's layout using different layout
languages. Support for the system test attributes in the SMIL BasicContentControl
module also enables greater author flexibility as well as user accessibility.

Default layout values
can be assigned to all renderable elements by selecting the empty layout
element <layout></layout>.
If the document does not include
a layout element, then the positioning
of media elements is implementation-dependent.

Element attributes

type

This attribute specifies which layout language is used in the layout element.
If the user agent does not understand this language, it must skip the element
and all of its content up until the
next </layout> tag. The default value
of the type attribute is
"text/smil-basic-layout". This identifier value
supports SMIL 1.0 and SMIL 2.0 BasicLayout module layout semantics.

Element content

If the type attribute of
the layout element has the value
"text/smil-basic-layout", it may contain the
following elements:

Languages incorporating the BasicLayout module need to define what additional
elements are allowed as children. If
the type attribute of
the layout element has another
value, the element contains character data.

The 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:

The position of a region, as specified by
its top,
bottom,
left, and
right attributes, is always relative
to the parent geometry, which is defined by the parent element. For the SMIL
BasicLayout module, all region elements must have as their immediate parent
a layout element, and the region position is defined relative to the root
window declared in the sibling
root-layout element. The intrinsic
size of a region is equal to the size of the parent geometry.

When region sizes, as specified
by width and
height attributes are declared relative
with the "%" notation, the size of a region is relative to the size of the
parent geometry. Sizes declared as absolute pixel values maintain those absolute
values.

Conflicts between the region size and position attributes
width,
height,
bottom,
left,
right, and
top are resolved according
to the rules for placeholder elements as detailed below. The default values
of region position and size attributes is specified as
auto. This attribute value has the same meaning
here that it does in [CSS2], when there is
no distinction drawn between replaced and non-replaced element.

A placeholder element is one which has no intrinsic width or height, but
does have a bounding-box which has a width and height. SMIL BasicLayout regions
are placeholder elements. Placeholder elements are clipped to the bounding
box.

The governing equation for the horizontal dimension is:

bbw (bounding-box-width) = left + width + right

Given that each of these three parameters can have either a value of "auto"
or a defined value not "auto", then there are 8 possibilities:

Attribute values

Result before clipping to the bounding box

left

width

right

left

width

right

auto

auto

auto

0

bbw

0

auto

auto

defined

0

bbw - right

right

auto

defined

auto

0

width

bbw - width

auto

defined

defined

bbw - right - width

width

right

defined

auto

auto

left

bbw - left

0

defined

auto

defined

left

bbw - right - left

right

defined

defined

auto

left

width

bbw - left - width

defined

defined

defined

left

width

bbw - left - width

The vertical attributes height,
bottom, and
top are resolved similarly.
The governing equation for the vertical dimension is:

bbh (bounding-box-height) = top + height + bottom

Given that each of these three parameters can have either a value of "auto"
or a defined value not "auto", then there are 8 possibilities:

The use and definition of this attribute are identical to the "background-color"
property in the CSS2 specification. This attribute specifies the background
color used to fill the area of a region displaying media that is not filled
by the media. The display of the background color when the region is not
in use by a media element is controlled by the
showBackground attribute.
Unlike SMIL 1.0, this module requires support for
CSS2 system
colors.
The backgroundColor attribute
may take on the CSS value inherit. This means
that the background color will be that of the parent element. If the parent
element does not have an applicable background color property, the default
value of transparent is used instead.

The use and definition of this attribute are identical to the "bottom" property
in the CSS2 specification. Attribute values can be non-negative "percentage"
values, and a variation of the "length" values defined in CSS2. For "length"
values, SMIL 2.0 BasicLayout only supports pixel units as defined in CSS2.
It allows the author to leave out the "px" unit qualifier in pixel values
(the "px" qualifier is required in CSS2). Conflicts between the region size
attributes bottom,
left, right,
top, width,
and height are resolved according
to the rules for absolutely positioned, replaced elements in [CSS2]. The
default value of this attribute is auto.

fit

This attribute specifies the behavior if the intrinsic height and width of
a visual media object differ from the values specified by the height and
width attributes in the region element.
This attribute does not have a one-to-one mapping onto a CSS2 property, but
can be simulated in CSS2.

This attribute can have the following values:

fill

Scale the object's height and width independently so that the content just
touches all edges of the box.

hidden

Has the following effect:

If the intrinsic height (width) of the media object element is smaller than
the height (width) defined in the
region element, render the object
starting from the top (left) edge and fill up the remaining height (width)
with the background color.

If the intrinsic height (width) of the media object element is greater than
the height (width) defined in the
region element, render the object
starting from the top (left) edge until the height (width) defined in the
region element is reached, and clip
the parts of the object below (right of) the height (width).

meet

Scale the visual media object while preserving its aspect ratio until its
height or width is equal to the value specified by the height or width
attributes, while none of the content is clipped. The object's left top corner
is positioned at the top-left coordinates of the box, and empty space at
the right or bottom is filled up with the background color.

scroll

A scrolling mechanism should be invoked when the element's rendered contents
exceed its bounds.

slice

Scale the visual media object while preserving its aspect ratio so that its
height or width are equal to the value specified by the height and width
attributes while some of the content may get clipped. Depending on the exact
situation, either a horizontal or a vertical slice of the visual media object
is displayed. Overflow width is clipped from the right of the media object.
Overflow height is clipped from the bottom of the media object.

Note that the fit attribute applies
to visual media once it has an intrinsic two-dimensional size, such as images
and video. It does not apply to visual media that is rendered and adapted
to varying circumstances, such as the visual display of HTML, until its
two-dimensional spatial dimensions have been determined, such as after an
HTML page has been laid out to specific size.

height

The use and definition of this attribute are identical to the "height" property
in the CSS2 specification. Attribute values follow the same restrictions
and rules as the values of
the bottom attribute.
The intrinsic height of a region is the same as that of the parent geometry.
The default value of this attribute
is auto.

left

The use and definition of this attribute are identical to the "left" property
in the CSS2 specification.

Attribute values follow the same restrictions and rules as the values of
the "bottom" attribute.

The default value of this attribute
is auto.

regionName

This attribute assigns a name to this
region element that can be referred
to by the region attribute of media
object elements. The regionName
attribute is not a unique identifier; multiple
region elements can share the same
regionName attribute value.

right

The use and definition of this attribute are identical to the "right" property
in the CSS2 specification.

Attribute values follow the same restrictions and rules as the values of
the "bottom" attribute.

The default value of this attribute is auto.

showBackground

This attribute controls whether the
backgroundColor of a region
is shown when no media is being rendered to the region:

If the value of
showBackground is
always, then the background color will be shown
in the region when no media object is rendering into that region. If the
region is part of a
hierarchical layout, then any ancestor regions must also either be active
or have a showBackground
value of always for the background color to be
shown.

If the value of
showBackground is
whenActive, then the background color will be
not be shown in the region when no media object is rendering into that region.
If the region is part of a
hierarchical layout,
then the background color will also be shown when any descendent regions
are active.

The use and definition of this attribute are identical to the "top" property
in the CSS2 specification.

Attribute values follow the same restrictions and rules as the values of
the bottom attribute.

The default value of this attribute
is auto.

width

The use and definition of this attribute are identical to the "width" property
in the CSS2 specification.

Attribute values follow the same restrictions and rules as the values of
the bottom attribute. The intrinsic
width of a region is the same as that of the parent geometry.

The default value of this attribute
is auto.

z-index

The use and definition of this attribute are identical to the "z-index" property
in the CSS2 specification, with the following exception:

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

Else, 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).

A profile integrating the SMIL 2.0 BasicLayout module must provide a means
of declaring an XML identifier on
region elements.

The 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 window in which the SMIL presentation is rendered.

If more than
one root-layout element
is parsed within a
single layout element, this
is an error, and the document should not be displayed. This does not
include root-layout elements
skipped by the user agent (e.g. because the
enclosing layout element was
skipped due to an
unrecognized type or a
test attribute evaluated to false).

The semantics of
the root-layout element
are as in SMIL 1.0: the attributes of
the root-layout element
determine the size of the top level presentation window, and the declared
sibling regions are arranged within this top level window. If either the
height or
width of the
root-layout element is not
specified, the value of the attribute is implementation-dependent.

Defined
in backgroundColor
under the region
element. Note that the default background color is
transparent, which implies that, by default,
the implementation-dependent window background will be shown.

Sets the height of the root element. Only length values are allowed. For
"length" values, SMIL 2.0 BasicLayout only supports pixel units as defined
in CSS2. It allows the author to leave out the "px" unit qualifier in pixel
values (the "px" qualifier is required in CSS2).

width

Sets the width of the root element. Only length values are allowed. For "length"
values, SMIL 2.0 BasicLayout only supports pixel units as defined in CSS2.
It allows the author to leave out the "px" unit qualifier in pixel values
(the "px" qualifier is required in CSS2).

This element supports the SMIL 1.0 syntax where
the root-layout element
is an empty sibling of the top
level region elements.

The region attribute

The region attribute is applied to
an element in order to specify which rendering region is assigned to the
element. The attribute refers to the abstract rendering region (either visual
or acoustic) defined within the layout section of the document. The referenced
abstract rendering region is determined by applying the following rules,
in order:

Find all elements in the layout section with
regionName attributes that are
assigned the same value as that of the
region attribute.

Remove the elements from this collection that are removed from the rendered
presentation due to the processing of
switch elements and test attributes.

If any elements remain, the media should be rendered in all of the referred
to regions. If the application cannot render the media simultaneously in
multiple regions, then the media should be rendered using the lexically first
remaining element.

If no elements have a regionName
attribute that is assigned the same value as that of the region attribute,
then select the element in the layout section whose unique identifier is
the value of the region attribute.

If this process selects no rendering surface defined in the layout section,
the values of the formatting properties of this element are defined by the
default layout values, which is described in the section on
integration requirements
for this module.

The language integrating this module must specify which elements have
a region attribute and any
inheritance of the attribute.

5.3.2
SMIL BasicLayout Module
Details

SMIL 2.0 BasicLayout module 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 2.0 layout regions influence the propagation of user interface events
(such as a mouse click, or hyperlink activation) to underlying visible elements.
When the location of an event corresponds to the background of a region rather
than the media that is displayed in that region, a
region background color of
transparent allows user interface events to pass
through to elements lower in the display stacking order. Conversely, regions
with non-transparent background colors will capture
user interface events, not allowing the event to pass through to elements
lower in the display stacking order. This behavior is separate from that
of a language profile's ability to make use of user interface events captured
by region elements.

Integration
Requirements

A profile integrating the SMIL 2.0 BasicLayout module must define the content
models for the layout element
if any elements beyond those specified here are to be allowed as children.

A profile integrating the SMIL 2.0 BasicLayout module must provide a means
of declaring an XML identifier on
region elements if the profile intends
on referring to region elements by
XML identifier. This value is used as the argument value to the
region attribute. This is not required
if the profile will only use the
regionName method of referring
to a region element.

A profile integrating the SMIL 2.0 BasicLayout module must specify which
elements have a region attribute
and any inheritance of the attribute.

If not otherwise defined by the profile, the default values of the layout
attributes listed in the SMIL 2.0 layout modules will apply to presented
elements not otherwise specifying layout semantics.

An element that does not refer to a valid
region element will display in the
default region. If not otherwise specified by the profile, the default region
is defined as filling and aligned to the upper-left corner of the presentation
window. This default region takes on default values for all other
region attributes.

5.4.1
Integration
Requirements for the AudioLayout Module

The functionality in this module builds on top of the functionality in the
BasicLayout module, which is a
required prerequisite for inclusion of the AudioLayout module.

5.4.2
Audio Volume Control

This section is normative.

SMIL 2.0 AudioLayout module supports control of aural media volumes via a
new property on the region
element, soundLevel. Multimedia
assigned to a region with an
explicit soundLevel attribute
will have its audio rendered at the given relative sound intensity.

5.5
SMIL 2.0 AudioLayout
Module Syntax and Semantics

This section is normative.

5.5.1
Elements and
Attributes

This section defines the elements and attributes that make up the SMIL 2.0
AudioLayout module.

Specifies the relative volume of the audio portion of a media element assigned
to play within the given region.
This associates the region element
with a sound reproduction unit. Cascaded
region's will accumulate their respective
sound level settings, as will be explained below.
region's that are used for multiple
sources apply their sound level setting to all of them. A sound source may
be reproduced by different units, e.g., through application of the
regionName attribute. In such
a "multiple window" case a separate
soundLevel may be applied to
each instance of the sound source, one per
region. Assigned level changes accumulate
across nested regions by multiplying percentage values.

Valid values are non-negative
CSS2
percentage values. Percentage values are interpreted relative to the
recorded volume of the media. The percentages are interpreted as a ratio
of output to input signal level, and is defined in terms of dB:

dB change in signal level = 20 log10(percentage-value /
100)

A setting of '0%' plays the media silently. A value of '100%' will play the
media at its recorded volume (0 dB). Similarly, a value of '200%' will play
the media nearly twice as loud (6 dB) as its recorded volume (subject to
hardware limitations). The default value is '100%'. The absolute sound level
of media perceived is further subject to system volume settings, which cannot
be controlled with this attribute.

5.6
Overview of the SMIL 2.0
MultiWindowLayout Module

This section is informative.

This section defines the functionality in the SMIL 2.0 MultiWindowLayout
module. This level contains elements and attributes providing for creation
and control of multiple top level windows on the rendering device.

5.6.1
Integration
Requirements for the MultiWindowLayout Module

This section is normative.

The functionality in this module builds on top of the functionality in the
BasicLayout module, which is a
required prerequisite for inclusion of the MultiWindowLayout module.

5.6.2
Multiple Top-Level
Window Support

This section is normative.

In [[SMIL 10]], and the SMIL 2.0
BasicLayout module, each presentation
is rendered into a single root window of a specific size/shape. The root
window contains all of the regions used to manage the rendering of specific
media objects.

This specification supports the concept of multiple top-level windows. Since
there is no longer a single root window, we use the term top level
instead. The assignment of the regions to individual top level windows allows
independent placement and resizing of each top-level window, if supported
by the including profile and implementation. The initial placement of the
top level windows on the display device and any available means of relocating
the top level windows is implementation-dependent.

A top level window is declared with
the topLayout element in
a manner similar to the SMIL
1.0 root-layout window,
except that multiple instances of
the topLayout element may
occur within a single layout element:

In this example, two top-level windows are defined ("WinV" and "WinC"), and
two regions are defined with one region ("pictures") assigned to WinV and
the other ("captions") to WinC. The definitions of the top-level windows
and the contained regions use a hierarchical syntax, unlike the
older root-layout element.

The top-level windows function as rendering containers only, that is, they
do not carry temporal significance. In other words, each window does not
define a separate timeline or any other time-container properties. There
is still a single master timeline for the SMIL presentation, no matter how
many top-level windows have been created. This is important to allow
synchronization between media displayed in separate top-level windows.

The display of top level windows can be controlled automatically by the player,
or manually by the user of the application. If a window is closed (by the
user) while any of the elements displayed in that window are active, there
is no effect on the timeline (if any) of those elements. However, a player
may choose not to decode content as a performance improvement. The means
provided to a user to close top level windows is implementation-dependent.

For SMIL 1.0 compatibility,
the root-layout element
will continue to support SMIL 1.0 layout semantics. The
new topLayout element will
support the extension semantics and the improved, nested syntax.

Note also that any one region may belong to at most one top-level (or root-level)
window. Regions not declared as children of
a topLayout element belong
to the root-layout window.
If no root-layout element
has been declared, the region is assigned to an additional window according
to the semantics in the BasicLayout
module.

5.7
SMIL 2.0
MultiWindowLayout Module Syntax and Semantics

This section is normative.

5.7.1
Elements and
Attributes

This section defines the elements and attributes that make up the SMIL 2.0
MultiWindowLayout module.

The topLayout
element

The topLayout element determines
the size of the a window in which the SMIL presentation is rendered, as well
as serving as a top level window in which to place
child region elements.

Multiple topLayout elements may
appear within a
single layout element,
each declaring an independent top-level window.

Each instance of a topLayout
element determines the size of a separate top-level presentation window,
and the descendant regions are arranged within this top-level window and
relative to the coordinate system of this window.

This module also provides control over when
topLayout windows open and close
in a presentation. Note that the precise mapping of
topLayout windows on to the host
environment is implementation-dependent. It is expected that implementations
will "pop up" independent desktop windows if they can, but other means of
supporting multiple topLayouts, such as by using frames, are allowed. When
automatically opening and closing windows, applications should try to comply
with the WAI User Agent Guidelines [UAAG] and allow the user to choose
whether to be warned that windows are being opened and closed, and give a
method for disabling automatic opening and closing of windows.

Defined in backgroundColor
under the region element. Note that
the default background color is transparent,
which implies that, by default, the implementation-dependent window background
will be shown.

close

Specifies when the top level window should be closed. If the value of
close is
onRequest, then the top level window should not
be closed automatically by the player and will only close if the user explicitly
closes it via the user interface. If the value of
close is
whenNotActive, then the top level window should
close automatically when no media is being displayed in any one of the window's
regions. For timed media using the SMIL
2.0 timing and synchronization modules, this means when there is no media
within its active duration or freeze period using any region of
the topLayout. The default
value of close is
onRequest.

Sets the height of the top-level window. Only length values are allowed.

open

Specifies when the top level window should be opened. If the value of
open is
onStart, then the top level window should be
opened when the presentation begins, and if closed, should not be reopened
automatically during the presentation. If the value of
open is
whenActive, then, if not already open, the top
level window should be opened when media is displayed in one of the window's
regions. For timed media using the SMIL
2.0 timing and synchronization modules, this means when there is any
media within its active duration or freeze period using any region of
the topLayout. The default
value of open is
onStart.

The layout element defined in
the SMIL BasicLayout module is extended with the addition that
the topLayout element is
added to the content model of
the layout element if
the type attribute of
the layout element has the value
"text/smil-basic-layout". In this case it can
contain the following elements:

5.7.2
MultiWindowLayout
Module Events

This module includes two events that may be included in the integrating language
profile.

topLayoutOpenEvent

Raised when a topLayout window
opens. This event is delivered to the associated
topLayout element. If a
topLayout closes and then reopens
when additional media becomes active in any of its regions, this event will
be raised again, and will be raised every subsequent time it reopens.

topLayoutCloseEvent

Raised when a topLayout closes
for any reason. This event is delivered to the associated
topLayout element. If a
topLayout reopens when additional
media becomes active in any of its regions, this event will be raised again
if and when the topLayout closes
again, and will be raised every subsequent time it closes.

Integration Requirements for the MultiWindowLayout Module Events

The language profile must specify the declarative names for binding these
events, as well as the bubbling behavior of the events.

5.7.3
Document Type Definition
(DTD) for the MultiWindowLayout Module

5.8
Overview of the SMIL 2.0
HierarchicalLayout Module

This section is informative.

This section defines the functionality in the SMIL 2.0 HierarchicalLayout
module. This module contains elements and attributes for advanced positioning
of media elements on the visual rendering surface and builds upon the SMIL
2.0 BasicLayout module.

The SMIL 2.0 HierarchicalLayout module extends the basic layout model for
organizing media elements into regions on the visual rendering surface providing
much greater author control and flexibility. These extensions are important
for certain classes of multimedia presentations in which author control of
object placement is critical.

This module:

extends the definition of
the region element
to allow for the specification of hierarchical regions;

introduces a new layout
element, regPoint,
for controlling relative placement with an associated region (the
registration element facility);

includes additional
attributes, regPoint
and regAlign,
that specify how a media object's presentation can be aligned relative to
the set of defined registration points (the registration alignment
facility); and

5.8.1
Integration
Requirements for the HierarchicalLayout Module

The functionality in this module builds on top of the functionality in the
BasicLayout module, which is a
required prerequisite for inclusion of the HierarchicalLayout module.

5.9
New
Features in the SMIL 2.0 HierarchicalLayout Module

This section is normative.

5.9.1
Hierarchical Region
Layout

A new feature in this module is support for hierarchical layout. This allows
for the declaration of regions nested inside other regions, much like regions
are laid out inside the top level window declared by
the topLayout element. For
example, the following declares a top level window of 640 by 480 pixels,
regions "left" and "right" which covers the left and right sides of the window
respectively, and a hierarchical region "inset" that is centered within "right".

By default, each hierarchical region shares the z-index (depth) value of
its parent. Hierarchical regions may also introduce their own local z-index
value. In this case, all hierarchical regions with a common direct parent
define local z-indexes within the z-index value of their parent. For example,
if a parent region has a z-index value of "4" and two hierarchical children
of that parent define z-indexes of "1" and "2", respectively, then each of
these are treated as further sub-divisions of the parent's z-index of "4".

If two hierarchical regions with the same z-index attribute value overlap,
the existing rules for z-index processing (from
the BasicLayout module) are applied.
Specifically, the rule concerning time priority is maintained, meaning that
in the case of a z-index conflict, the media visible in the overlap will
be determined by the region that is rendering the media that has most recently
begun in time. If the conflicting media began at the same time, then the
rule using the textual order of the media elements in the SMIL document is
applied.

In the first "par", image "A" and image "B" begin at the same time. Image
A will obscure image "B", even though the z-index of "inset" is greater than
that of "whole". This is because the z-index of "right", which is the region
containing "inset" is less than that of "whole".

In the second "par", images "C" and "D" are rendered into regions occupying
the same area of the rendering surface. Image "C" will be shown for one second
and then obscured by Image "D", since "D" begins after image "C". Note that
lexical order is irrelevant here.

In the third "par", the z-index of region "inset" is considered when computing
stacking between siblings, and therefore image "F" will be shown, but image
"E" will be obscured for the entire 10 seconds that they are both active.

Where hierarchical layout provides a facility for defining a set of regions
with a common parent, it does not provide any facility for finer control
within a region where a given media object will be placed. The SMIL 2.0
HierarchicalLayout module solves this problem by defining a set of attributes
which, when placed on an object using the
region attribute, allow that media
item to be declared with an explicitly positioned sub-region of a given region.
These attributes are collectively referred to as sub-region positioning
attributes. A sub-region is a child of the region declared in the
region attribute on the media element.
The sub-region positioning argument values follow the conventions of placeholder
elements described in the section on the
region element .

For example, suppose a region "d" is defined:

<layout>
...
<region id="d" ... />
...
</layout>

The following code describes the placement of an object in a sub-region at
a particular offset within a region, using the SMIL 2.0 HierarchicalLayout
syntax:

<ref id="a" ... region="d" top="5%" left="3" />

Each placement attribute defines a new, temporary child region for the referenced
media object. In this case, the top-left point of the media object is displayed
5% from the top and 3 pixels from the left of region "d", and extends
to the right and bottom edges of the region "d".

All other placement operations, such as
the fit attribute, now operate
on the sub-region. For example, the following document fragment describes
a region and a media object reference that make use of sub-region positioning:

In this example, the effective boundaries of the sub-region for the placement
of this object are defined by declaring the top, bottom, left and right edges
of the region to the values shown, and then filling the resulting sub-region
with the specified image as directed by
the fit attribute. If the size
of the media object being displayed is smaller than that of the resulting
sub-region, the display will be similar to:

The use of sub-region placement is intended as a light-weight alternative
to defining a large number of single-use regions. Often, the dimensions used
for the sub-region will match the dimensions of the media object being placed,
but in all cases the values of
the fit attribute will govern rendering
of the object in the sub-region. The other attributes on the media element
that would have been applied to a referenced region are applied to the sub-region
instead. Note that the default values for the sub-region attributes are all
'auto', resulting that, by default, a sub-region is created having the same
size and position as the parent region.

Rules for handling clipping of objects within regions based on the sub-region
attributes are provided below.

The SMIL 2.0 HierarchicalLayout module includes the ability to use
the fit,
z-index, and
backgroundColor attributes
on objects displayed in a sub-region in order to declare different behavior
from that on the region element.

A registration element is an element defined within this module that is used
to define a point within a region and a default object alignment algorithm
about that point. The element can be used in a media object element, where
it is associated with a region and an optional override alignment algorithm.
The placement values within registration elements can be either percentages
or pixels.

The use of registration points allows for consistent relative placement across
regions. As such, registration points are defined outside of any single region.

For example, the following code describes two registration points (with id
values "midPoint" and "topMargin"), one of which is defined as a relative
location and one at a fixed pixel location, using the SMIL 2.0 HierarchicalLayout
syntax:

In this example, the registration point with the id value "midPoint" has
a default alignment algorithm that centers the media object about the defined
point, while the registration point with the id value "topMargin" has a default
alignment algorithm that places the top-left point of the media object at
the registration point.

Various media elements could be displayed in the regions using the alignment
points as follows:

In the first example, a media object is centered in the middle of region
a. In the second example, a media object has its bottom right corner
centered in the middle of region b. Similarly, in the third example,
a media object has its top left corner placed at a point 10,15 within region
a, and in the fourth example, an object is centered around the point
10,15 in region b.

Registration points can be used to coordinate the placement of a set of media
objects that do not share the same sizes. (For example, a set of images can
be aligned to the center of a region.) They can also be used to coordinate
the display of images about a particular point in a region, as in:

In this example, four objects are aligned over time to the middle of region.
If any media element extends outside the bounds of a region, it will be clipped
to the region.

Note that registration points are global within the context of a layout,
and are not tied to a particular region, but can be reused across regions.
As such, pixel-based offsets should be used with care.

The default value of regAlign
for a region is topLeft. If
the regAlign attribute
is used without a regPoint
attribute, the alignment operation is relative to the upper left point of
the region containing this object, that is, the behavior is the same as if
the regPoint were to be specified
as topLeft.

Rules for handling clipping of objects within regions based on the
regPoint and
regAlign attributes are defined
below.

5.10
SMIL
2.0 HierarchicalLayout Syntax and Semantics

This section is normative.

5.10.1
Elements
and attributes

This section defines the elements and attributes that make up the SMIL 2.0
HierarchicalLayout module.

The region element controls the position, size and scaling of media object
elements. This module extends the definition of
the region element to include
the definition of hierarchical regions.

The position of a region, as specified by
its top
and left attributes, is always
relative to the parent geometry, which is defined by the parent element.
For the SMIL 2.0 HierarchicalLayout module, all hierarchical region elements
must have as their immediate parent
a region
or topLayout element. The
position of the hierarchical region is defined relative to that parent element.
The intrinsic size of a region is equal to the size of the parent geometry.

When region sizes, as specified
by width
and height attributes are declared
relative with the "%" notation, the size of the hierarchical region is relative
to the size of the parent region. Sizes declared as absolute pixel values
are absolute values even when used with a child region.

Note that a (hierarchical) region may be defined in such a way as to extend
beyond the limits of its parent. In this case the child region must be clipped
to the parent boundaries.

If a z-index attribute is defined
on the hierarchical region, it is evaluated as a local index within that
of the parent.

Element attributes

In the HierarchicalLayout module,
the region element has no additional
attributes beyond that provided in the other included layout modules. However,
the semantics of the z-index
attribute are extended to support hierarchical regions.

This attribute is defined as in the
BasicLayout module with extensions
presented here.

The z-index attribute defines the
level of the region within the parent region stacking context. Elements assigned
to higher level regions are rendered in front of lower level regions within
the same parent region. Child regions are always placed in front of their
parent region. This results in a two stage sorting of region visibility:
first by parent-child containment, and then by
z-index among siblings.

Just as with simple non-hierarchical regions,
the stacking order of hierarchical regions may be affected by temporal
activation. A region becomes active either when media begins rendering into
it, or when one of its child regions becomes active. If two sibling regions
have the same z-index, the region most recently made active is in front of
the other region.

The regPoint element

The regPoint element determines
the (x, y) coordinates of a point relative to a region upper-left corner
for use in aligning elements in the document's body on regions within a visual
rendering surface. A regPoint may
be defined using absolute (pixel) or relative (percentage) based values.
The regPoint functionality is not
defined and may not be used for media without intrinsic size.

For the purposes of regPoint
functionality, media and regions are defined to be rectangular, with
perpendicular sides, with the sides ordered clockwise top, right, bottom,
and left. The top side is the edge closest to the point or edge of the display
device considered "up".

The regPoint element may only
appear as an immediate child of
a layout element.

If the registration point functionality is used on a media object that also
uses sub-region
positioning, the registration point applies to the subregion.

If the registration point or alignment functionality is used on a media object,
the interaction between
the regPoint attribute value,
the regAlign attribute value, and
the fit attribute value of the region
in which the media object is displayed is as follows:

Scale the object's height and width independently so that the content just
touches the nearest (to the
regPoint) of the top or bottom
edges of the box, and touches the nearest (to the
regPoint) of the left or right
edges of the box.

Scale the object's height and width independently so that the content just
touches the top and left edges of the box.

hidden fit value:

Align the media over the given
regPoint per the
regAlign attribute. If the media
so positioned extends past the bounds of the region, clip the excess media.
If the media so positioned doesn't meet the bounds of the region, fill the
remaining space with the background color of the region.

meet fit value:

This depends on the value of the
regAlign attribute. Any part of
the region that is not covered by the media is then filled with the region's
background color. (Note: in all cases, the media must maintain proper alignment
over the regPoint):

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches at least one of the left, right, or
bottom edges while none of the content is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches at least one of the top, right, or
bottom edges while none of the content is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches at least one of the top, left, right,
or bottom edges while none of the content is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches at least one of the top, left, or
bottom edges while none of the content is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top or left edge of the box while
none of the content is clipped.

scroll fit value:

Align the media over the given
regPoint per the
regAlign attribute. If any part
of the media extends beyond the bounds of the region, a scrolling mechanism
should be invoked that allows viewing of the media that is clipped beyond
the bounds of the region.

slice fit value:

This depends on the value of the
regAlign attribute. (Note: in all
cases, the media must maintain proper alignment over the
regPoint):

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the right or bottom edge of the box,
whichever requires the largest scale factor. Any content that extends beyond
the bounds of the region is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the left, right, or bottom edge of
the box, whichever requires the largest scale factor. Any content that extends
beyond the bounds of the region is clipped. Clipping will occur on up to
two sides of the region.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the left or bottom edge of the box,
whichever requires the largest scale factor. Any content that extends beyond
the bounds of the region is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top, right, or bottom edge of
the box, whichever requires the largest scale factor. Any content that extends
beyond the bounds of the region is clipped. Clipping will occur on up to
two sides of the region.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top, left, right, or bottom edge
of the box, whichever requires the largest scale factor. Any content that
extends beyond the bounds of the region is clipped. Clipping will occur on
up to three sides of the region.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top, left, or bottom edge of the
box, whichever requires the largest scale factor. Any content that extends
beyond the bounds of the region is clipped. Clipping will occur on up to
two sides of the region.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top or right edge of the box,
whichever requires the largest scale factor. Any content that extends beyond
the bounds of the region is clipped.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top, left, or right edge of the
box, whichever requires the largest scale factor. Any content that extends
beyond the bounds of the region is clipped. Clipping will occur on up to
two sides of the region.

Scale the visual media object's height and width while maintaining its aspect
ratio so that the content just touches the top or left edge of the box, whichever
requires the largest scale factor. Any content that extends beyond the bounds
of the region is clipped.

For example, a wide-screen video can be made to play in "letterbox" mode
in a region, whose width-to-height ratio is smaller, by using
regPoint
="center" and
regAlign="center"
and setting the region's fit value to "meet".
The result is the video will touch the left and right edges of the region
and will be centered vertically with the gaps above and below filled in with
the region's background color.

Element attributes

top

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the registration point relative to
the top of the region. The default value of top
is auto.

bottom

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the registration point relative to
the bottom of the region. The default value of bottom
is auto.

left

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the registration point relative to
the left location of the region. The default value of left
is auto.

right

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the registration point relative to
the right location of the region. The default value of right
is auto.

regAlign

This attribute specifies the default alignment algorithm which is associated
with a regPoint relative to the
media object. If no value is specified the value of
topLeft is the default for the
regPoint. The following values
are allowed:

topLeft

Align the top-left corner of the object with the registration point.

topMid

Align the top-middle point of the object with the registration point. The
top-middle is the point offset width/2 to the right of the object top-left
corner.

topRight

Align the top-right corner of the object with the registration point.

midLeft

Align the middle-left point of the object with the registration point. The
middle-left is the point offset height/2 down from the object top-left corner.

center

Align the center of the object with the registration point.

midRight

Align the middle-right point of the object with the registration point. The
middle-right is the point offset height/2 down from the object top-right
corner.

bottomLeft

Align the bottom-left corner of the object with the registration point.

bottomMid

Align the bottom-middle point of the object with the registration point.
The bottom-middle is the point offset width/2 right from the object bottom-left
corner.

bottomRight

Align the bottom-right corner of the object with the registration point.

While the SMIL 2.0 BasicLayout module provides only
the region attribute on elements
to place them on the rendering surface, the HierarchicalLayout module includes
attributes to refine the position of media content within a region, and to
refine the visual presentation of the media within the region.

This module provides fine control over the background color surrounding media
elements by allowing the media element to declare the background color of
a region in which the media is being shown.

One set of attributes (the sub-region positioning attributes) allows
a sub-region to be defined that is a child of a declared region and is wholly
contained within the enclosing layout region for that media object; the other
set of attributes can be used to define a registration point to be used with
that object and an optional layout algorithm that will override the default
algorithm associated with the registration point.

If the fit attribute and alignment
attributes regPoint and
regAlign are relevant
to the placement of a particular media object, the interaction is the same
as described in the definition of
regPoint. If sub-region positioning
attributes are used on a media object along with
fit or the alignment attributes
regPoint and
regAlign, these attributes
apply to the sub-region. In this case
the fit setting on the referenced
region element does not apply to the sub-region.

For both sub-region positioning and registration point use, the value of
the z-index attribute on the
associated region is used. If media objects overlap spatially, existing rules
for resolving z-index conflicts are applied.

Note that placement within the region may be defined in such a way as to
extend the media object beyond the limits of the region. In this case the
media object must be clipped to the region boundaries.

Media specific background
color

backgroundColor

This attribute allows specifying the background color that will be used when
a media element is being shown in a sub-region. The range of legal values
are the same as the
backgroundColor attribute
on the region element. The default
value for this attribute is transparent.

Sub-region Positioning Attributes

top

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the top edge of the sub-region relative
to the top of the region. The default value of top
is auto.

bottom

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the bottom edge of the sub-region relative
to the bottom of the region. The default value of bottom
is auto.

height

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the bottom edge of the sub-region relative
to the top side of the region. The default value of height is
auto.

left

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the left edge of the sub-region relative
to the left of the region. The default value of left
is auto.

right

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the right edge of the sub-region relative
to the right side of the region. The default value of right
is auto.

width

This value uniquely identifies the position or the distance (using CSS2 pixel
or non-negative percentage values) of the right edge of the sub-region relative
to the left side of the region. The default value of width
is auto.

Conflicts between the region size attributes
bottom,
height, left, right,
top, and
width are resolved according
to the rules for placeholder elements described in the section on the
region element.

The sub-region positioning attributes will be ignored if they are used on
an element without a region attribute
that specifies the identifier of
region element in the
layout section.

Registration point attributes

The regPoint attribute is used
in conjunction with
the regPoint element. If
a regPoint attribute is missing
or refers to a
non-existent regPoint element
the value of
the regAlign
attributes are applied to the top-left point of the region containing the
media object.

regPoint

This value uniquely identifies the registration point to be used for the
placement of the object. The value should be an XML identifier of
a regPoint element.

The following values are predefined registration points that do not have
to be declared as
regPoint elements before
they are used:

topLeft

Same as using top="0%" left="0%" on the element without
the regPoint attribute.

topMid

Same as using top="0%" left="50%" on the element without
the regPoint attribute.

topRight

Same as using top="0%" left="100%" on the element without
the regPoint attribute.

midLeft

Same as using top="50%" left="0%" on the element without
the regPoint attribute.

center

Same as using top="50%" left="50%" on the element without
the regPoint attribute.

midRight

Same as using top="50%" left="100%" on the element without
the regPoint attribute.

bottomLeft

Same as using top="100%" left="0%" on the element without
the regPoint attribute.

bottomMid

Same as using top="100%" left="50%" on the element without
the regPoint attribute.

bottomRight

Same as using top="100%" left="100%" on the element without
the regPoint attribute.

Note that the predefined registration points have the same meaning relative
to the region as
the regAlign attribute
values have relative to the media. If no value is given, the default registration
point of topLeft (top="0%", left="0%") is
assumed, that is, the media is aligned with the top-left of the region.

regAlign

This value uniquely identifies the registration algorithm to be used for
the regPoint defined for the
object, and overrides any
regAlign attribute
on the referenced regPoint element.
Permissible values are those defined under
the regAlign attribute
for the regPoint
element. If used without an
explicit regPoint attribute,
the value is relative to the top left point of the region used by the associated
media object.

Region fit override

The fit attribute is used on an element
in conjunction with
the regionattribute to control
the display of the element on the rendering surface. A value of
the fit attribute given on the
element will override the value of fit declared in the
referenced region element.

This attribute specifies the behavior if the intrinsic height and width of
a visual media object differ from the values specified by the height and
width values of the region. It takes the same values as
the fit attribute on the
region element, and has
the same semantics with the exception that the
declared fit only applies to the
sub-region declared by the media element using it, and not to other elements
which may use the same
parent region.

Region z-index override

The z-index attribute is used on
an element in conjunction with
the sub-region positioning
attributes to control the display of the element on the rendering
surface. A value of
the z-index attribute given
on the element will set the z-index
for the sub-region within the context of the parent region stacking order.

This attribute specifies the stacking order behavior for the sub-region.
It takes the same values as the z-index
attribute on the region element, and has the same semantics with the
exception that the declared z-index
only applies to the sub-region declared by the media element, and
not to other elements which may use the same
parent region.