The XHTML+SMIL profile defines a set of XHTML abstract modules that support a subset of the SMIL 2.0 specification. It includes functionality from SMIL 2.0 modules providing support for animation, content control, media objects, timing and synchronization, and transition effects. The profile also integrates SMIL 2.0 features directly with XHTML and CSS, describing how SMIL can be used to manipulate XHTML and CSS features. Additional semantics are defined for some XHTML elements and CSS properties.
The profile is designed for Web clients that support XHTML+SMIL markup validating to this profile's implementation DTD. The document type definition (DTD) and XML Schema [XSCHEMA] are implemented using SMIL modules as defined in "Modularization of SMIL" [SMIL-MOD-NOTE], and "The SMIL 20 Modules" [SMIL20-MOD].
This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.
This document is a Note submitted to the W3C with the intention that it be used as a basis to further the work of integrating SMIL functionality into XHTML.
This Note has been produced by the SYMM Working Group (members only), and reflects the opinions of some members of that Working Group.
This specification is a revision of the W3C Working Draft XHTML+SMIL Profile available in the early phase but removed from the SMIL2.0 specification.
The authors welcome comments on this document, but they do not guarantee a
reply or any further action. Please send comments to firstname.lastname@example.org. The archive of public
comments is available at http://lists.w3.org/Archives/Public/www-smil/.
This document may be updated or added to based on implementation experience,
but no commitment is made by the W3C, or any of its members, regarding future
This document is a Note made available by the W3C for discussion only. Publication of this Note by W3C indicates no endorsement by W3C or the W3C Team, or any W3C Members. A list of current W3C technical reports and publications, including Working Drafts and Notes, can be found at http://www.w3.org/TR .
This section is informative.
This profile describes the SMIL modules that are added to XHTML, and details the integration issues, including the application of integrated SMIL modules to CSS styles [CSS20]. Language integration is accomplished with a set of XHTML modules using the semantics defined in XHTML Modularization [XMOD]. The XHTML+SMIL Profile adds timing, animation and multimedia functionality to these XHTML elements. XHTML elements that make up the modules defined in XHTML Modularization [XMOD] are described in the W3C Recommendation for HTML 4 [HTML4] .
The document type defined by the XHTML+SMIL profile is XHTML Host language document type conformant.
Using the SMIL timing extensions, any XHTML element on which timing functionality is supported can be set to appear at a given time, to last for a specified duration, and to repeat (i.e. loop). Basic timing and synchronization and functionality is supported with a simple syntax, and more complex timing constructs can be described. Event-based interactive timing is also supported.
The Animation and Transition modules provide additional support for authors to define presentation content that includes motion, style animation, transition effects and other features commonly found in presentation/multimedia authoring tools and runtimes.
In order to easily integrate time-based media (e.g. video and audio), the SMIL media elements are included. SMIL Content control provides elements and attributes to control alternative (including accessible and internationalized) content.
This section explains why certain modules of SMIL 2.0 [SMIL20] are not included. The general philosophy is to use XHTML modules where appropriate, and to include the SMIL modules when they provide essential enhancements.
Layout Module: The SMIL 2.0 layout module is not included. The XHTML/CSS layout model provides layout functionality.
Linking Module: The SMIL 2.0 linking module is not included, as XHTML provides linking functionality.
Structure Module: The SMIL 2.0 structure module is not included, as the XHTML document is defined to be the host language, and so provides the equivalent elements and semantics.
Metainformation Module: The SMIL 2.0 Metainformation module is not included, as XHTML provides metadata functionality.
This section is normative.
A conforming XHTML+SMIL document is a document that requires only the facilities described as mandatory in this specification. Such a document must meet all of the following criteria:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+SMIL //EN" "http://www.w3.org/2001/SMIL20/WD/xhtmlplussmil.dtd">
The user agent must conform to the "User Agent Conformance" section of the XHTML specification ([XHTML10], section 3.2), the "XHTML Family User Agent Conformance section of XHTML Modularization" ([XMOD] , section 3.5). and the conformance requirements detailed in the SMIL modules ([SMIL20] ) supported by the integration profile.
The user agent must conform to the following additional user agent rule:
The default XML namespace of an XHTML+SMIL document is XHTML. SMIL elements are included through an additional SMIL namespace declaration:
The name of the unique identifier for the namespace within the document (in this example, 'smil') is left to the discretion of the document author.
The XHTML functionality in the XHTML+SMIL document type is based upon the XHTML modules defined in XHTML Modularization [XMOD], and the Ruby Annotation module as defined in [RUBY]. In addition, the XHTML+SMIL document type supports the timeline-centric multimedia features defined by SMIL 2.0. The formal definition of the modules is not repeated here, but only the extensions introduced with timing. The notation, terms and document conventions used here are borrowed from XHTML Modularization [XMOD] .
The profile includes the XHTML modules defined in [XMOD] and the following SMIL 2.0 modules:
In the module descriptions below, reference is made to the "Common" attribute set and content sets defined in XHTML Modularization [XMOD].
The Animation Module provides a framework for incorporating animation onto a timeline (a timing model) and a mechanism for composing the effects of multiple animations (a composition model). The Animation Module defines semantics for the animate, set, animateMotion, and animateColor elements, as well as where these elements may be used.
The syntactic conventions used in this document to describe additions and
modifications to element content sets are borrowed from [XMOD]. In particular, the ampersand
(&) is used to denote that a module modifies an element
or set of elements with the addition of new attributes or content model
arguments. Additionally, the asterisk (*) is used to denote
that new arguments may be used in an existing element's content model.
|animate||Common, Timing, attributeName, attributeType, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, targetElement||none|
|set||Common, Timing, attributeName, attributeType, to, targetElement||none|
|animateMotion||Common, Timing, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, path, origin, targetElement||none|
|animateColor||Common, Timing, attributeName, attributeType, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by, targetElement||none|
|par&, seq&, excl&, Basic Text&, Hypertext&, List&, Presentation&, Tables&, Image&, Object&, Legacy&||animate*, set*, animateMotion*, animateColor*,|
|Applet&, Edit&, Client-side Image Map&, Server-side Image Map&||animate*, set*, animateColor*|
This module defines the following content sets (element groups for the purpose of defining content models):
This profile uses the targetElement attribute to identify the element to be affected by animation elements. As recommended in the BasicAnimation Module when the targetElement attribute is supported, the profile excludes the XLink [XLINK] attributes href, type, actuate, and show from the animate, set, animateMotion, and animateColor elements.
Animation is allowed on all elements included in XHTML modules defined by XHTML Modularization [XMOD] unless exempted by this list:
Certain animation elements are restricted to targeting only the following
elements with the targetElement attribute:
|animate, set||body, noscript, font, s, strike, u, area, map, object, Basic Text, Presentation, Edit, Bi-directional Text, Hypertext, List, Forms, Tables, Image, IFrame|
|animateMotion||address, blockquote, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var, font, s, strike, u, object, form, input, select, textarea, button, fieldset, label, legend, table, Presentation, Hypertext, List, Image, IFrame|
|animateColor||address, blockquote, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var, font, s, strike, u, form, input, select, option, textarea, button, fieldset, label, legend, optgroup, Presentation, Hypertext, List, Tables, IFrame|
The target attributes of the animation are a subset of the attributes of
the allowed target elements. For the elements on which animation is allowed,
the following attributes may be animated:
align, bgcolor, border, cellhalign, cellpadding, cellspacing, cellvalign, checked, class, clear, color, cols, dir, disabled, face, frame, frameborder, height, href, marginwidth, marginheight, rows, rules, selected, noshade, size, style, title, valign, value, width.
The origin attribute of the animateMotion element defines the relative origin of the values specified.
The origin attribute controls the interaction of the animation function values with the layout position of the target element. The CSS attributes position, top, and left determine the layout position of the element. In effect, origin determines whether to add the element position to the result of the animation function to obtain the element position in the container coordinate space.
The following example illustrates element relative motion:
<div style="position:absolute; top:100px; left:100px" > <animateMotion dur="5" from="50,50" to="150,150" origin="element" /> </div>
The layout position of the target div is (100,100). The effect is to add the layout position of the target element to each value of the animation function. The target moves from position (150, 150) to (250, 250) in the container coordinate space.
The following example illustrates parent relative motion:
<div style="position:absolute; top:100; left:100" > <animateMotion dur="5" from="50,50" to="150,150" origin="parent" /> </div>
The layout position of the target div again is (100,100). The effect is to ignore the layout position when computing the animation function values. The target moves from position (50, 50) to (150, 150) in the container coordinate space.
The BasicAnimation Module expresses the attribute upon which the animation should act using the attributeName attribute. The only valid target attribute names for the animateColor element are the CSS2 color properties.
The SMIL 2.0 Animation module defines clamping values for certain numeric attributes. The calculation of these attributes shall be performed in floating point.
The SMIL2.0 Content Control Module provides a framework for selecting content based on a set of test attributes. The Content Control Module defines semantics for the switch element, adds the switch element to the Flow content set of the XHTML Basic Text module, and adds the Test attributes set to the elements in the Flow content set of the XHTML Basic Text Module.
The Content Control Module defines the Attribute set "Test ".
|Collection Name||Attributes in Collection|
|Test||systemBitrate (Number), systemCaptions (on|off), systemLanguage (CDATA), systemRequired (URI), systemScreenDepth (CDATA), systemScreenSize (CDATA), systemAudioDesc (on|off), systemCPU (NMTOKEN), systemComponent (CDATA), systemOperatingSystem (CDATA), systemOverdubOrSubtitle (overdub|subtitle)|
The SMIL2.0 Media Object Module provides a framework for declaring media. The Media Object Module defines semantics for the ref, animation, audio, img, iframe (additional to semantics defined by XHTML), video, text and textstream elements. XHTML defines img and iframe elements, and so the integration of the Media module extends the semantics and content model of these elements.
This profile adds the ref, animation, audio, img, iframe, video, text and textstream elements to the content model of the par, seq, and excl elements of the Timing and Synchronization Module. It also adds these elements to the Inline content set of the Basic Text Module .
|ref, animation, audio, img&, iframe&, video, text, textstream||Common, Test, Timing, timeContainer, clipBegin, clipEnd, src, mediaType||AllAnimation, timeContainer, area, param|
|par&, seq&, excl&, Inline&||ref*, animation*, audio*, img*, iframe*, video*, text*, textstream*|
This profile adds media object properties to the XHTML img and iframe elements. While implementation rules for the img element remain unchanged, the following issues must be taken into consideration when supporting a SMIL-enabled iframe:
The SMIL2.0 Timing and Synchronization Module provides a framework for describing timing structure, timing control properties, and temporal relationships between elements.
The Timing and Synchronization Module defines the elements par, seq, and excl. It adds the par, seq, and excl elements to the Inline content set of the Basic Text, Hypertext and Tables Modules.
This profile adds the Timing and RuntimeSync attribute sets from the Timing and Synchronization Module to the elements in the Media Object Module, and adds the Timing attribute set to the Flow content set of the Basic Text Module In addition, the Timing attribute set is added to the body element in the XHTML Structure module.
|par||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|seq||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|excl||Common, Test, Timing, RuntimeSync, timeAction (CDATA)||par, seq, excl, Flow|
|Inline&||par*, seq*, excl*|
The Timing and Synchronization Module defines the Attribute sets "Timing" and "RuntimeSync ".
|Collection Name||Attributes in Collection|
|Timing||begin (CDATA), dur (CDATA), repeatCount (CDATA), repeatDur (CDATA), end (CDATA), endsync (CDATA), fill (CDATA), restart (always|whenNotActive|never), timeAction (TimeActions), onBegin (Script), onEnd (Script), onRepeat (Script)|
|RuntimeSync||syncBehavior (locked|canSlip|independent), syncTolerance (CDATA), syncMaster (true|false)|
In addition to the data types defined by XHTML Modularization, the XHTML+SMIL profile defines the TimeActions data type and its semantics, described in the following table:
|TimeActions||Authors may use the following recognized time actions, listed here
with their interpretations.
As part of the integration of timing and synchronization functionality with XHTML, this profile defines the timeContainer and timeAction attributes. This profile adds the timeContainer and timeAction attributes to the elements of the Flow content set of the Basic Text Module (as modified by all included modules). In addition, the timeContainer and timeAction attributes are added to the body element in the XHTML Structure module. The default value of the timeContainer attribute for body is "par". The timeContainer attribute is not allowed on the time container elements par, seq, and excl .
The timeAction attribute defines the behavior that is controlled by the timing model. The default depends upon the type of element. The default value is "none" when used with the time container elements. The default value of the timeAction attribute for body is "none".
The following table presents the default time actions. Those modules and elements that are not included do not have a defined time behavior, and cannot legally support timing attributes, or participate in the time model.
Certain elements have a notion of intrinsic behavior that can be controlled over time. This is generally some presentation or behavioral effect, such as the font style controls of the b and strong elements, and the click sensitivity of the a and area elements. One way to logically model the control of intrinsic behavior is to replace the element with a span when it is neither active nor frozen, and to use the original element when it is active or frozen.
Many other elements simply contain content and so default to controlling the "visibility" property for the element. In some cases, an element may have a presentational effect (e.g. the Ruby module elements), but be modeled as a content element. The decision is based upon the usefulness in common authoring scenarios of controlling the presentational behavior in isolation.
For those elements that default to controlling "visibility", setting timeAction to any other value overrides this, and will only control the specified timeAction (and not the visibility). For all other elements, the timeAction will control the default (intrinsic) behavior as well as the indicated timeAction behavior.
In addition, for those elements that default to "visibility", when they
are children of a sequence time container seq or
an element with "
timeContainer=seq", the default timeAction is "display". This more closely matches the
expected behavior of the SMIL Language profile.
Element default timeActions
|Module||Elements||Default time action|
|Media||(all)||schedule for playback and render|
|Text||em, kbd, strong, var||intrinsic behavior|
|Image Map||area||link sensitivity|
|Iframe||iframe||intrinsic behavior (schedule for display and render)|
|Timing||par, seq, excl||"none"|
All modules not listed in the table, and all Structure module elements except body do not support timing.
The XHTML+SMIL Language profile specifies events that can be used in conjunction with the SMIL elements defined by the profile. Additionally, DOM 2 dynamic events [DOMLevel2Events] can also be used.
|beginEvent||This event is raised when the timeline starts on an element (see
the definition of
|endEvent||This event is raised when the timeline stops on an element. (see
the definition of
|mediacomplete||This event is raised when the element's associated media finishes loading. This event may be raised before the media begins playing, when the element is associated with streaming media.|
|mediaerror||This event is raised when any error is caused by the media file. Errors caused by the media file may include an attempt to load a media file with an invalid path, or if problems with the media file (such as file corruption or an invalid media type) prevent it from loading and playing.|
|outofsync||This event is raised when the element loses synchronization with its associated timeline. This includes the interruption of an element's ability to play its associated media, or any other circumstance where synchronization is lost.|
|pause||This event is raised when the timeline on an element is paused. It may be raised in the case that the timeline is paused by a DOM method.|
|repeat||This event is raised when the timeline repeats on an element,
beginning with the second iteration (see the definition of the
|reset||This event is raised when the timeline state is reset to the value of the begin attribute and playback is commenced from the beginning of the timeline. It may be raised in the case that the timeline is reset by a DOM method.|
|resume||This event is raised when an element's timeline resumes from a paused state. It may be raised in the case that timeline playback is resumed by a DOM method.|
|reverse||This event is raised when the timeline on an element begins to play backward. It may be raised both in the course of normal timeline play, as well as in the case that element playback was reversed with a DOM method.|
|seek||This event is raised whenever a seek operation is performed on the element. It may be raised in the case that the seek operation is executed by a DOM method.|
|syncrestored||This event is raised whenever an outofsync event is raised and synchronization is restored. Specifically, the syncrestored event is raised when synchronization is resumed between the element and its associated timeline.|
|timeerror||This event is raised whenever a time-specific error occurs as a result of setting an invalid value for a SMIL attribute. The timeerror event is raised when any attribute defined by the XHTML+SMIL profile is set to an invalid value, either in the course of normal playback or by a DOM method.|
The Timing and Synchronization Module defines the following additional conformance definition requirements for the language integration profile:
The SMIL2.0 Time Manipulations Module provides attributes for the manipulation of SMIL element timelines.
The Time Manipulations Module defines the accelerate, decelerate, autoReverse, and speed attributes. These attributes are added to the elements that support timing in the XHTML+SMIL profile, including the elements in the Media Object Module, the SMIL animation, time container and transition elements, the XHTML elements img, iframe, body and the XHTML Flow element set.
|animate&, set&, animateMotion&, animateColor&||accelerate, decelerate, autoReverse, speed|
|Media&||accelerate, decelerate, autoReverse, speed|
|par&, seq&, excl&||accelerate, decelerate, autoReverse, speed|
|transitionFilter&||accelerate, decelerate, autoReverse, speed|
|img&, iframe&, body, Flow||accelerate, decelerate, autoReverse, speed|
The Transition Effects Module defines a taxonomy of transition effects as well as semantics and syntax for integrating these effects into XHTML documents. The XHTML+SMIL profile includes the functionality of the InlineTransitions module, which defines the transitionFilter element.
In an XHTML document, transitionFilter elements have the following attributes and content model:
|transitionFilter||Common, Timing, type, subtype, mode, fadeColor, targetElement, additive, accumulate, calcMode, values, keyTimes, keySplines, from, to, by||param|
A transitionFilter element may contain one or more XHTML param elements describing extended transition functionality, as described in the Transition Effects Module (specific section).
The transitionFilter element is added to the content model of the elements in the Media Object Module, and XHTML elements that support rendered content.
The specific XHTML elements that will support transitionFilter needs further attention.
|Media&, img&, ???||transitionFilter|
This section is normative.
In the future, XHTML+SMIL Language may be extended by other W3C recommendations, or by private extensions. For these extensions, the following rules must be obeyed:
Conformant XHTML+SMIL user agents are prepared to handle documents containing extensions that obey these two rules.
This section is normative .
"Cascading Style Sheets, level 2", Bert Bos, Håkon Wium Lie, Chris Lilley,
Ian Jacobs. W3C Recommendation 12 May 1998,
Available at http://www.w3.org/TR/REC-CSS2
"HTML 4.01 Specification" D. Raggett, A. Le Hors, I. Jacobs. W3C
Recommendation 24 December 1999,
Available at http://www.w3.org/TR/html401/
"Document Object Model Level 2 Events Specification", Tom Pixley. W3C
Recommendation 13 November, 2000
Available at http://www.w3.org/TR/DOM-Level-2-Events/
"Ruby Annotation". W3C Recommendation 31 May 2001.
Available at http://www.w3.org/TR/2001/REC-ruby-20010531
"Synchronized Multimedia Integration Language (SMIL 2.0) Specification".
W3C Recommendation 07 August 2001,
Available at http://www.w3.org/TR/smil20/
"The SMIL 2.0 Modules", W3C Recommendation 07 August 2001,
Available at http://www.w3.org/TR/smil20/smil-modules.html
"Synchronized Multimedia Modules based upon SMIL 1.0", Patrick Schmitz,
Ted Wugofski and Warner ten Kate. W3C Note 23 February 1999,
Available at http://www.w3.org/TR/NOTE-SYMM-modules. Superceded by [SMIL20-MOD] .
"The Extensible HyperText Markup Language: A Reformulation of HTML 4.0 in
XML 1.0". W3C Recommendation 26 January 2000,
Available at http://www.w3.org/TR/xhtml1/
"XML Linking Language (XLink)", S. DeRose, E. Maler, D. Orchard and B.
Trafford. W3C Recommendation 27 June 2001,
Available at http://www.w3.org/TR/xlink
"Modularization of XHTML", Shane McCarron, Murray Altheim, et al. W3C
Recommendation 10 April 2001,
Available at http://www.w3.org/TR/xhtml-modularization
"XML Schema, XML Schema Part 1: Structures". W3C Recommendation 2 May
Available at http://www.w3.org/TR/xmlschema-1/