7. SMIL 3.0 Layout

This section is normative.

This section defines the SMIL Layout Modules, which contain elements and attributes that allow positioning of media elements on visual and audio rendering surfaces and to control of audio volume. Since these elements and attributes are defined in modules, designers of other markup languages can choose the appropriate level of functionality to be included in their languages. Language designers incorporating other SMIL modules may include all, some or none of the modules described in this section.

7.2.1 Module Overview

SMIL 3.0 Layout functionality is partitioned across the following eight modules:

StructureLayout

The StructureLayout module defines the top-most layout element and its attribute. This element identifies the layout mechanism used in a SMIL presentation (if any). All other layout modules are dependent on this functionality.

BasicLayout

The BasicLayout module extends the StructureLayout module and defines the core SMIL layout elements and their attributes. Using these attributes, basic positioning may be achieved for simple presentations.

AudioLayout

The AudioLayout module extends the BasicLayout module with a single attribute to control audio output sound levels.

MultiWindowLayout

The MultiWindowLayout module extends the BasicLayout module by defining an alternative to the root-layout element for defining the outer containing rendering space for a presentation. This module also defines functionality for supporting multiple top-level windows simultaneously.

SubRegionLayout

The SubRegionLayout module extends the BasicLayout module by defining a facility for creating logically nested regions. These regions may be created statically within the layout element or dynamically on a media object reference.

AlignmentLayout

The AlignmentLayout module extends the BasicLayout module by defining attributes to position content within a region based on a set of registration points and alignment algorithms. Several convenience attribute values are also provided to simply common authoring cases.

BackgroundTilingLayout

The BackgroundTilingLayout module extends the BasicLayout module by defining a facility to fill a region background with a tiled image instead of simply a background color.

OverrideLayout

The OverrideLayout module extends the SubRegionLayout module by allowing per-media-object overrides of various layout attribute values.

7.2.2 Support for Multiple Layout Models

The SMIL layout architecture allows support for multiple layout models within a presentation. Media layout may be described using the SMIL layout syntax described in this chapter or by using another layout mechanism, such as CSS2 syntax [CSS2]. Other layout types are possible as well.

Support for multiple layout models is implementation profile dependent. A given profile may support multiple layout models simultaneously (with selection performed using the SMIL switch element), or it may dictate that only a single layout model is supported (such as the use of CSS2 layout within the XHTML+SMIL candidate profile[XHTMLplusSMIL].

The remainder of this chapter defines the mechanism to identify the layout model used by a presentation and then describes the features of the SMIL 3.0 smil-basic layout semantics.

This section is normative.

7.3.1 Overview

The SMIL StructureLayout module defines the layout element, which is used to indicate the layout model to be used with a given SMIL document. The layout element is used in the document head section.

7.3.2 Elements and Attributes

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

The layout element

The layout element contains the elements that define a particular layout model to be used within a SMIL presentation. If present, the layout element must appear in the head section of the document.

If a document contains no layout element, no SMIL-defined default values are assigned and the positioning of the body elements is totally implementation-dependent.

SMIL-defined default layout semantics can be assigned to all renderable elements by selecting the empty layout element <layout></layout>.

Element content

If the type attribute of the layout element has the value "text/smil-basic-layout", (or if no type attribute is defined) the layout element may contain the elements of the BasicLayout module, plus any additional layout modules defined by the profile incorporating these modules. Profiles incorporating the BasicLayout module may define additional elements that are allowed as children of the layout element.

If the type attribute of the layout element has a value other than "text/smil-basic-layout", the element contains character data.

7.3.3 StructureLayout Module Events

This module does not define any SMIL events.

7.3.4 SMIL StructureLayout Implementation and Integration

Implementation Details

This module provides a wrapper for a particular layout model. A given SMIL rendering agent may support all, some or none of the layout models defined for use with SMIL 3.0.

Integration Requirements

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

7.3.5 Document Type Definition (DTD) for the StructureLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.4.1 Overview

SMIL BasicLayout module defines a layout model for organizing media elements into regions on the visual rendering surface. The regions are declared within the layout element in the document head. 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 may 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 [[CSS2 - absolute-positioning]] syntax (note that these are not functionally identical). Other layout types are possible as well.

    <layout>
      <region xml:id="r" top="15px" left="20px" width="100px" height="50px"/>
    </layout>

    <ref region="r" src="http://..." />

7.4.2 Elements and Attributes

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

The region element

The region element controls the position, size and scaling of media object elements that are placed within its rendering space.

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 root-layout element is considered to be the logical parent of all region elements in SMIL BasicLayout. The intrinsic size of a region is equal to the size of the logical parent's 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 may have either a value of "auto" or a defined value not "auto", then there are 8 possibilities:

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 may have either a value of "auto" or a defined value not "auto", then there are 8 possibilities:

Element examples

<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
     ...
    <layout>
        ...
        <region xml:id="a" top="5" />
        ...
    </layout>
  </head>
  <body>
    ...
    <text region="a" src="text.html" dur="10s" />
    ...
  </body>
</smil>

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

Element content

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

Element examples

<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">

  <head>

    <layout>

      <root-layout width="320" height="480" />

      <region xml:id="a" top="5" />

    </layout>
  </head>

  <body>

    <text region="a" src="text.html" dur="10s" />

  </body>
</smil>

The region attribute

The region attribute is added to the ref element (and its synonyms). The target of this attribute will be one or more regions with a regionName declared that matches the value of this attribute, or a single region element with a region attribute that matches this value. For processing rules, see the section Implementation details.

7.4.3 SMIL BasicLayout Implementation and Integration

Implementation Details

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

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.

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:

1. Find all elements in the layout section with regionName attributes that are assigned the same value as that of the region attribute.
2. Remove the elements from this collection that are removed from the rendered presentation due to the processing of switch elements and test attributes.
3. If any elements remain, the media should be rendered in all of the referred to regions. If the implementation cannot render the media simultaneously in multiple regions, then the media should be rendered using the lexically first remaining element.
4. 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 definition of backgroundOpacity and the value transparent for backgroundColor are independent. For example, a combination of backgroundOpacity=100% and backgroundColor=transparent results in a transparent background.

Integration Requirements

A profile integrating the SMIL 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 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 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 layout modules will apply to presented elements not otherwise specifying layout semantics.

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

7.4.4 Document Type Definition (DTD) for the BasicLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.5.1 Overview

In SMIL AudioLayout, one attribute is supported that allows the relative sound intensity of an audio object to be specified via the soundLevel attribute. When used in conjunction with SMIL 3.0 Animation (and if supported by the profile), the value of the attribute may be varied over time.

  <layout>
    ...
    <region xml:id="a" soundLevel="-6dB"/>
    ...
  </layout>

  <layout>
    ...
    <region xml:id="a" soundLevel="50%"/>
    ...
  </layout>

7.5.2 Audio Volume Control

SMIL AudioLayout module supports control of aural media volumes via a 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. If the profile integrating this module also include the OverrideLayout module, the soundLevel attribute may also be placed as modifiers on individual media references.

7.5.3 Elements and Attributes

This section defines the soundLevel attribute that makes up the SMIL AudioLayout module.

The region element

The region element defined in the BasicLayout module is extended with the addition of the soundLevel attribute.

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

7.5.5 Document Type Definition (DTD) for the AudioLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.6.1 Overview

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

In the architecture of the SMIL 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 and is defined by a peer-level root-layout element.

The SMIL Layout specification extends the root container level with the notion of a top-level rendering window, called a topLayout window. A SMIL layout section may support one or more topLayout windows. 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.

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.

7.6.2 Elements and Attributes

This section defines the elements and attributes that make up the SMIL 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.

Element content

The topLayout element may contain any number of region elements, or be empty.

Element examples

<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
  <head>
    <layout>
      <topLayout width="320" height="480" />
        <region xml:id="a" top="5" />
      </topLayout/>
    </layout>
  </head>
  <body>
    <text region="a" src="text.html" dur="10s" />
  </body>
</smil>

  <layout>
    <topLayout xml:id="WinV" title="Video" width="320" height="240"/>
      <region xml:id="pictures" title="pictures" height="100%" fit="meet"/>
    </topLayout>
    <topLayout xml:id="WinC" title="Captions" width="320" height="60">
      <region xml:id="captions" title="caption text" top="90%" fit="meet"/>
    </topLayout>
  </layout>

The layout element

The MultiWindowLayout module does not redefine the BasicLayout layout element. Instead, it simply extends the content model for that element, as described in the following subsection.

Element content

The layout element defined in the SMIL BasicLayout module is extended by adding topLayout element to the content model of the layout element if the type attribute of the layout element has the value "text/smil-basic-layout".

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

7.6.4 Implementation and Integration Requirements for the MultiWindowLayout Module

Implementation details

Allowing multiple topLayout elements within a single layout element implies support for multiple top level windows. If an implementation does not support multiple top level windows (because of device or processing restrictions), only content in the first top-level window defined in the layout will be rendered. Non-rendered objects will still participate in all SMIL timing and scheduling operations.

If used together with the root-layout element, any direct peer-level regions to the root-layout will be contained within the extents of the root-layout.

7.6.5 Integration Requirements for the MultiWindowLayout 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 MultiWindowLayout module.

The language profile must specify the declarative names for binding the topLayoutOpenEvent and topLayoutCloseEvent events described in the MultiWindowLayout Module Events section, as well as the bubbling behavior of the events.

7.6.6 Document Type Definition (DTD) for the MultiWindowLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.7.1 Overview

The SubRegionLayout module defines two mechanisms for defining regions that are logically contained within a parent region (these are SMIL's sub-regions). First, the SubRegionLayout module extends the definition of the region element to allow for the specification of sub-regions within the layout section as hierarchical content of regions. Second, the SubRegionLayout module extends the attributes allowed on (media) object references to allow a dynamic sub-region to be defined in-line by that object instance only. All values given for placement within sub-regions are defined in terms of the parent region's placement attributes. The ability to define sub-regions may be exploited for authoring convenience or when changing the location of a group of related regions using SMIL Animation.

  <layout>
     ...
     <region xml:id="CaptionedVideo" top="10px" left="20px" width="320" height="300">
       <region xml:id="image" title="image content" width="100%" height="240px" fit="meet"/>
       <region xml:id="captions" title="caption text" top="240px" height="60px" fit="meet"/>
     </region>
     ...
  </layout>

  <body>
      ...
     <img xml:id="Title" region="image" top="5%" left="3" bottom="10%" right="15%"  src="TitleImage.png"/>
     ...
  </body>

The use of in-line 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', meaning that, by default, a sub-region is created having the same size and position as the parent region.

The use of sub-region positioning leads to authoring convenience and SMIL file compactness, since many separate regions do not need to be defined to handle incidental layout needs. The support for a hierarchy of sub-regions also allows multiple layout objects to be animated in concert by moving the parent region using SMIL Animation facilities.

7.7.2 Elements and attributes

This section defines extensions to the region and ref elements (and its synonyms) to support sub-region functionality.

The region element

This module extends the definition of the region element to include the definition of hierarchical sub-regions.

Element content

The SMIL SubRegionLayout module extends the region element content model to include region elements.

The ref element (and its synonyms)

The SubRegionLayout module extends the ref element to allow a separate, unnamed sub-region to be defined for the media object reference containing the sub-region positioning attributes.

Element attributes

The ref element defined in the MediaObject module and its synonyms are extended to include the following 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 "px" unit qualifier in pixel values may be omitted. 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 "px" unit qualifier in pixel values may be omitted. 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 sub-region. The "px" unit qualifier in pixel values may be omitted. 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 "px" unit qualifier in pixel values may be omitted. 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 "px" unit qualifier in pixel values may be omitted. 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 sub-region. The "px" unit qualifier in pixel values may be omitted. 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 (or, if supported, the regionName attribute) that resolves to a region element in the layout section.

7.7.3 SubRegionLayout Module Events

This module does not define any SMIL events.

7.7.4 SubRegionLayout Implementation and Integration

Implementation Details

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

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 (as defined in the module), 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.

If two hierarchical regions with the same z-index attribute value overlap, the existing rules for z-index processing defined in 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.

<layout> 
   <root-layout width="640px" height="480px" />
   <region xml:id="whole" top="0px" left="0px" width="640px" 
                                height="480px" z-index="5"/>
   <region xml:id="right" top="0px" left="320px" width="320px"
                                height="480px" z-index="4">
       <region xml:id="inset" top="140px" left="80" width="160px" 
                                height="200px" z-index="6"/>
       <region xml:id="inset2" top="140px" left="80" width="160px" 
                                height="200px" z-index="6"/>
       <region xml:id="inset3" top="140px" left="80" width="160px" 
                                height="200px" z-index="7"/>
   </region>
</layout>
...
<par>
        <img xml:id="A" region="whole" src="imageA.jpg" dur="10s"/>
        <img xml:id="B" region="inset" src="imageB.jpg" dur="10s"/>
</par>
<par>
        <img xml:id="D" region="inset2" src="imageD.jpg" begin="1s" dur="10s"/>
        <img xml:id="C" region="inset" src="imageC.jpg" begin="0s" dur="10s"/>
</par>
<par>
        <img xml:id="E" region="inset2" src="imageE.jpg" dur="10s"/>
        <img xml:id="F" region="inset3" src="imageF.jpg" dur="10s"/>
</par>

Integration Requirements for the SubRegionLayout Module

The functionality in this module builds on top of the functionality in the BasicLayout module and the MediaObject module, which are required prerequisites for inclusion of the SubRegionLayout module. If the functionality in this module is to be used with the topLayout construct, the MultiWindowLayout module is a prerequisite.

7.7.5 Document Type Definition (DTD) for the SubRegionLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.8.1 Overview

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

Registration points may 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 may 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.

For authoring convenience, SMIL AlignmentLayout module provides several pre-defined region registration points including topLeft, topMid, topRight, midLeft, center, midRight, bottomLeft, bottomMid, and bottomRight.

As a further convenience, SMIL AlignmentLayout module provides the mediaAlign attribute, which defines a combination of regAlign and regPoint attributes. For example, media objects may be centered in any region using mediaAlign as follows:

    <ref ... mediaAlign="center" />

If the mediaAlign attribute and either (or both) of the regPoint and regAlign attributes are used together, the regPoint and/or regAlign value(s) will override the corresponding effective regPoint/regAlign value(s) defined by the mediaAlign value.

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.

    <layout>
      <regPoint xml:id="midPoint" top="50%" left="50%" regAlign="center" />
      <regPoint xml:id="topMargin" top="10" left="15" regAlign="topLeft" />
      <region xml:id="a" ... />
      <region xml:id="b" ... />
    </layout> 

  
    <ref region="a" src="rtsp://..." dur="2s" regPoint="midPoint" /> 
    <ref region="b" src="http://..." dur="2s" 
                         regPoint="midPoint" regAlign="bottomRight"/>
    <ref region="a" src="http://..." dur="2s" regPoint="topMargin" />
    <ref region="b" src="http://..." dur="2s" 
                         regPoint="topMargin" regAlign="center"/>

   <layout>
      <regPoint xml:id="middle" top="50%" left="50%" regAlign="center" />
      <region xml:id="a" ... />
   </layout> 
   ...
   <seq>   
    <ref region="a" src="rtsp://..." dur="2s" regPoint="middle" 
                                        regAlign="bottomRight"/> 
    <ref region="a" src="http://..." dur="2s" regPoint="middle" 
                                        regAlign="bottomLeft"/>
    <ref region="a" src="http://..." dur="2s" regPoint="middle" 
                                        regAlign="topLeft"/>
    <ref region="a" src="http://..." dur="2s" regPoint="middle" 
                                        regAlign="topRight"/>
  </seq>

    <ref ... regPoint="center" regAlign="center" />

7.8.2 Elements and Attributes for the AlignmentLayout Module

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

The layout element

This element extends the content model of the layout element to support the registration point functionality described in this section.

Element content

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

region

root-layout

regPoint

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

Element content

None.

The region element

This module extends the definition of the region element to include the definition of default alignment policies for content in that region.

Element content

SMIL AlignmentLayout module does not extend the region element content model.

The ref element (and its synonyms)

The AlignmentLayout module extends the ref element to allow the positioning of media content within a region based on the an alignment registration point and an alignment policy.

Element content

SMIL AlignmentLayout module does not extend the ref element content model.

7.8.3 AlignmentLayout Module Events

This module does not define any SMIL events.

7.8.4 SMIL AlignmentLayout Implementation and Integration

Implementation Details

If an implementation cannot support the soundLevel attribute, it may be ignored. Even when processing is ignored, the attribute must be correctly parsed.

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.

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

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.

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:

fill fit value:

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

topLeft regAlign value:

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

topMid regAlign value:

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

topRight regAlign value:

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

midLeft regAlign value:

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 right edge of the box.

center regAlign value:

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.

midRight regAlign value:

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 left edge of the box.

bottomLeft regAlign value:

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

bottomMid regAlign value:

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

bottomRight regAlign value:

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

topLeft regAlign value:

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 while none of the content is clipped.

topMid regAlign value:

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.

topRight regAlign value:

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 while none of the content is clipped.

midLeft regAlign value:

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.

center regAlign value:

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.

midRight regAlign value:

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.

bottomLeft regAlign value:

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 while none of the content is clipped.

bottomMid regAlign value:

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 right edges while none of the content is clipped.

bottomRight regAlign value:

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.

meetBest fit value:

This interaction with the regAlign and regPoint attributes is identical that that of the meet fit value, with the exception that the size of the related media object is never scaled above 100%.

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

topLeft regAlign value:

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.

topMid regAlign value:

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.

topRight regAlign value:

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.

midLeft regAlign value:

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.

center regAlign value:

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.

midRight regAlign value:

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.

bottomLeft regAlign value:

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.

bottomMidregAlign value:

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.

bottomRight regAlign value:

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

Integration Requirements

The functionality in this module builds on top of the functionality in the BasicLayout module and the MediaObject module, which are required prerequisites for inclusion of the AlignmentLayout module.

7.8.5 Document Type Definition (DTD) for the AlignmentLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.9.1 Overview

The SMIL BackgroundTilingLayout module defines a backgroundImage attribute that allows an image to be placed onto the background of a layout region. It also provides the same capability for the root-layout and any of the topLayout element(s), if supported by the language profile. This module also defines the backgroundRepeat attribute to control tiling of the background image. These facilities are provided as a convenience extension to SMIL's use of a background color in a region. Although similar functionality can be defined by using a combination of the image media object, the z-index attribute and subregions positioning, this would require substantially more authoring effort.

The BackgroundTilingLayout module allows simple convenience tiling support in a manner that is consistent with CSS2 [CSS2]. For more complex background image operations such as support for animated images or non-image background content, users are expected to use the standard media placement and alignment facilities available in SMIL Layout.

The opacity of the background images, whether or not tiled, is defined by the value of the backgroundOpacity attribute.

If a backgroundImage is defined along with a backgroundColor attribute, the background color will be used to color any part of the background left exposed after processing the background image.

When used with the showBackground attribute. the background image behaves as if it were a simple background color.

7.9.2 Elements and Attributes for the BackgroundTilingLayout Module

This section defines the backgroundImage and backgroundRepeat attributes that make up the SMIL BackgroundTilingLayout module.

The region Element

The root-layout Element

The topLayout Element

This module extends the attribute set for the region, root-layout and topLayout elements.

Element content

The SMIL BackgroundTilingLayout module does not extend the content model for elements integrating these attributes.

7.9.3 BackgroundTilingLayout Module Events

This module does not define any SMIL events.

7.9.4 SMIL BackgroundTilingLayout Implementation and Integration

Implementation details

For purposes of establishing an inheritance default value, the root-layout element defined in SMIL BasicLayout is considered the root of the background image inheritance tree. In this case, both backgroundImage and backgroundRepeat may be used with the root-layout and region elements.

For profiles implementing the SMIL MultiWindowLayout module, each top-level layout element is considered to define a separate root of the background image inheritance tree. In this case, both backgroundImage and backgroundRepeat may be used with any topLayout elements.

Integration Requirements

The functionality in this module builds on top of the functionality in the BasicLayout module, which is a required prerequisite for inclusion of the BackgroundTilingLayout module. If this functionality is to be applied to multiple top-level windows, the MultiWindowLayout module must be included.

7.9.5 Document Type Definition (DTD) for the BackgroundTilingLayout Module

See the full DTD for the SMIL Layout modules.

This section is normative.

7.10.1 Overview

The SMIL OverrideLayout module includes the ability to override the default values of the fit, z-index, backgroundColor and backgroundOpacity attributes on objects displayed in a (dynamically created) sub-region. This functionality may only be used in conjunction with sub-region positioning.

For languages and profiles integrating the AlignmentLayout module, the ability to specify override behavior for the regAlign, regPoint, mediaAlign, and soundAlign, attributes are defined as part of that module's specification and do not need to be explicitly specified in the OverrideLayout module.

7.10.2 Elements and Attributes for the OverrideLayout Module

This module does not define any new elements. It provides extensions to the ref element (and its synonyms).

The ref Element

The backgroundColor, backgroundOpacity, fit, soundLevel and z-index attributes are added to media object references.

Element content

The SMIL OverrideLayout module does not extend the content model for the ref element integrating these attributes.

7.10.3 OverrideLayout Module Events

This module does not define any SMIL events.

7.10.4 SMIL OverrideLayout Implementation and Integration

Implementation Details

The OverrideLayout module allows individual media object references to override the default values for certain attributes. In all cases, the attributes will apply only to a dynamically created sub-region that is created by the the activation of the media object reference. Changes will not propagate to child sub-regions or to parent regions.

Integration Requirements

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

7.10.5 Document Type Definition (DTD) for the OverrideLayout Module

See the full DTD for the SMIL Layout modules.