- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Wed, 09 Oct 2013 12:46:09 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/5489687500dc
branches:
changeset: 544:5489687500dc
user: tbah <tavmjong@free.fr>
date: Fri Aug 02 14:50:58 2013 +0200
description:
Pre move to CSS.
details: https://svgwg.org/hg/svg2/rev/58f3eae27eef
branches:
changeset: 545:58f3eae27eef
user: tbah <tavmjong@free.fr>
date: Tue Oct 08 12:49:38 2013 +0200
description:
Update to tip.
details: https://svgwg.org/hg/svg2/rev/44560c7a6d88
branches:
changeset: 546:44560c7a6d88
user: tbah <tavmjong@free.fr>
date: Wed Oct 09 21:28:03 2013 +0200
description:
Major text reorganization and rewrite. Start move to CSS based layout.
diffstat:
master/Overview.html | 2 +-
master/animate.html | 2270 ++-
master/changes.html | 5 +
master/color.html | 372 +-
master/definitions.xml | 63 +-
master/feature.html | 7 -
master/images/text/text-anchor-middle.svg | 13 +
master/images/text/text-path.svg | 14 +
master/images/text/text-preformatted.svg | 11 +
master/images/text/text-shape-padding.png | 0
master/images/text/text-shape-padding.svg | 29 +
master/images/text/text-whitespace-vertical.svg | 17 +
master/images/text/text-wrap-complex.png | 0
master/images/text/text-wrap-horizontal-rl.svg | 18 +
master/images/text/text-wrap-horizontal.svg | 15 +
master/images/text/text-wrap-rectangle.svg | 14 +
master/images/text/text-wrap-vertical.svg | 15 +
master/images/text/text-wrapped.svg | 15 +
master/images/text/text_wrap_complex_inkscape.svg | 136 +
master/interact.html | 87 +-
master/linking.html | 228 +-
master/painting.html | 3 +
master/paths.html | 103 +-
master/propidx.html | 14 +
master/script.html | 254 +-
master/shapes.html | 540 +-
master/struct.html | 7 +
master/text.html | 11287 +++++++++++--------
master/types.html | 5 +-
29 files changed, 9223 insertions(+), 6321 deletions(-)
diffs (truncated from 17641 to 10000 lines):
diff --git a/master/Overview.html b/master/Overview.html
--- a/master/Overview.html
+++ b/master/Overview.html
@@ -33,16 +33,17 @@
<dt class="top-editors">Editors:</dt>
<dd>Nikos Andronikos, Canon, Inc. <<a href="mailto:nikos.andronikos@cisra.canon.com.au" class='url'>nikos.andronikos@cisra.canon.com.au</a>></dd>
<dd>Tavmjong Bah, Invited Expert <<a href="mailto:tavmjong@free.fr" class='url'>tavmjong@free.fr</a>></dd>
<dd>Brian Birtles, Mozilla Japan <<a href="mailto:bbirtles@mozilla.com" class='url'>bbirtles@mozilla.com</a>></dd>
<dd>Cyril Concolato, Telecom ParisTech <<a href="mailto:cyril.concolato@telecom-paristech.fr" class='url'>cyril.concolato@telecom-paristech.fr</a>></dd>
<dd>Erik Dahlström, Opera Software <<a href="mailto:ed@opera.com" class='url'>ed@opera.com</a>></dd>
<dd>Chris Lilley, W3C <<a href="mailto:chris@w3.org" class='url'>chris@w3.org</a>></dd>
<dd>Cameron McCormack, Mozilla Corporation <<a href="mailto:cam@mcc.id.au" class='url'>cam@mcc.id.au</a>></dd>
+ <dd>Doug Schepers, W3C <<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>></dd>
<dd>Dirk Schulze, Adobe Systems <<a href="mailto:dschulze@adobe.com" class='url'>dschulze@adobe.com</a>></dd>
<dd>Richard Schwerdtfeger, IBM <<a href="mailto:schwer@us.ibm.com" class='url'>schwer@us.ibm.com</a>></dd>
<dd>Jonathan Watt, Mozilla Corporation <<a href="mailto:jwatt@jwatt.org" class='url'>jwatt@jwatt.org</a>></dd>
</dl>
<!--
<p>Please refer to the <a href="http://www.w3.org/2011/08/REC-SVG11-20110802-errata"><strong>errata</strong></a> for this document, which may include some normative corrections.</p>
-->
<edit:copyright/>
@@ -177,17 +178,16 @@ of SVG – as much of the text in this d
earlier specifications – including:</p>
<ul class="old-editor-list">
<li>Patrick Dengler, Microsoft Corporation <<a href="mailto:patd@microsoft.com" class='url'>patd@microsoft.com</a>> <span class="authornote">(Version 1.1 Second Edition)</span></li>
<li>Jon Ferraiolo, ex Adobe Systems <<a href="mailto:jferrai@us.ibm.com" class='url'>jferrai@us.ibm.com</a>> <span class="authornote">(Versions 1.0 and 1.1 First Edition; until 10 May 2006)</span></li>
<li>Anthony Grasso, Canon Inc. <<a href="mailto:anthony.grasso@cisra.canon.com.au" class='url'>anthony.grasso@cisra.canon.com.au</a>> <span class="authornote">(Version 1.1 Second Edition)</span></li>
<li>Dean Jackson, ex W3C <<a href="mailto:dean@w3.org" class='url'>dean@w3.org</a>> <span class="authornote">(Version 1.1 First Edition; until February 2007)</span></li>
<li>藤沢 淳 (FUJISAWA Jun), Canon Inc. <<a href="mailto:fujisawa.jun@canon.co.jp" class='url'>fujisawa.jun@canon.co.jp</a>> <span class="authornote">(Version 1.1 First Edition)</span></li>
- <li>Doug Schepers, W3C <<a href="mailto:schepers@w3.org" class='url'>schepers@w3.org</a>> <span class="authornote">(Version 1.1 Second Edition)</span></li>
</ul>
<p>Finally, the SVG Working Group would like to acknowledge the
great many people outside of the SVG Working Group who help with the
process of developing the SVG specifications. These people are too
numerous to list individually. They include but are not limited to
the early implementers of the SVG 1.0 and 1.1 languages (including
viewers, authoring tools, and server-side transcoders), developers of
diff --git a/master/animate.html b/master/animate.html
--- a/master/animate.html
+++ b/master/animate.html
@@ -343,121 +343,161 @@ and elements.</p>
<edit:with element='animate'>
<h3 id="TargetElement">Attributes to identify the target element for an animation</h3>
<p>The following attribute is common to all animation
elements and identifies the target element for the animation.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="HrefAttribute"><span class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd><p>An <a>IRI
- reference</a> to the element which is the target of this
- animation and which therefore will be modified over
- time.</p>
- <p>The target element must be part of the <a>current
- SVG document fragment</a>.</p>
- <p><iri> must point to exactly one target element which
- is capable of being the target of the given animation. If
- <iri> points to multiple target elements, if the
- given target element is not capable of being a target of
- the given animation, or if the given target element is not
- part of the current SVG document fragment, then the
- document is in error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).</p>
- <p>If the <a>'xlink:href'</a> attribute
- is not provided, then the target element will be the
- immediate parent element of the current animation
- element.</p>
- <p>Refer to the descriptions of the individual animation
- elements for any restrictions on what types of elements can
- be targets of particular types of animations.</p>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="HrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>An <a>IRI reference</a> to the element which is the target of this
+ animation and which therefore will be modified over
+ time.</p>
+ <p>The target element must be part of the <a>current
+ SVG document fragment</a>.</p>
+ <p><iri> must point to exactly one target element which
+ is capable of being the target of the given animation. If
+ <iri> points to multiple target elements, if the
+ given target element is not capable of being a target of
+ the given animation, or if the given target element is not
+ part of the current SVG document fragment, then the
+ document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+ <p>If the <a>'xlink:href'</a> attribute
+ is not provided, then the target element will be the
+ immediate parent element of the current animation
+ element.</p>
+ <p>Refer to the descriptions of the individual animation
+ elements for any restrictions on what types of elements can
+ be targets of particular types of animations.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+</dl>
<h3 id="TargetAttributes">Attributes to identify the target attribute or property for an animation</h3>
<p>The following attributes are the <dfn id='animation-attribute-target-attributes'>animation attribute target attributes</dfn>,
which identify the target attribute or property for the given
<a href="animate.html#TargetElement">target element</a> whose value changes
over time.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AttributeNameAttribute"><span class='adef'>attributeName</span>
- = "<span class='attr-value'><attributeName></span>"</dt>
- <dd><p>Specifies the name of the target attribute. An XMLNS
- prefix may be used to indicate the XML namespace for the
- attribute. The prefix will be interpreted in the scope of
- the current (i.e., the referencing) animation
- element.</p>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
- <dt id="AttributeTypeAttribute"><span class='adef'>attributeType</span>
- = "<span class='attr-value'>CSS | XML | auto</span>"</dt>
- <dd>
- <p>Specifies the namespace in which the target attribute and
- its associated values are defined. The attribute value is
- one of the following (values are case-sensitive):</p>
- <dl>
- <dt><span class='attr-value'>CSS</span></dt>
- <dd>This specifies that the value of <a>'attributeName'</a> is
- the name of a CSS property defined as animatable in
- this specification.</dd>
- <dt><span class='attr-value'>XML</span></dt>
- <dd>This specifies that the value of <a>'attributeName'</a> is
- the name of an XML attribute defined in the default XML
- namespace for the target element. If the value for
- <a>'attributeName'</a> has an XMLNS prefix, the
- implementation must use the associated namespace as
- defined in the scope of the target element. The
- attribute must be defined as animatable in this
- specification.</dd>
- <dt><span class='attr-value'>auto</span></dt>
- <dd>The implementation should match the
- <a>'attributeName'</a> to an attribute for the
- target element. The implementation must first search
- through the list of CSS properties for a matching
- property name, and if none is found, search the default
- XML namespace for the element.</dd>
- </dl>
- <p>The default value is <span class='attr-value'>'auto'</span>.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
- </dd>
- </dl>
- </div>
-
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AttributeNameAttribute">attributeName</dfn></td>
+ <td><a><XML-Name></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the name of the target attribute. An XMLNS
+ prefix may be used to indicate the XML namespace for the
+ attribute. The prefix will be interpreted in the scope of
+ the current (i.e., the referencing) animation
+ element.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AttributeTypeAttribute">attributeType</dfn></td>
+ <td>CSS | XML | auto</td>
+ <td>auto</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the namespace in which the target attribute and
+ its associated values are defined. The attribute value is
+ one of the following (values are case-sensitive):</p>
+ <dl>
+ <dt><span class='attr-value'>CSS</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of a CSS property defined as animatable in
+ this specification.</dd>
+ <dt><span class='attr-value'>XML</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of an XML attribute defined in the default XML
+ namespace for the target element. If the value for
+ <a>'attributeName'</a> has an XMLNS prefix, the
+ implementation must use the associated namespace as
+ defined in the scope of the target element. The
+ attribute must be defined as animatable in this
+ specification.</dd>
+ <dt><span class='attr-value'>auto</span></dt>
+ <dd>The implementation should match the
+ <a>'attributeName'</a> to an attribute for the
+ target element. The implementation must first search
+ through the list of CSS properties for a matching
+ property name, and if none is found, search the default
+ XML namespace for the element.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+</dl>
<h3 id="Animation.nsexample">Animation with namespaces</h3>
<p id="ExampleNS01"><span class="example-ref">Example
animns01</span> below shows a namespace prefix being resolved
to a namespace name in the scope of the referencing element, and
that namespace name being used (regardless of the prefix which
@@ -604,368 +644,453 @@ the animation once the animation ends.</
<p id="optWSP">In the syntax specifications that follow, optional white
space is indicated as "S", defined as follows:</p>
<pre>
S ::= (#x20 | #x9 | #xD | #xA)*
</pre>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="BeginAttribute"><span class='adef'>begin</span> =
- "<span class='attr-value'><a href="#BeginValueListSyntax">begin-value-list</a></span>"</dt>
- <dd>
- <p>Defines when the element should begin (i.e. become
- active).</p>
- <p>The attribute value is a semicolon separated list of
- values.</p>
-
- <dl>
- <dt id="BeginValueListSyntax">begin-value-list ::= <a
- href="#BeginValueSyntax">begin-value</a> (S? ";" S?
- begin-value-list )?</dt>
- <dd>A semicolon separated list of begin values. The
- interpretation of a list of begin times is detailed in
- SMIL Animation's section on <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">
- "Evaluation of begin and end time lists"</a>.</dd>
- <dt id="BeginValueSyntax">begin-value ::= ( <a
- href="#OffsetValueSyntax">offset-value</a> | <a
- href="#SyncbaseValueSyntax">syncbase-value</a> | <a
- href="#EventValueSyntax">event-value</a> | <a
- href="#RepeatValueSyntax">repeat-value</a> | <a
- href="#AccessKeyValueSyntax">accessKey-value</a> | <a
- href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
- | <a href="#IndefiniteValue">"indefinite"</a> )</dt>
- <dd>Describes the element begin.</dd>
- <dt id="OffsetValueSyntax">offset-value ::= ( S? "+" |
- "-" S? )? ( <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )</dt>
- <dd>For SMIL Animation, this describes the element
- begin as an offset from an implicit syncbase. For SVG,
- the implicit syncbase begin is defined to be relative
- to the document begin. Negative begin times are
- entirely valid and easy to compute, as long as there is
- a resolved document begin time.</dd>
- <dt id="SyncbaseValueSyntax">syncbase-value ::= (
- Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>Describes a <dfn>syncbase</dfn>
- and an optional offset from that syncbase. The element
- begin is defined relative to the begin or active end of
- another animation. A syncbase consists of an ID
- reference to another animation element followed by
- either <code>begin</code> or <code>end</code> to
- identify whether to synchronize with the beginning or
- active end of the referenced animation element.</dd>
- <dt id="EventValueSyntax">event-value ::= ( Id-value
- "." )? ( event-ref ) ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>Describes an event and an optional offset that
- determine the element begin. The animation begin is
- defined relative to the time that the event is raised.
- The list of event-symbols available for a given
- event-base element is the list of event attributes
- available for the given element as defined in the <a
- href="interact.html">Interactivity</a> chapter, with the one difference
- that the leading 'on' is removed from the event name
- (i.e., the animation event name is 'click', not
- 'onclick'). A list of all events supported by SVG can
- be found in <a href="interact.html#SVGEvents">Complete
- list of supported events</a>. Details of event-based
- timing are described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Unifying">
- SMIL Animation: Unifying Event-based and Scheduled
- Timing</a>.</dd>
- <dt id="RepeatValueSyntax">repeat-value ::= ( Id-value
- "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>Describes a qualified repeat event. The element
- begin is defined relative to the time that the repeat
- event is raised with the specified iteration
- value.</dd>
- <dt id="AccessKeyValueSyntax">accessKey-value ::=
- "accessKey(" character ")" ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>Describes an accessKey that determines the element
- begin. The element begin is defined relative to the
- time that the accessKey character is input by the
- user.</dd>
- <dt id="WallclockSyncValueSyntax">wallclock-sync-value ::= "wallclock(" wallclock-value
- ")"</dt>
- <dd>Describes the element begin as a real-world clock
- time. The wallclock time syntax is based upon syntax
- defined in <cite>Representation of dates and times</cite>
- [<a href="refs.html#ref-ISO8601">ISO8601</a>].</dd>
- <dt id="IndefiniteValue">"indefinite"</dt>
- <dd><p>The begin of the animation will be determined by a
- "beginElement()" method call or a hyperlink targeted to
- the element.</p>
- <p>The animation DOM methods are described in <a
- href="#DOMInterfaces">DOM interfaces</a>.</p>
- <p>Hyperlink-based timing is described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics">
- SMIL Animation: Hyperlinks and timing</a>.</p></dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: 'begin' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
- </dd>
-
- <dt id="DurAttribute"><span class='adef'>dur</span> =
- <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> | "media" | "indefinite"</span></dt>
- <dd>
- <p>Specifies the simple duration.</p>
- <p>The attribute value can be one of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd>Specifies the length of the simple duration in <a
- href="#PresentationTime">presentation time</a>. Value
- must be greater than 0.</dd>
- <dt>"media"</dt>
- <dd>Specifies the simple duration as the intrinsic
- media duration. This is only valid for elements that
- define media.<br />
- (For SVG's <a href="#AnimationElements">animation elements</a>, if <span
- class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- <dt>"indefinite"</dt>
- <dd>Specifies the simple duration as indefinite.</dd>
- </dl>
- <p>If the animation does not have a <a>'dur'</a> attribute, the simple
- duration is indefinite. Note that interpolation will not
- work if the simple duration is indefinite (although this
- may still be useful for <a>'set'</a> elements). Except
- for any SVG-specific rules explicitly mentioned in this
- specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DurAttribute">
- SMIL Animation: 'dur' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
- </dd>
-
- <dt id="EndAttribute"><span class='adef'>end</span> = "<span class='attr-value'><a
- href="#EndValueListSyntax">end-value-list</a></span>"</dt>
- <dd>
- <p>Defines an end value for the animation that can constrain
- the active duration. The attribute value is a semicolon
- separated list of values.</p>
-
- <dl>
- <dt id="EndValueListSyntax">end-value-list ::= <a
- href="#EndValueSyntax">end-value</a> (S? ";" S?
- end-value-list )?</dt>
- <dd>A semicolon separated list of end values. The
- interpretation of a list of end times is detailed
- below.</dd>
- </dl>
-
- <dl>
- <dt id="EndValueSyntax">end-value ::= ( <a
- href="#OffsetValueSyntax">offset-value</a> | <a
- href="#SyncbaseValueSyntax">syncbase-value</a> | <a
- href="#EventValueSyntax">event-value</a> | <a
- href="#RepeatValueSyntax">repeat-value</a> | <a
- href="#AccessKeyValueSyntax">accessKey-value</a> | <a
- href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
- | "indefinite" )</dt>
- <dd>Describes the active end of the animation.</dd>
- </dl>
- <p>A value of <span class="attr-value">'indefinite'</span>
- specifies that the end of the animation will be
- determined by an <a>SVGAnimationElement::endElement</a> method call (the animation
- DOM methods are described in <a href="#DOMInterfaces">DOM
- interfaces</a>).</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#EndActiveAttribute">
- SMIL Animation: 'end' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.2).</p>
- </dd>
- <dt id="MinAttribute"><span class='adef'>min</span> = <span class='attr-value'><a
- href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
- <dd>
- <p>Specifies the minimum value of the active duration.</p>
- <p>The attribute value can be either of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd><p>Specifies the length of the minimum value of the
- active duration, measured in local time.</p>
- <p>Value must be greater than 0.</p></dd>
- <dt>"media"</dt>
- <dd>Specifies the minimum value of the active duration
- as the intrinsic media duration. This is only valid for
- elements that define media. (For SVG's <a href="#AnimationElements">animation elements</a>,
- if <span class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- </dl>
- <p>The default value for <a>'min'</a>
- is <span class='attr-value'>'0'</span>. This does not constrain the active duration at
- all.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'min' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
- </dd>
- <dt id="MaxAttribute"><span class='adef'>max</span> = <span class='attr-value'><a
- href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
- <dd>
- <p>Specifies the maximum value of the active duration.</p>
- <p>The attribute value can be either of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd><p>Specifies the length of the maximum value of the
- active duration, measured in local time.</p>
- <p>Value must be greater than 0.</p></dd>
- <dt>"media"</dt>
- <dd>Specifies the maximum value of the active duration
- as the intrinsic media duration. This is only valid for
- elements that define media. (For SVG's
- <a href="#AnimationElements">animation elements</a>, if <span
- class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- </dl>
- <p>There is no default value for <a>'max'</a>. This does not constrain the
- active duration at all.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'max' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
- </dd>
- <dt id="RestartAttribute"><span class='adef'>restart</span> =
- <span class='attr-value'>"always" | "whenNotActive" | "never"</span></dt>
- <dd>
- <dl>
- <dt><span class='attr-value'>always</span></dt>
- <dd>The animation can be restarted at any
- time. <br />
- This is the default value.</dd>
- <dt><span class='attr-value'>whenNotActive</span></dt>
- <dd>The animation can only be restarted when it is not
- active (i.e. after the active end). Attempts to restart
- the animation during its active duration are
- ignored.</dd>
- <dt><span class='attr-value'>never</span></dt>
- <dd>The element cannot be restarted for the remainder
- of the current simple duration of the parent time
- container. (In the case of SVG, since the parent time
- container is the SVG document fragment, then the
- animation cannot be restarted for the remainder of the
- document duration.)</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RestartAttribute">SMIL Animation: 'restart' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.7).</p>
- </dd>
- <dt id="RepeatCountAttribute"><span class='adef'>repeatCount</span> =
- <span class='attr-value'>numeric value | "indefinite"</span></dt>
- <dd>
- <p>Specifies the number of iterations of the animation
- function. It can have the following attribute values:</p>
- <dl>
- <dt>numeric value</dt>
- <dd>This is a (base 10) "floating point" numeric value
- that specifies the number of iterations. It can include
- partial iterations expressed as fraction values. A
- fractional value describes a portion of the <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationFunction">
- simple duration</a>. Values must be greater than
- 0.</dd>
- <dt>"indefinite"</dt>
- <dd>The animation is defined to repeat indefinitely
- (i.e. until the document ends).</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute">SMIL Animation: 'repeatCount' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- <dt id="RepeatDurAttribute"><span class='adef'>repeatDur</span> =
- <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> |
- "indefinite"</span></dt>
- <dd>
- <p>Specifies the total duration for repeat. It can have the
- following attribute values:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd>Specifies the duration in <a
- href="#PresentationTime">presentation time</a> to
- repeat the animation function
- <code><strong>f(t)</strong></code>.</dd>
- <dt>"indefinite"</dt>
- <dd>The animation is defined to repeat indefinitely
- (i.e. until the document ends).</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatDurAttribute">SMIL Animation: 'repeatDur' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- <dt id="FillAttribute"><span class='adef'>fill</span> =
- <span class='attr-value'>"freeze" | "remove"</span></dt>
- <dd>
- <p>This attribute can have the following values:</p>
- <dl>
- <dt><span class='attr-value'>freeze</span></dt>
- <dd>The animation effect <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">
- F(t)</a> is defined to freeze the effect value at the
- last value of the active duration. The animation effect
- is "frozen" for the remainder of the document duration
- (or until the animation is restarted - see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
- SMIL Animation: Restarting animation</a>).</dd>
- <dt><span class='attr-value'>remove</span></dt>
- <dd><p>The animation effect is removed (no longer applied)
- when the active duration of the animation is over.
- After the active end of the animation, the animation no
- longer affects the target (unless the animation is
- restarted - see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
- SMIL Animation: Restarting animation</a>).</p>
- <p>This is the default value.</p></dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FillAttribute">SMIL Animation: 'fill' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.5).</p>
- </dd>
- </dl>
-
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="BeginAttribute">begin</dfn></td>
+ <td><a href="#BeginValueListSyntax">begin-value-list</a></td>
+ <td>0s</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Defines when the element should begin (i.e. become
+ active).</p>
+ <p>The attribute value is a semicolon separated list of
+ values.</p>
+
+ <dl>
+ <dt id="BeginValueListSyntax">begin-value-list ::= <a
+ href="#BeginValueSyntax">begin-value</a> (S? ";" S?
+ begin-value-list )?</dt>
+ <dd>A semicolon separated list of begin values. The
+ interpretation of a list of begin times is detailed in
+ SMIL Animation's section on <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">
+ "Evaluation of begin and end time lists"</a>.</dd>
+ <dt id="BeginValueSyntax">begin-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | <a href="#IndefiniteValue">"indefinite"</a> )</dt>
+ <dd>Describes the element begin.</dd>
+ <dt id="OffsetValueSyntax">offset-value ::= ( S? "+" |
+ "-" S? )? ( <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )</dt>
+ <dd>For SMIL Animation, this describes the element
+ begin as an offset from an implicit syncbase. For SVG,
+ the implicit syncbase begin is defined to be relative
+ to the document begin. Negative begin times are
+ entirely valid and easy to compute, as long as there is
+ a resolved document begin time.</dd>
+ <dt id="SyncbaseValueSyntax">syncbase-value ::= (
+ Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes a <dfn>syncbase</dfn>
+ and an optional offset from that syncbase. The element
+ begin is defined relative to the begin or active end of
+ another animation. A syncbase consists of an ID
+ reference to another animation element followed by
+ either <code>begin</code> or <code>end</code> to
+ identify whether to synchronize with the beginning or
+ active end of the referenced animation element.</dd>
+ <dt id="EventValueSyntax">event-value ::= ( Id-value
+ "." )? ( event-ref ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes an event and an optional offset that
+ determine the element begin. The animation begin is
+ defined relative to the time that the event is raised.
+ The list of event-symbols available for a given
+ event-base element is the list of event attributes
+ available for the given element as defined in the <a
+ href="interact.html">Interactivity</a> chapter, with the one difference
+ that the leading 'on' is removed from the event name
+ (i.e., the animation event name is 'click', not
+ 'onclick'). A list of all events supported by SVG can
+ be found in <a href="interact.html#SVGEvents">Complete
+ list of supported events</a>. Details of event-based
+ timing are described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Unifying">
+ SMIL Animation: Unifying Event-based and Scheduled
+ Timing</a>.</dd>
+ <dt id="RepeatValueSyntax">repeat-value ::= ( Id-value
+ "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes a qualified repeat event. The element
+ begin is defined relative to the time that the repeat
+ event is raised with the specified iteration
+ value.</dd>
+ <dt id="AccessKeyValueSyntax">accessKey-value ::=
+ "accessKey(" character ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes an accessKey that determines the element
+ begin. The element begin is defined relative to the
+ time that the accessKey character is input by the
+ user.</dd>
+ <dt id="WallclockSyncValueSyntax">wallclock-sync-value ::= "wallclock(" wallclock-value
+ ")"</dt>
+ <dd>Describes the element begin as a real-world clock
+ time. The wallclock time syntax is based upon syntax
+ defined in <cite>Representation of dates and times</cite>
+ [<a href="refs.html#ref-ISO8601">ISO8601</a>].</dd>
+ <dt id="IndefiniteValue">"indefinite"</dt>
+ <dd><p>The begin of the animation will be determined by a
+ "beginElement()" method call or a hyperlink targeted to
+ the element.</p>
+ <p>The animation DOM methods are described in <a
+ href="#DOMInterfaces">DOM interfaces</a>.</p>
+ <p>Hyperlink-based timing is described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics">
+ SMIL Animation: Hyperlinks and timing</a>.</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: 'begin' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="DurAttribute">dur</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media" | "indefinite"</td>
+ <td>indefinite</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the simple duration.</p>
+ <p>The attribute value can be one of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the length of the simple duration in <a
+ href="#PresentationTime">presentation time</a>. Value
+ must be greater than 0.</dd>
+ <dt>"media"</dt>
+ <dd>Specifies the simple duration as the intrinsic
+ media duration. This is only valid for elements that
+ define media.<br />
+ (For SVG's <a href="#AnimationElements">animation elements</a>, if <span
+ class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ <dt>"indefinite"</dt>
+ <dd>Specifies the simple duration as indefinite.</dd>
+ </dl>
+ <p>If the animation does not have a <a>'dur'</a> attribute, the simple
+ duration is indefinite. Note that interpolation will not
+ work if the simple duration is indefinite (although this
+ may still be useful for <a>'set'</a> elements). Except
+ for any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DurAttribute">
+ SMIL Animation: 'dur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="EndAttribute">end</dfn></td>
+ <td><a href="#EndValueListSyntax">end-value-list</a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Defines an end value for the animation that can constrain
+ the active duration. The attribute value is a semicolon
+ separated list of values.</p>
+
+ <dl>
+ <dt id="EndValueListSyntax">end-value-list ::= <a
+ href="#EndValueSyntax">end-value</a> (S? ";" S?
+ end-value-list )?</dt>
+ <dd>A semicolon separated list of end values. The
+ interpretation of a list of end times is detailed
+ below.</dd>
+ </dl>
+
+ <dl>
+ <dt id="EndValueSyntax">end-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | "indefinite" )</dt>
+ <dd>Describes the active end of the animation.</dd>
+ </dl>
+ <p>A value of <span class="attr-value">'indefinite'</span>
+ specifies that the end of the animation will be
+ determined by an <a>SVGAnimationElement::endElement</a> method call (the animation
+ DOM methods are described in <a href="#DOMInterfaces">DOM
+ interfaces</a>).</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#EndActiveAttribute">
+ SMIL Animation: 'end' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.2).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="MinAttribute">min</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media"</td>
+ <td>0s</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><dfn id="MaxAttribute">max</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media"</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'min'</a> and <a>'max'</a> attributes specify the minimum and
+ maximum value of the active duration, respectively.</p>
+ <p>The attribute values can be either of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd><p>Specifies the length of the minimum or maximum value of the
+ active duration, measured in local time.</p>
+ <p>Value must be greater than 0.</p></dd>
+ <dt>"media"</dt>
+ <dd>Specifies the minimum value of the active duration
+ as the intrinsic media duration. This is only valid for
+ elements that define media. (For SVG's <a href="#AnimationElements">animation elements</a>,
+ if <span class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ </dl>
+ <p>The lacuna value for <a>'min'</a> is <span class='attr-value'>'0'</span> and
+ there is no lacuna value for <a>'max'</a>. In both cases, this does not
+ constrain the active duration at all.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for these
+ attributes is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: The min and max attributes</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RestartAttribute">restart</dfn></td>
+ <td>always | whenNotActive | never</td>
+ <td>always</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <dl>
+ <dt><span class='attr-value'>always</span></dt>
+ <dd>The animation can be restarted at any
+ time. This is the default value.</dd>
+ <dt><span class='attr-value'>whenNotActive</span></dt>
+ <dd>The animation can only be restarted when it is not
+ active (i.e. after the active end). Attempts to restart
+ the animation during its active duration are
+ ignored.</dd>
+ <dt><span class='attr-value'>never</span></dt>
+ <dd>The element cannot be restarted for the remainder
+ of the current simple duration of the parent time
+ container. (In the case of SVG, since the parent time
+ container is the SVG document fragment, then the
+ animation cannot be restarted for the remainder of the
+ document duration.)</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RestartAttribute">SMIL Animation: 'restart' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.7).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RepeatCountAttribute">repeatCount</dfn></td>
+ <td><a><number></a> | indefinite</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the number of iterations of the animation
+ function. It can have the following attribute values:</p>
+ <dl>
+ <dt><a><number></a></dt>
+ <dd>This is a (base 10) "floating point" numeric value
+ that specifies the number of iterations. It can include
+ partial iterations expressed as fraction values. A
+ fractional value describes a portion of the <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationFunction">
+ simple duration</a>. Values must be greater than
+ 0.</dd>
+ <dt>indefinite</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute">SMIL Animation: 'repeatCount' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RepeatDurAttribute">repeatDur</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "indefinite"</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the total duration for repeat. It can have the
+ following attribute values:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the duration in <a
+ href="#PresentationTime">presentation time</a> to
+ repeat the animation function
+ <code><strong>f(t)</strong></code>.</dd>
+ <dt>"indefinite"</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatDurAttribute">SMIL Animation: 'repeatDur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="FillAttribute">fill</dfn></td>
+ <td>freeze | remove</td>
+ <td>remove</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>This attribute can have the following values:</p>
+ <dl>
+ <dt><span class='attr-value'>freeze</span></dt>
+ <dd>The animation effect <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">
+ F(t)</a> is defined to freeze the effect value at the
+ last value of the active duration. The animation effect
+ is "frozen" for the remainder of the document duration
+ (or until the animation is restarted - see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</dd>
+ <dt><span class='attr-value'>remove</span></dt>
+ <dd><p>The animation effect is removed (no longer applied)
+ when the active duration of the animation is over.
+ After the active end of the animation, the animation no
+ longer affects the target (unless the animation is
+ restarted - see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FillAttribute">SMIL Animation: 'fill' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.5).</p>
+ </dd>
+</dl>
<p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>] defines the detailed processing
rules associated with the above attributes. Except for any SVG-specific
rules explicitly mentioned in this specification, the SMIL Animation
specification is the normative definition of the processing rules for
the above attributes.</p>
@@ -1030,354 +1155,422 @@ Thus:</p>
<p>The following attributes are the <dfn id='animation-value-attributes'>animation value attributes</dfn>.
They are common to elements <edit:elementswithattributecategory name='animation value'/>. These
attributes define the values that are assigned to the target
attribute or property over time. The attributes below provide
control over the relative timing of keyframes and the
interpolation method between discrete values.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="CalcModeAttribute"><span class='adef'>calcMode</span> =
- <span class="attr-value">"discrete | linear | paced | spline"</span></dt>
- <dd>
- <p>Specifies the interpolation mode for the animation. This
- can take any of the following values. The default mode is
- <span class='attr-value'>'linear'</span>, however if the attribute does not support
- linear interpolation (e.g. for strings), the
- <a>'calcMode'</a> attribute is ignored and discrete
- interpolation is used.</p>
- <dl>
- <dt><span class='attr-value'>discrete</span></dt>
- <dd>This specifies that the animation function will
- jump from one value to the next without any
- interpolation.</dd>
- <dt><span class='attr-value'>linear</span></dt>
- <dd>Simple linear interpolation between values is used
- to calculate the animation function. Except for <a>'animateMotion'</a>, this
- is the default <a>'calcMode'</a>.</dd>
- <dt><span class='attr-value'>paced</span></dt>
- <dd>
- Defines interpolation to produce an even pace of
- change across the animation. This is only supported for the
- data types for which there is an appropriate distance function
- defined, which includes only scalar numeric types plus the
- types listed in <a href="#complexDistances">Paced animation and complex types</a>.
- If <span class='attr-value'>'paced'</span> is specified, any
- <a>'keyTimes'</a> or <a>'keySplines'</a> will
- be ignored. For <a>'animateMotion'</a>, this
- is the default <a>'calcMode'</a>.
- Authors are discouraged from using paced animation on types
- that do not have a distance function defined, due to its
- unpredictable behavior in some user agents.</dd>
- <dt><span class='attr-value'>spline</span></dt>
- <dd>Interpolates from one value in the
- <a>'values'</a> list to the next according to a
- time function defined by a cubic Bézier spline.
- The points of the spline are defined in the
- <a>'keyTimes'</a> attribute, and the control points
- for each interval are defined in the
- <a>'keySplines'</a> attribute.</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#CalcModeAttribute">SMIL Animation: 'calcMode' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
- </dd>
- <dt id="ValuesAttribute"><span class='adef'>values</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd>A semicolon-separated list of one or more values.
- Vector-valued attributes are supported using the vector
- syntax of the <a>'attributeType'</a> domain. Per the SMIL
- specification, leading and trailing white space,
- and white space before and after semicolon separators,
- is allowed and will be ignored. Except for
- any SVG-specific rules explicitly mentioned in this
- specification, the normative definition for this attribute
- is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ValuesAttribute">SMIL Animation: 'values' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
- <dt id="KeyTimesAttribute"><span class='adef'>keyTimes</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd>
- <p>A semicolon-separated list of time values used to control
- the pacing of the animation. Each time in the list
- corresponds to a value in the <a>'values'</a>
- attribute list, and defines when the value is used in the
- animation function. Each time value in the
- <a>'keyTimes'</a> list is specified as a floating
- point value between 0 and 1 (inclusive), representing a
- proportional offset into the simple duration of the
- animation element.</p>
-
- <p>For animations specified with a <a>'values'</a> list, the
- <a>'keyTimes'</a> attribute if specified must have exactly as many
- values as there are in the <a>'values'</a> attribute. For from/to/by
- animations, the <a>'keyTimes'</a> attribute if specified must have
- two values.</p>
-
- <p>Each successive time value must be greater than or equal
- to the preceding time value.</p>
-
- <p>The <a>'keyTimes'</a> list semantics depends upon
- the interpolation mode:</p>
- <ul>
- <li>For linear and spline animation, the first
- time value in the list must be 0, and the last time
- value in the list must be 1. The key time
- associated with each value defines when the value is
- set; values are interpolated between the key times.</li>
- <li>For discrete animation, the first time value in the
- list must be 0. The time associated with each value
- defines when the value is set; the animation function
- uses that value until the next time defined in
- <a>'keyTimes'</a>.</li>
- </ul>
- <p>If the interpolation mode is <span class='attr-value'>'paced'</span>, the
- <a>'keyTimes'</a> attribute is ignored.</p>
-
- <p>If there are any errors in the <a>'keyTimes'</a>
- specification (bad values, too many or too few values),
- the document fragment is in error (see <a
- href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
-
- <p>If the simple duration is indefinite, any
- <a>'keyTimes'</a> specification will be
- ignored.</p>
-
- <p>
- Because paced animation interpolation is unspecified for some
- value types, authors are encouraged to use
- <span class="attr-value">'linear'</span> animation interpolation with
- calculated <a>'keyTimes'</a>
- to achieve particular interpolation behavior for these types.
- </p>
-
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeyTimesAttribute">SMIL Animation: 'keyTimes' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
- </dd>
- <dt id="KeySplinesAttribute"><span class='adef'>keySplines</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd><p>A set of Bézier control points associated with
- the <a>'keyTimes'</a> list, defining a cubic
- Bézier function that controls interval pacing. The
- attribute value is a semicolon-separated list of control
- point descriptions. Each control point description is a set
- of four values: <code>x1 y1 x2 y2</code>, describing the
- Bézier control points for one time segment. Note:
- <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-animation.html#adef-keySplines">SMIL</a>
- allows these values to be separated either by commas with
- optional whitespace, or by whitespace alone. The
- <a>'keyTimes'</a> values that define the associated
- segment are the Bézier "anchor points", and the
- <a>'keySplines'</a> values are the control points.
- Thus, there must be one fewer sets of control points than
- there are <a>'keyTimes'</a>.</p>
-
- <p>The values must all be in the range 0 to 1.</p>
-
- <p>This attribute is ignored unless the <a>'calcMode'</a>
- is set to <span class='attr-value'>'spline'</span>.</p>
-
- <p>If there are any errors in the <a>'keySplines'</a>
- specification (bad values, too many or too few values), the
- document fragment is in error (see <a
- href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
-
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeySplinesAttribute">SMIL Animation: 'keySplines' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p></dd>
-
- <dt id="FromAttribute"><span class='adef'>from</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies the starting value of the animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromAttribute">SMIL Animation: 'from' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
-
- <dt id="ToAttribute"><span class='adef'>to</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies the ending value of the animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ToAttribute">SMIL Animation: 'to' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
-
- <dt id="ByAttribute"><span class='adef'>by</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies a relative offset value for the
- animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ByAttribute">SMIL Animation: 'by' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
- </dl>
-
- <p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]
- defines the detailed processing
- rules associated with the above attributes. Except for any
- SVG-specific rules explicitly mentioned in this
- specification, the SMIL Animation specification is the normative definition of
- the processing rules for the above attributes.</p>
- <p>The animation values specified in the animation element
- must be legal values for the specified attribute. Leading and
- trailing white space, and white space before and after
- semicolon separators, will be ignored.</p>
- <p>All values specified must be legal values for the
- specified attribute (as defined in the associated namespace).
- If any values are not legal, the document fragment is in
- error (see <a href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
- <p>If a list of values is used, the animation will apply the
- values in order over the course of the animation. If a list
- of <a>'values'</a> is specified, any <a>'from'</a>,
- <a>'to'</a> and <a>'by'</a> attribute values are ignored.</p>
- <p>The processing rules for the variants of
- <em>from/by/to</em> animations are described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">
- Animation function values</a> with the following exception.</p>
- <p>In order to provide behavior that is intuitive and consistent
- between discrete animations with an explicitly specified
- <a>'from'</a> attribute (e.g. "from-to animation") and those
- where the underlying value is used (e.g. "to animation"), the
- behavior of discrete to-animation in SVG deviates from the
- definition in SMIL Animation.
- As with a discrete from-to animation, a discrete to animation
- will set the underlying value for the first half of the simple
- duration (or, if a <a>'keyTimes'</a> list is provided, until the
- simple duration specified by the second value in the <a>'keyTimes'</a>
- list) and the <a>'to'</a> value for the remainder of the simple
- duration.</p>
- <p>The following figure illustrates the interpretation of the
- <a>'keySplines'</a> attribute. Each diagram illustrates
- the effect of <a>'keySplines'</a> settings for a single
- interval (i.e. between the associated pairs of values in the
- <a>'keyTimes'</a> and <a>'values'</a> lists.). The
- horizontal axis can be thought of as the input value for the
- <em>unit progress</em> of interpolation within the interval -
- i.e. the pace with which interpolation proceeds along the
- given interval. The vertical axis is the resulting value for
- the <em>unit progress</em>, yielded by the function that
- the <a>'keySplines'</a> attribute defines.
- Another way of describing
- this is that the horizontal axis is the input <em>unit
- time</em> for the interval, and the vertical axis is the
- output <em>unit time</em>. See also the section <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAndRealWorldClockTime">
- Timing and real-world clock times</a>.</p>
- <div class="example">
- <table style="border-collapse:separate; border-spacing: 20px;">
- <caption>
- Examples of <span class="attr-name">keySplines</span>
- </caption>
- <tr>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
- src="images/animate/keySplines01.svg" /> <span
- class="table-heading-1">keySplines="0 0 1 1"
- (the default)</span></td>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of .5 0 .5 1"
- src="images/animate/keySplines02.svg" /> <span
- class="table-heading-1">keySplines=".5 0 .5 1"</span></td>
- </tr>
- <tr>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 0 .75 .25 1"
- src="images/animate/keySplines03.svg" /> <span
- class="table-heading-1">keySplines="0 .75 .25 1"</span></td>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 1 0 .25 .25"
- src="images/animate/keySplines04.svg" /><span
- class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
- </tr>
- </table>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="CalcModeAttribute">calcMode</dfn></td>
+ <td>discrete | linear | paced | spline</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the interpolation mode for the animation. This
+ can take any of the following values. The default mode is
+ <span class='attr-value'>'linear'</span>, however if the attribute does not support
+ linear interpolation (e.g. for strings), the
+ <a>'calcMode'</a> attribute is ignored and discrete
+ interpolation is used.</p>
+ <dl>
+ <dt><span class='attr-value'>discrete</span></dt>
+ <dd>This specifies that the animation function will
+ jump from one value to the next without any
+ interpolation.</dd>
+ <dt><span class='attr-value'>linear</span></dt>
+ <dd>Simple linear interpolation between values is used
+ to calculate the animation function. Except for <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.</dd>
+ <dt><span class='attr-value'>paced</span></dt>
+ <dd>
+ Defines interpolation to produce an even pace of
+ change across the animation. This is only supported for the
+ data types for which there is an appropriate distance function
+ defined, which includes only scalar numeric types plus the
+ types listed in <a href="#complexDistances">Paced animation and complex types</a>.
+ If <span class='attr-value'>'paced'</span> is specified, any
+ <a>'keyTimes'</a> or <a>'keySplines'</a> will
+ be ignored. For <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.
+ Authors are discouraged from using paced animation on types
+ that do not have a distance function defined, due to its
+ unpredictable behavior in some user agents.</dd>
+ <dt><span class='attr-value'>spline</span></dt>
+ <dd>Interpolates from one value in the
+ <a>'values'</a> list to the next according to a
+ time function defined by a cubic Bézier spline.
+ The points of the spline are defined in the
+ <a>'keyTimes'</a> attribute, and the control points
+ for each interval are defined in the
+ <a>'keySplines'</a> attribute.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#CalcModeAttribute">SMIL Animation: 'calcMode' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="ValuesAttribute">values</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>A semicolon-separated list of one or more values.
+ Vector-valued attributes are supported using the vector
+ syntax of the <a>'attributeType'</a> domain. Per the SMIL
+ specification, leading and trailing white space,
+ and white space before and after semicolon separators,
+ is allowed and will be ignored. Except for
+ any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this attribute
+ is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ValuesAttribute">SMIL Animation: 'values' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeyTimesAttribute">keyTimes</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>A semicolon-separated list of time values used to control
+ the pacing of the animation. Each time in the list
+ corresponds to a value in the <a>'values'</a>
+ attribute list, and defines when the value is used in the
+ animation function. Each time value in the
+ <a>'keyTimes'</a> list is specified as a floating
+ point value between 0 and 1 (inclusive), representing a
+ proportional offset into the simple duration of the
+ animation element.</p>
+
+ <p>For animations specified with a <a>'values'</a> list, the
+ <a>'keyTimes'</a> attribute if specified must have exactly as many
+ values as there are in the <a>'values'</a> attribute. For from/to/by
+ animations, the <a>'keyTimes'</a> attribute if specified must have
+ two values.</p>
+
+ <p>Each successive time value must be greater than or equal
+ to the preceding time value.</p>
+
+ <p>The <a>'keyTimes'</a> list semantics depends upon
+ the interpolation mode:</p>
+ <ul>
+ <li>For linear and spline animation, the first
+ time value in the list must be 0, and the last time
+ value in the list must be 1. The key time
+ associated with each value defines when the value is
+ set; values are interpolated between the key times.</li>
+ <li>For discrete animation, the first time value in the
+ list must be 0. The time associated with each value
+ defines when the value is set; the animation function
+ uses that value until the next time defined in
+ <a>'keyTimes'</a>.</li>
+ </ul>
+ <p>If the interpolation mode is <span class='attr-value'>'paced'</span>, the
+ <a>'keyTimes'</a> attribute is ignored.</p>
+
+ <p>If there are any errors in the <a>'keyTimes'</a>
+ specification (bad values, too many or too few values),
+ the document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>If the simple duration is indefinite, any
+ <a>'keyTimes'</a> specification will be
+ ignored.</p>
+
+ <p>
+ Because paced animation interpolation is unspecified for some
+ value types, authors are encouraged to use
+ <span class="attr-value">'linear'</span> animation interpolation with
+ calculated <a>'keyTimes'</a>
+ to achieve particular interpolation behavior for these types.
+ </p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeyTimesAttribute">SMIL Animation: 'keyTimes' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeySplinesAttribute">keySplines</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>A set of Bézier control points associated with
+ the <a>'keyTimes'</a> list, defining a cubic
+ Bézier function that controls interval pacing. The
+ attribute value is a semicolon-separated list of control
+ point descriptions. Each control point description is a set
+ of four values: <code>x1 y1 x2 y2</code>, describing the
+ Bézier control points for one time segment. Note:
+ <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-animation.html#adef-keySplines">SMIL</a>
+ allows these values to be separated either by commas with
+ optional whitespace, or by whitespace alone. The
+ <a>'keyTimes'</a> values that define the associated
+ segment are the Bézier "anchor points", and the
+ <a>'keySplines'</a> values are the control points.
+ Thus, there must be one fewer sets of control points than
+ there are <a>'keyTimes'</a>.</p>
+
+ <p>The values must all be in the range 0 to 1.</p>
+
+ <p>This attribute is ignored unless the <a>'calcMode'</a>
+ is set to <span class='attr-value'>'spline'</span>.</p>
+
+ <p>If there are any errors in the <a>'keySplines'</a>
+ specification (bad values, too many or too few values), the
+ document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeySplinesAttribute">SMIL Animation: 'keySplines' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="FromAttribute">from</dfn>,
+ <dfn id="ToAttribute">to</dfn>,
+ <dfn id="ByAttribute">by</dfn></td>
+ <td><value></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'from'</a> and <a>'to'</a> attributes specify the starting
+ and ending value of the animation, while the <a>'by'</a> attribute
+ specifies a relative offset value for the animation.</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for these
+ attributes is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromAttribute">SMIL Animation: Animation function values</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</p>
+ </dd>
+</dl>
+
+<p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]
+defines the detailed processing
+rules associated with the above attributes. Except for any
+SVG-specific rules explicitly mentioned in this
+specification, the SMIL Animation specification is the normative definition of
+the processing rules for the above attributes.</p>
+
+<p>The animation values specified in the animation element
+must be legal values for the specified attribute. Leading and
+trailing white space, and white space before and after
+semicolon separators, will be ignored.</p>
+
+<p>All values specified must be legal values for the
+specified attribute (as defined in the associated namespace).
+If any values are not legal, the document fragment is in
+error (see <a href="implnote.html#ErrorProcessing">error
+processing</a>).</p>
+
+<p>If a list of values is used, the animation will apply the
+values in order over the course of the animation. If a list
+of <a>'values'</a> is specified, any <a>'from'</a>,
+<a>'to'</a> and <a>'by'</a> attribute values are ignored.</p>
+
+<p>The processing rules for the variants of
+<em>from/by/to</em> animations are described in <a
+href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">
+Animation function values</a> with the following exception.</p>
+
+<p>In order to provide behavior that is intuitive and consistent
+between discrete animations with an explicitly specified
+<a>'from'</a> attribute (e.g. "from-to animation") and those
+where the underlying value is used (e.g. "to animation"), the
+behavior of discrete to-animation in SVG deviates from the
+definition in SMIL Animation.
+As with a discrete from-to animation, a discrete to animation
+will set the underlying value for the first half of the simple
+duration (or, if a <a>'keyTimes'</a> list is provided, until the
+simple duration specified by the second value in the <a>'keyTimes'</a>
+list) and the <a>'to'</a> value for the remainder of the simple
+duration.</p>
+
+<p>The following figure illustrates the interpretation of the
+<a>'keySplines'</a> attribute. Each diagram illustrates
+the effect of <a>'keySplines'</a> settings for a single
+interval (i.e. between the associated pairs of values in the
+<a>'keyTimes'</a> and <a>'values'</a> lists.). The
+horizontal axis can be thought of as the input value for the
+<em>unit progress</em> of interpolation within the interval -
+i.e. the pace with which interpolation proceeds along the
+given interval. The vertical axis is the resulting value for
+the <em>unit progress</em>, yielded by the function that
+the <a>'keySplines'</a> attribute defines.
+ Another way of describing
+this is that the horizontal axis is the input <em>unit
+time</em> for the interval, and the vertical axis is the
+output <em>unit time</em>. See also the section <a
+href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAndRealWorldClockTime">
+Timing and real-world clock times</a>.</p>
+
+<div class="example">
+<table style="border-collapse:separate; border-spacing: 20px;">
+ <caption>
+ Examples of <span class="attr-name">keySplines</span>
+ </caption>
+ <tr>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
+ src="images/animate/keySplines01.svg" /> <span
+ class="table-heading-1">keySplines="0 0 1 1"
+ (the default)</span></td>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of .5 0 .5 1"
+ src="images/animate/keySplines02.svg" /> <span
+ class="table-heading-1">keySplines=".5 0 .5 1"</span></td>
+ </tr>
+ <tr>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 0 .75 .25 1"
+ src="images/animate/keySplines03.svg" /> <span
+ class="table-heading-1">keySplines="0 .75 .25 1"</span></td>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 1 0 .25 .25"
+ src="images/animate/keySplines04.svg" /><span
+ class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
+ </tr>
+</table>
- <p>To illustrate the calculations, consider the simple
- example:</p>
+<p>To illustrate the calculations, consider the simple example:</p>
+
<pre>
<animate dur="4s" values="10; 20" keyTimes="0; 1"
calcMode="spline" <strong>keySplines</strong>=<em>{as in table}</em> />
</pre>
- <p>Using the <a>'keySplines'</a> values for each of the four cases
- above, the approximate interpolated values as the animation
- proceeds are:</p>
- <table class="data">
- <caption>keySplines values</caption>
- <thead>
- <tr>
- <th>Value of <span class='attr-name'>'keySplines'</span></th>
- <th>Initial value</th>
- <th>After 1s</th>
- <th>After 2s</th>
- <th>After 3s</th>
- <th>Final value</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>0 0 1 1</th>
- <td>10.0</td>
- <td>12.5</td>
- <td>15.0</td>
- <td>17.5</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>.5 0 .5 1</th>
- <td>10.0</td>
- <td>11.0</td>
- <td>15.0</td>
- <td>19.0</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>0 .75 .25 1</th>
- <td>10.0</td>
- <td>18.0</td>
- <td>19.3</td>
- <td>19.8</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>1 0 .25 .25</th>
- <td>10.0</td>
- <td>10.1</td>
- <td>10.6</td>
- <td>16.9</td>
- <td>20.0</td>
- </tr>
- </tbody>
- </table>
- </div>
- <p>For a formal definition of Bézier spline
- calculation, see [<a
- href="refs.html#ref-FOLEY-VANDAM">FOLEY-VANDAM</a>], pp. 488-491.</p>
- </div>
+
+<p>Using the <a>'keySplines'</a> values for each of the four cases
+above, the approximate interpolated values as the animation
+proceeds are:</p>
+
+<table class="data">
+ <caption>keySplines values</caption>
+ <thead>
+ <tr>
+ <th>Value of <span class='attr-name'>'keySplines'</span></th>
+ <th>Initial value</th>
+ <th>After 1s</th>
+ <th>After 2s</th>
+ <th>After 3s</th>
+ <th>Final value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>0 0 1 1</th>
+ <td>10.0</td>
+ <td>12.5</td>
+ <td>15.0</td>
+ <td>17.5</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>.5 0 .5 1</th>
+ <td>10.0</td>
+ <td>11.0</td>
+ <td>15.0</td>
+ <td>19.0</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>0 .75 .25 1</th>
+ <td>10.0</td>
+ <td>18.0</td>
+ <td>19.3</td>
+ <td>19.8</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>1 0 .25 .25</th>
+ <td>10.0</td>
+ <td>10.1</td>
+ <td>10.6</td>
+ <td>16.9</td>
+ <td>20.0</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<p>For a formal definition of Bézier spline
+calculation, see [<a
+href="refs.html#ref-FOLEY-VANDAM">FOLEY-VANDAM</a>], pp. 488-491.</p>
<h3 id="AdditionAttributes">Attributes that control whether animations are additive</h3>
<p>It is frequently useful to define animation as an offset or
delta to an attribute's value, rather than as absolute values.</p>
<div class="example">
<p>A simple "grow" animation can increase the width of an object
@@ -1418,83 +1611,108 @@ SMIL Animation: Additive animation</a>.
cumulative animations, see <a
href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Accumulate">
SMIL Animation: Controlling behavior of repeating animation -
Cumulative animation</a>.</p>
<p>The following attributes are the <dfn id='animation-addition-attributes'>animation addition attributes</dfn>,
which are common to elements <edit:elementswithattributecategory name='animation addition'/>.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AdditiveAttribute"><span class='adef'>additive</span> =
- <span class='attr-value'>"replace | sum"</span></dt>
- <dd>
- <p>Controls whether or not the animation is
- additive.</p>
-
- <dl>
- <dt><span class='attr-value'>sum</span></dt>
- <dd>Specifies that the animation will add to the
- underlying value of the attribute and other lower
- priority animations.</dd>
- <dt><span class='attr-value'>replace</span></dt>
- <dd>Specifies that the animation will override the
- underlying value of the attribute and other lower
- priority animations. This is the default, however the
- behavior is also affected by the animation value
- attributes <a>'by'</a> and <a>'to'</a>, as described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">
- SMIL Animation: How from, to and by attributes affect
- additive behavior</a>.</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute">SMIL Animation: 'additive' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).</p>
- </dd>
- <dt id="AccumulateAttribute"><span class='adef'>accumulate</span> =
- <span class='attr-value'>"none | sum"</span></dt>
- <dd>
- <p>Controls whether or not the animation is
- cumulative.</p>
-
- <dl>
- <dt><span class='attr-value'>sum</span></dt>
- <dd>Specifies that each repeat iteration after the
- first builds upon the last value of the previous
- iteration.</dd>
- <dt><span class='attr-value'>none</span></dt>
- <dd>Specifies that repeat iterations are not
- cumulative. This is the default.</dd>
- </dl>
-
- <p>This attribute is ignored if the target attribute value
- does not support addition, or if the animation element
- does not repeat.</p>
-
- <p>Cumulative animation is not defined for "<em>to
- animation</em>".</p>
-
- <p>This attribute will be ignored if the animation function
- is specified with only the <a>'to'</a>
- attribute.</p>
-
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation: 'accumulate' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AdditiveAttribute">additive</dfn></td>
+ <td>replace | sum</td>
+ <td>replace</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Controls whether or not the animation is additive.</p>
+ <dl>
+ <dt><span class='attr-value'>replace</span></dt>
+ <dd>Specifies that the animation will override the
+ underlying value of the attribute and other lower
+ priority animations. This is the default, however the
+ behavior is also affected by the animation value
+ attributes <a>'by'</a> and <a>'to'</a>, as described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">
+ SMIL Animation: How from, to and by attributes affect
+ additive behavior</a>.</dd>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that the animation will add to the
+ underlying value of the attribute and other lower
+ priority animations.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute">SMIL Animation: 'additive' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AccumulateAttribute">accumulate</dfn></td>
+ <td>none | sum</td>
+ <td>none</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Controls whether or not the animation is
+ cumulative.</p>
+
+ <dl>
+ <dt><span class='attr-value'>none</span></dt>
+ <dd>Specifies that repeat iterations are not
+ cumulative. This is the default.</dd>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that each repeat iteration after the
+ first builds upon the last value of the previous
+ iteration.</dd>
+ </dl>
+
+ <p>This attribute is ignored if the target attribute value
+ does not support addition, or if the animation element
+ does not repeat.</p>
+
+ <p>Cumulative animation is not defined for "<em>to
+ animation</em>".</p>
+
+ <p>This attribute will be ignored if the animation function
+ is specified with only the <a>'to'</a>
+ attribute.</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation: 'accumulate' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+</dl>
</edit:with>
<h3 id="Inheritance">Inheritance</h3>
<p>SVG allows both attributes and properties to be animated. If
a given attribute or property is inheritable by descendants,
then animations on a parent element such as a <a>'g'</a> element has the effect of
@@ -1553,33 +1771,47 @@ are not allowed, and will be ignored if
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#setElement">SMIL Animation: 'set' element</a>
([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.2).</p>
<edit:elementsummary name='set'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="SetElementToAttribute"><span
- class="adef">to</span> = "<span
- class="attr-value"><value></span>"</dt>
- <dd>Specifies the value for the attribute during the
- duration of the <a>'set'</a>
- element. The argument value must match the attribute
- type.</dd>
- </dl>
- </div>
- <p>For a list of attributes and properties that can be animated
- using the <a>'set'</a> element, see
- <a
- href="animate.html#AnimationAttributesAndProperties">Elements,
- attributes and properties that can be animated</a>.</p>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="SetElementToAttribute">to</dfn></td>
+ <td><value></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <dd>Specifies the value for the attribute during the
+ duration of the <a>'set'</a>
+ element. The argument value must match the attribute
+ type.</dd>
+ </dd>
+</dl>
+
+<p>For a list of attributes and properties that can be animated
+using the <a>'set'</a> element, see
+<a href="animate.html#AnimationAttributesAndProperties">Elements,
+attributes and properties that can be animated</a>.</p>
</edit:with>
<h3 id="AnimateMotionElement">The <span class="element-name">'animateMotion'</span> element</h3>
<edit:with element='animateMotion'>
<p>The <a>'animateMotion'</a> element causes a referenced element to
@@ -1588,115 +1820,198 @@ move along a motion path.</p>
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateMotionElement">SMIL Animation: 'animateMotion' element</a>
([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).</p>
<edit:elementsummary name='animateMotion'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AnimateMotionElementCalcModeAttribute"><span class='adef'>calcMode</span> =
- <span class='attr-value'>"discrete | linear | paced | spline"</span></dt>
- <dd>Specifies the interpolation mode for the animation.
- Refer to general description of the <a>'animate/calcMode'</a> attribute above. The
- only difference is that the default value for the <a>'calcMode'</a>
- for <a>'animateMotion'</a> is <span class="attr-value">'paced'</span>. See <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionCalcModeAttribute">
- SMIL Animation: 'calcMode' attribute for
- 'animateMotion'</a>.</dd>
- <dt id="PathAttribute"><span class="adef">path</span> = "<span
- class="attr-value"><path-data></span>"</dt>
- <dd>The motion path, expressed in the same format and
- interpreted the same way as the <a>'path/d'</a> attribute on the
- <a>'path element'</a> element. The effect
- of a motion path animation is to add a supplemental
- transformation matrix onto the CTM for the referenced
- object which causes a translation along the x- and y-axes
- of the current user coordinate system by the computed X and
- Y values computed over time.</dd>
- <dt id="KeyPointsAttribute"><span class="adef">keyPoints</span> = "<span
- class="attr-value"><list-of-numbers></span>"</dt>
- <dd><p><a>'keyPoints'</a> takes a
- semicolon-separated list of floating point values between 0
- and 1 and indicates how far along the motion path the
- object shall move at the moment in time specified by
- corresponding <a>'keyTimes'</a>
- value. Distance calculations use the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm. Each progress value in the list
- corresponds to a value in the <a>'keyTimes'</a>
- attribute list.</p>
- <p>If a list of <a>'keyPoints'</a> is specified, there
- must be exactly as many values in the
- <a>'keyPoints'</a> list as in the <a>'keyTimes'</a>
- list.</p>
- <p>If there are any errors in the <a>'keyPoints'</a>
- specification (bad values, too many or too few values),
- then the document is in error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).</p></dd>
- <dt id="RotateAttribute"><span class="adef">rotate</span> = "<span
- class="attr-value"><a><number></a> | auto |
- auto-reverse</span>"</dt>
- <dd>
- <p>The <a>'rotate'</a> attribute post-multiplies a supplemental
- transformation matrix onto the CTM of the target element to apply a
- rotation transformation about the origin of the current user
- coordinate system. The rotation transformation is applied after the
- supplemental translation transformation that is computed due to the
- <a>'path attribute'</a> attribute.</p>
-
- <dl>
- <dt><span class="attr-value">auto</span></dt>
- <dd>Indicates that the object is rotated over time by the angle of
- the direction (i.e., directional tangent vector) of the motion path.</dd>
-
- <dt><span class="attr-value">auto-reverse</span></dt>
- <dd>Indicates that the object is rotated over time by the angle of the
- direction (i.e., directional tangent vector) of the motion path plus
- 180 degrees.</dd>
-
- <dt><span class='attr-value'><a><number></a></span></dt>
- <dd>Indicates that the target element has a constant rotation
- transformation applied to it, where the rotation angle is the
- specified number of degrees.</dd>
- </dl>
-
- <p>The default value is <span class='attr-value'>'0'</span>.</p>
- </dd>
- <dt id="OriginAttribute"><span class="adef">origin</span> = "<span
- class="attr-value">default</span>"</dt>
- <dd>The <a>'origin'</a> attribute is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionOriginAttribute">defined in the SMIL Animation
- specification</a> ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).
- It has no effect in SVG.</dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateMotionElementCalcModeAttribute">calcMode</dfn></td>
+ <td>discrete | linear | paced | spline</td>
+ <td>paced</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the interpolation mode for the animation.
+ Refer to general description of the <a>'animate/calcMode'</a> attribute above. The
+ only difference is that the default value for the <a>'calcMode'</a>
+ for <a>'animateMotion'</a> is <span class="attr-value">'paced'</span>. See <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionCalcModeAttribute">
+ SMIL Animation: 'calcMode' attribute for
+ 'animateMotion'</a>.</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateMotionElementPathAttribute">path</dfn></td>
+ <td><path-data></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The motion path, expressed in the same format and
+ interpreted the same way as the <a>'path/d'</a> attribute on the
+ <a>'path element'</a> element. The effect
+ of a motion path animation is to add a supplemental
+ transformation matrix onto the CTM for the referenced
+ object which causes a translation along the x- and y-axes
+ of the current user coordinate system by the computed X and
+ Y values computed over time.</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeyPointsAttribute">keyPoints</dfn></td>
+ <td><list-of-numbers></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p><a>'keyPoints'</a> takes a
+ semicolon-separated list of floating point values between 0
+ and 1 and indicates how far along the motion path the
+ object shall move at the moment in time specified by
+ corresponding <a>'keyTimes'</a>
+ value. Distance calculations use the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. Each progress value in the list
+ corresponds to a value in the <a>'keyTimes'</a>
+ attribute list.</p>
+ <p>If a list of <a>'keyPoints'</a> is specified, there
+ must be exactly as many values in the
+ <a>'keyPoints'</a> list as in the <a>'keyTimes'</a>
+ list.</p>
+ <p>If there are any errors in the <a>'keyPoints'</a>
+ specification (bad values, too many or too few values),
+ then the document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RotateAttribute">rotate</dfn></td>
+ <td><a><number></a> | auto | auto-reverse</td>
+ <td>0</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'rotate'</a> attribute post-multiplies a supplemental
+ transformation matrix onto the CTM of the target element to apply a
+ rotation transformation about the origin of the current user
+ coordinate system. The rotation transformation is applied after the
+ supplemental translation transformation that is computed due to the
+ <a>'path attribute'</a> attribute.</p>
+
+ <dl>
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>Indicates that the object is rotated over time by the angle of
+ the direction (i.e., directional tangent vector) of the motion path.</dd>
+
+ <dt><span class="attr-value">auto-reverse</span></dt>
+ <dd>Indicates that the object is rotated over time by the angle of the
+ direction (i.e., directional tangent vector) of the motion path plus
+ 180 degrees.</dd>
+
+ <dt><span class='attr-value'><a><number></a></span></dt>
+ <dd>Indicates that the target element has a constant rotation
+ transformation applied to it, where the rotation angle is the
+ specified number of degrees.</dd>
+ </dl>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="OriginAttribute">origin</dfn></td>
+ <td>default</td>
+ <td>default</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'origin'</a> attribute is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionOriginAttribute">defined in the SMIL Animation
+ specification</a> ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).
+ It has no effect in SVG.</p>
+ </dd>
+</dl>
<div id='MPathElement'>
<edit:elementsummary name='mpath'/>
</div>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="MPathElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a>IRI
- reference</a> to the <a>'path element'</a> element which
- defines the motion path.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="MPathElementHrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>An <a>IRI reference</a> to the <a>'path element'</a> element which
+ defines the motion path.</p>
+ </dd>
+</dl>
<p>For <a>'animateMotion'</a>, the specified values for <a>'from'</a>,
<a>'by'</a>, <a>'to'</a> and <a>'values'</a> consists of x, y coordinate
pairs, with a single comma and/or white space separating the x coordinate
from the y coordinate. For example, <span class="attr-value">from="33,15"</span>
specifies an x coordinate value of <span class="attr-value">33</span> and
a y coordinate value of <span class="attr-value">15</span>.</p>
@@ -1939,27 +2254,40 @@ a future version of the SVG specificatio
<p>The <a>'animateTransform'</a> element animates a transformation attribute
on a target element, thereby allowing animations to control translation,
scaling, rotation and/or skewing.</p>
<p class="issue">This section should talk about the <a>'transform'</a> property.</p>
<edit:elementsummary name='animateTransform'/>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AnimateTransformElementTypeAttribute"><span class="adef">type</span> =
- "<span class="attr-value">translate | scale | rotate | skewX | skewY</span>"</dt>
- <dd>Indicates the type of transformation which is to have its values
- change over time.
- If the attribute is not specified, then the effect is as if a value of <span class="attr-value">'translate'</span> were specified.
- </dd>
- </dl>
-</div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateTransformElementTypeAttribute">type</dfn></td>
+ <td>translate | scale | rotate | skewX | skewY</td>
+ <td>translate</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Indicates the type of transformation which is to have its values
+ change over time.</p>
+ </dd>
+</dl>
<p>The <a>'from'</a>, <a>'by'</a> and <a>'to'</a> attributes take a value
expressed using the same syntax that is available for the given transformation
type:</p>
<ul>
<li>For a <span class="attr-value">type="translate"</span>, each individual
value is expressed as <span class="attr-value"><tx> [,<ty>]</span>.</li>
diff --git a/master/changes.html b/master/changes.html
--- a/master/changes.html
+++ b/master/changes.html
@@ -178,16 +178,18 @@ have been made.</p>
<ul>
<li>Added requirements for images to be color managed.</li>
<li>Added new color syntaxes from the SVG Color specification: RGBA colors, HSL colors,
LAB colors, ICC named colors and device colors.</li>
<li>Removed the <span class="property">'color-profile'</span> property.</li>
+
+ <li class="added-since-last-wd">Removed the <span class="element-name">'color-profile'</span> element.</li>
</ul>
<h3 id="pservers">Paint Servers chapter</h3>
<ul>
<li>Added the <a>'solidColor'</a> element and its two properties <a>'solid-color'</a>
and <a>'solid-opacity'</a>, ported over from SVG Tiny 1.2.</li>
@@ -216,16 +218,19 @@ have been made.</p>
<li>Removed the body of this chapter and replaced it with a link to the
Filter Effect specification.</li>
</ul>
<h3 id="interact">Interactivity chapter</h3>
<ul>
<li>Added the <span class="attr-name">'tabindex'</span> attribute.</li>
+ <li>Corrected the definition of the <a>'cursor/xlink:href'</a> attribute on
+ the <a>'cursor element'</a> element to take an IRI that is not in a CSS-like
+ functional form.</li>
</ul>
<h3 id="linking">Linking chapter</h3>
<ul>
<li>Removed the restriction on <a>'tref'</a> only being able to reference SVG elements.</li>
<li>Added <a>animation elements</a> to the content model of <a>'view'</a>.</li>
</ul>
diff --git a/master/color.html b/master/color.html
--- a/master/color.html
+++ b/master/color.html
@@ -197,23 +197,16 @@ ICC-based color specification is provide
@color-profile {
name: acmecmyk;
src: url(http://printers.example.com/acmecorp/model1234);
}
</style>
<circle fill="#CD853F icc-color(acmecmyk, 0.11, 0.48, 0.83, 0.00)"/></pre>
</div>
- <p>Example:</p>
- <div class="example">
- <pre>
-<color-profile name="acmecmyk" href="http://printers.example.com/acmecorp/model1234"/>
-<circle fill="#CD853F icc-color(acmecmyk, 0.11, 0.48, 0.83, 0.00)"/></pre>
- </div>
-
<p class="note">Same syntax as SVG 1.1, increased conformance requirement.</p>
<p>SVG 2 uses the extended ICC color specification from SVG 1.1. In SVG 1.1, parsing the syntax was required but implementing the ICC colour itself was optional, as indicated by phrases such as "If ICC-based colors are provided and the SVG user agent supports ICC color, then...". An SVG 1.1 user agent which also conforms to this specification "supports ICC color" for the purposes of conforming to SVG 1.1.</p>
<p>
As with SVG Full 1.1, SVG 2 content may specify color using an ICC profile (see
[<a href="refs.html#ref-ICC42">ICC42</a>]); an sRGB fallback must still be provided.
</p>
@@ -287,17 +280,22 @@ ICC-based color specification is provide
<p class="prop-value"><a href="#fallback"><fallback></a>
<a href="#iccnamedcolor">icc-named-color(<name>, <namedColor>)</a></p>
<p>Example:</p>
<div class="example">
<pre >
-<color-profile name="FooColors" href="http://swatches.example.com/Foo"/>
+<style>
+@color-profile {
+ name: FooColors;
+ src: url(http://swatches.example.com/Foo);
+}
+</style>
<circle fill="#CD853F icc-color(FooColors, Sandy23C)"/></pre>
</div>
<p>
SVG 2 introduces the ability to specify a color using a 'Named Color Profile'.
</p>
<p>An SVG 2 User Agent searches the color profile description database for
a <a href="#ColorProfileDescriptions">color profile description</a> entry whose
@@ -431,201 +429,16 @@ svg { border: 1px solid #888; background
<p>
A <span class="SVG-Term">color profile description</span> provides the bridge between
an ICC profile and references to that ICC profile within SVG content. The color
profile description is added to the user agent's list of known color profiles and
then used to select the relevant profile. The color profile description contains
descriptors for the location of the color profile on the Web, a name to reference
the profile and information about rendering intent.</p>
-<h3 id="ColorProfileAlternatives">Alternative ways of defining a color profile description</h3>
-
-<p>Color profile descriptions can be specified in either of the following ways:</p>
-
-<ul>
- <li>a <a>'color-profile element'</a> element</li>
-
- <li>an <em>@color-profile</em> rule within a CSS style sheet </li>
-</ul>
-
-
-<p>If a color profile with the same <em>name</em> value has
-been identified by both a <a>'color-profile element'</a> element and
-<em>@color-profile</em> rules within a CSS style sheet, then
-the user agent shall first attempt to locate the profile by
-using the specifications in the <em>@color-profile</em> rules
-first.</p>
-
-<h3 id="ColorProfileElement">The <span class="element-name">'color-profile'</span> element</h3>
-
-<p class="issue">The <a>'color-profile element'</a> element is going to be removed, as it is
-redundant with the <strong>@color-profile</strong> rule.</p>
-
-<edit:with element='color-profile'>
-
-<edit:elementsummary name='color-profile'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="ColorProfileElementHrefAttribute"><span class="adef">href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>The location of an ICC profile resource.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
-
- <dt id="ColorProfileElementLocalAttribute"><span class="adef">local</span> = sRGB | "<span
- class="attr-value"><string></span>"</dt>
- <dd>The unique ID for a locally stored color profile.
- <string> is the profile's unique ID as specified by
- <a href="http://www.color.org/">International Color
- Consortium</a>.
- <div class="requirement" id="assert_sRGBCaseInsensitive">
- When used in a style sheet,
- for consistency with <a href="http://www.w3.org/TR/CSS2/grammar.html">CSS lexical
- scanning and parsing rules</a>, the keyword "sRGB" MUST be case-insensitive. However,
- it is recommended that the mixed capitalization "sRGB" SHOULD be used for consistency
- with common industry practice.</div>
- <div class="requirement" id="assert_localColorProfilesFirst">
- If both the <a href="#ColorProfileElementHrefAttribute"><span class="attr-name">href</span></a>
- and the <span class="attr-name">local</span> attributes are specified, then the
- user agent MUST search the local system for the locally stored color profile first,
- and, if not available locally, then attempt to use the resource identified by the
- <a href="#ColorProfileElementHrefAttribute"><span class="attr-name">href</span></a>
- attribute.</div>
- (Note: Profile description fields do <em>not</em> represent a profile's unique ID.
- With current ICC proposals, the profile's unique ID is an MD5-encoded value within
- the profile header.).<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="ColorProfileElementNameAttribute"><span class="adef">name</span> = "<span
- class="attr-value"><identifier></span>"</dt>
- <dd>The name which is used as the first parameter for <span
- class="prop-value">icc-color</span> specifications within
- <a>'fill'</a>, <a>'stroke'</a>, <a>'stop-color'</a>,
- <a>'flood-color'</a> and <a>'lighting-color'</a> property
- values to identify the color profile to use for the ICC
- color specification and the name which can be the value of
- the <a>'color-profile element'</a> property. Note
- that if 'name' is not provided, it will be impossible
- to reference the given color profile description.
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="ColorProfileElementRenderingIntentAttribute"><span class="adef">rendering-intent</span> = "<span
- class="attr-value">auto | perceptual |
- relative-colorimetric | saturation |
- absolute-colorimetric</span>"</dt>
- <dd>
- <p><a>'rendering-intent'</a>
- permits the specification of a color profile rendering
- intent other than the default. <a>'rendering-intent'</a> is applicable
- primarily to color profiles corresponding to CMYK color
- spaces. The different options cause different methods to
- be used for translating colors to the color gamut of the
- target rendering device:</p>
- <dl>
- <dt><span class='prop-value'>auto</span></dt>
- <dd>This is the default behavior. The user agent
- determines the best intent based on the content type.
- <div class="requirement" id="assert_renderingIntentAuto">
- For image content containing an embedded profile, the User Agent MUST use the intent
- specified within the profile. Otherwise, the user agent MUST use the current profile
- and force the intent, overriding any intent that might be stored in the profile
- itself.
- </div></dd>
- <dt><span class='prop-value'>perceptual</span></dt>
- <dd> <p>This method is often the preferred choice for images, especially when
- there are substantial differences between the source and destination
- (such as a CRT display image reproduced on a reflection print). It takes
- the colors of the source image and re-optimizes the appearance for the
- destination medium using proprietary methods. This re-optimization may
- result in colors within both the source and destination gamuts being
- changed, although perceptual transforms are supposed to maintain the
- basic artistic intent of the original in the reproduction. They will not
- attempt to correct errors in the source image.
- </p>
- <p class="note">With v2 ICC profiles there is no specified perceptual reference
- medium, which can cause interoperability problems. When v2 ICC profiles
- are used it may be safer to use the media-relative colorimetric
- rendering intent with black point compensation, instead of the perceptual
- rendering intent, unless the specific source and destination profiles to
- be used have been checked to ensure the combination produces the desired
- result.
- </p>
- <div class="requirement" id="assert_renderingIntentPerceptual">
- This method SHOULD maintain relative color values among the pixels as they are mapped
- to the target device gamut. This method MAY change pixel values that were originally
- within the target device gamut, in order to avoid hue shifts and discontinuities
- and to preserve as much as possible the overall appearance of the scene.
- </div>
- </dd>
- <dt><span class='prop-value'>saturation</span></dt>
- <dd> <p>This option was created to preserve the relative saturation (chroma) of
- the original, and to keep solid colors pure. However, it experienced
- interoperability problems like the perceptual intent, and as solid color
- preservation is not amenable to a reference medium solution using v4
- profiles does not solve the problem. Use of this rendering intent is <em>not
- recommended</em> unless the specific source and destination profiles to be
- used have been checked to ensure the combination produces the desired
- result.
- </p>
- <div class="requirement" id="assert_renderingIntentSaturation">
- This option SHOULD preserve the relative saturation (chroma) values of the original
- pixels. Out of gamut colors SHOULD be converted to colors that have the same saturation
- but fall just inside the gamut.
- </div></dd>
- <dt><span class='prop-value'>relative-colorimetric</span></dt>
- <dd> <p>Media-relative colorimetric
- is required to leave source colors that fall inside the destination
- medium gamut unchanged relative to the respective media white points.
- Source colors that are out of the destination medium gamut are mapped to
- colors on the gamut boundary using a variety of different methods.</p>
-
- <p class="note">Note: the media-relative colorimetric rendering intent is often used with
- black point compensation, where the source medium black point is mapped
- to the destination medium black point as well.</p>
-
- <div class="requirement" id="assert_renderingIntentRelativeColorimetric">
- This method MUST map the source white point to the desination white point.
- If black point compensation is in use, the source black point MUST also be mapped to the destination black point.
- Adaptation algorithms SHOULD be used to adjust for the change in white point. Relative relationships of colors inside
- both source and destination gamuts SHOULD be preserved.
- Relative relationships of colors outside the destination gamut MAY be changed.
- </div></dd>
- <dt><span class='prop-value'>absolute-colorimetric</span></dt>
- <dd><p>ICC-absolute colorimetric is
- required to leave source colors that fall inside the destination medium
- gamut unchanged relative to the adopted white (a perfect reflecting
- diffuser). Source colors that are out of the destination medium gamut
- are mapped to colors on the gamut boundary using a variety of different
- methods. This method produces the most accurate color matching of
- in-gamut colors, but will result in highlight clipping if the
- destination medium white point is lower than the source medium white
- point. For this reason it is recommended for use <em>only</em> in applications
- that need exact color matching and where highlight clipping is not a
- concern.
- </p>
- <div class="requirement" id="assert_renderingIntentAbsoluteColorimetric">
- This method MUST disable white point matching and black point matching when converting colors.
- </div>
- In general, this option is not recommended.</dd>
- </dl>
- <br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: no.</span>
- </dd>
- </dl>
- </div>
- <p class="issue">Fallback behaviour needs to be specified, for when the requested rendering intent does not have a corresponding table in the profile; or when all rendering-intents are provided using the same table.</p>
-</edit:with>
-
<h3 id="ColorProfileAtRule">The CSS <strong>@color-profile</strong> rule</h3>
<p>When the document is styled using CSS, the CSS
<strong>@color-profile</strong> rule can be used to specify a color
profile description. The general form is:</p>
<pre>
@color-profile { <color-profile-description> }
@@ -736,18 +549,22 @@ child elements.</p>
</tr>
</table>
</dd>
</dl>
</div>
<dl>
<dt><span class='prop-value'><a><identifier></a></span></dt>
- <dd>See the description for the <a>'color-profile/name'</a> attribute on the
- <a>'color-profile element'</a> element. Note that if 'name' is not
+ <dd>The name which is used as the first parameter for <span
+ class="prop-value">icc-color</span> specifications within
+ <a>'fill'</a>, <a>'stroke'</a>, <a>'stop-color'</a>,
+ <a>'flood-color'</a> and <a>'lighting-color'</a> property
+ values to identify the color profile to use for the ICC
+ color specification. Note that if 'name' is not
provided, it will be impossible to reference the given @color-profile
definition.</dd>
</dl>
<div class="propdef">
<dl>
<dt id="RenderingIntentProperty"><span class="descdef-title property">'rendering-intent'</span></dt>
<dd>
@@ -771,20 +588,117 @@ child elements.</p>
href="animate.html#Animatable">Animatable</a>:</em> </td>
<td>no</td>
</tr>
</table>
</dd>
</dl>
</div>
-<p>See the description for the <a>'color-profile/rendering-intent'</a> attribute on the
-<a>'color-profile element'</a> element.</p>
-
-
+<p>The ‘rendering-intent’ descriptor
+permits the specification of a color profile rendering
+intent other than the default. ‘rendering-intent’ is applicable
+primarily to color profiles corresponding to CMYK color
+spaces. The different options cause different methods to
+be used for translating colors to the color gamut of the
+target rendering device:</p>
+<dl>
+ <dt><span class='prop-value'>auto</span></dt>
+ <dd>This is the default behavior. The user agent
+ determines the best intent based on the content type.
+ <div class="requirement" id="assert_renderingIntentAuto">
+ For image content containing an embedded profile, the User Agent MUST use the intent
+ specified within the profile. Otherwise, the user agent MUST use the current profile
+ and force the intent, overriding any intent that might be stored in the profile
+ itself.
+ </div></dd>
+ <dt><span class='prop-value'>perceptual</span></dt>
+ <dd> <p>This method is often the preferred choice for images, especially when
+ there are substantial differences between the source and destination
+ (such as a CRT display image reproduced on a reflection print). It takes
+ the colors of the source image and re-optimizes the appearance for the
+ destination medium using proprietary methods. This re-optimization may
+ result in colors within both the source and destination gamuts being
+ changed, although perceptual transforms are supposed to maintain the
+ basic artistic intent of the original in the reproduction. They will not
+ attempt to correct errors in the source image.
+ </p>
+ <p class="note">With v2 ICC profiles there is no specified perceptual reference
+ medium, which can cause interoperability problems. When v2 ICC profiles
+ are used it may be safer to use the media-relative colorimetric
+ rendering intent with black point compensation, instead of the perceptual
+ rendering intent, unless the specific source and destination profiles to
+ be used have been checked to ensure the combination produces the desired
+ result.
+ </p>
+ <div class="requirement" id="assert_renderingIntentPerceptual">
+ This method SHOULD maintain relative color values among the pixels as they are mapped
+ to the target device gamut. This method MAY change pixel values that were originally
+ within the target device gamut, in order to avoid hue shifts and discontinuities
+ and to preserve as much as possible the overall appearance of the scene.
+ </div>
+ </dd>
+ <dt><span class='prop-value'>saturation</span></dt>
+ <dd> <p>This option was created to preserve the relative saturation (chroma) of
+ the original, and to keep solid colors pure. However, it experienced
+ interoperability problems like the perceptual intent, and as solid color
+ preservation is not amenable to a reference medium solution using v4
+ profiles does not solve the problem. Use of this rendering intent is <em>not
+ recommended</em> unless the specific source and destination profiles to be
+ used have been checked to ensure the combination produces the desired
+ result.
+ </p>
+ <div class="requirement" id="assert_renderingIntentSaturation">
+ This option SHOULD preserve the relative saturation (chroma) values of the original
+ pixels. Out of gamut colors SHOULD be converted to colors that have the same saturation
+ but fall just inside the gamut.
+ </div></dd>
+ <dt><span class='prop-value'>relative-colorimetric</span></dt>
+ <dd> <p>Media-relative colorimetric
+ is required to leave source colors that fall inside the destination
+ medium gamut unchanged relative to the respective media white points.
+ Source colors that are out of the destination medium gamut are mapped to
+ colors on the gamut boundary using a variety of different methods.</p>
+
+ <p class="note">Note: the media-relative colorimetric rendering intent is often used with
+ black point compensation, where the source medium black point is mapped
+ to the destination medium black point as well.</p>
+
+ <div class="requirement" id="assert_renderingIntentRelativeColorimetric">
+ This method MUST map the source white point to the desination white point.
+ If black point compensation is in use, the source black point MUST also be mapped to the destination black point.
+ Adaptation algorithms SHOULD be used to adjust for the change in white point. Relative relationships of colors inside
+ both source and destination gamuts SHOULD be preserved.
+ Relative relationships of colors outside the destination gamut MAY be changed.
+ </div></dd>
+ <dt><span class='prop-value'>absolute-colorimetric</span></dt>
+ <dd><p>ICC-absolute colorimetric is
+ required to leave source colors that fall inside the destination medium
+ gamut unchanged relative to the adopted white (a perfect reflecting
+ diffuser). Source colors that are out of the destination medium gamut
+ are mapped to colors on the gamut boundary using a variety of different
+ methods. This method produces the most accurate color matching of
+ in-gamut colors, but will result in highlight clipping if the
+ destination medium white point is lower than the source medium white
+ point. For this reason it is recommended for use <em>only</em> in applications
+ that need exact color matching and where highlight clipping is not a
+ concern.
+ </p>
+ <div class="requirement" id="assert_renderingIntentAbsoluteColorimetric">
+ This method MUST disable white point matching and black point matching when converting colors.
+ </div>
+ In general, this option is not recommended.
+ </dd>
+</dl>
+
+<p class="issue">Fallback behaviour needs to be specified, for when the
+requested rendering intent does not have a corresponding table in the profile;
+or when all rendering-intents are provided using the same table.</p>
+
+
<div class="ready-for-wider-review">
<h2 id="syntax">Color syntax</h2>
<p>The EBNF grammar syntax is as described in <a href="types.html#syntax">Syntax</a>.</p>
<pre>
<span id="icccolor">icccolor</span> ::=
~"icc-color(" <a href="#name">name</a> (<a href="#comma-wsp">comma-wsp</a> <a href="#number">number</a>)+ ")"
@@ -934,83 +848,23 @@ child elements.</p>
</pre>
</div>
<h2 id="DOMInterfaces">DOM interfaces</h2>
-<h3 id="InterfaceSVGColorProfileElement">Interface SVGColorProfileElement</h3>
-
-
-<edit:with element='color-profile'>
-
-The <a>SVGColorProfileElement</a> interface corresponds to the
-<a>'color-profile element'</a> element.
-<pre class="idl">interface <b>SVGColorProfileElement</b> : <a class="idlinterface" href="types.html#InterfaceSVGElement">SVGElement</a> {
- attribute DOMString <a href="color.html#__svg__SVGColorProfileElement__local">local</a>;
- attribute DOMString <a href="color.html#__svg__SVGColorProfileElement__name">name</a>;
- attribute unsigned short <a href="color.html#__svg__SVGColorProfileElement__renderingIntent">renderingIntent</a>;
-};
-
-<a>SVGColorProfileElement</a> implements <a>SVGRenderingIntent</a>;
-<a>SVGColorProfileElement</a> implements <a>SVGURIReference</a>;</pre>
-
-<dl class="interface">
-<dt class="attributes-header">Attributes:</dt>
-<dd>
-<dl class="attributes">
-
-<dt id="__svg__SVGColorProfileElement__local" class="attribute first-child"><b>local</b><span class="idl-type-parenthetical"> (DOMString)</span></dt>
-<dd class="attribute">
-<div>
-Corresponds to attribute <a>'local'</a> on the given element.
-
-
-</div>
-</dd>
-
-<dt id="__svg__SVGColorProfileElement__name" class="attribute"><b>name</b><span class="idl-type-parenthetical"> (DOMString)</span></dt>
-<dd class="attribute">
-<div>
-Corresponds to attribute <a>'name'</a> on the given element.
-
-
-</div>
-</dd>
-
-<dt id="__svg__SVGColorProfileElement__renderingIntent" class="attribute"><b>renderingIntent</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt>
-<dd class="attribute">
-<div>
-Corresponds to attribute <a>'rendering-intent'</a> on the given element.
-The value of this attribute is the value of the the RENDERING_INTENT_*
-constant defined on <a>SVGRenderingIntent</a> that corresponds to the
-value of the <a>'rendering-intent'</a> attribute.
-
-
-</div>
-</dd>
-</dl>
-</dd>
-</dl>
-
-</edit:with>
-
-
<h3 id="InterfaceSVGColorProfileRule">Interface SVGColorProfileRule</h3>
-
-
<p>The <a>SVGColorProfileRule</a> interface represents an @color-profile
rule in a CSS style sheet. An @color-profile rule identifies a ICC
profile which can be referenced within a given document.
</p>
-
<p>Support for the <a>SVGColorProfileRule</a> interface is only required
in user agents that support <a href="styling.html#StylingWithCSS">styling with CSS</a>.
</p>
<pre class="idl">interface <b>SVGColorProfileRule</b> : <a class="idlinterface" href="types.html#InterfaceSVGCSSRule">SVGCSSRule</a> {
attribute DOMString <a href="color.html#__svg__SVGColorProfileRule__src">src</a>;
attribute DOMString <a href="color.html#__svg__SVGColorProfileRule__name">name</a>;
attribute unsigned short <a href="color.html#__svg__SVGColorProfileRule__renderingIntent">renderingIntent</a>;
};
diff --git a/master/definitions.xml b/master/definitions.xml
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -679,16 +679,17 @@
attributes='lengthAdjust'
interfaces='SVGTextElement'>
<attribute name='x' href='text.html#TextElementXAttribute' animatable='yes'/>
<attribute name='y' href='text.html#TextElementYAttribute' animatable='yes'/>
<attribute name='dx' href='text.html#TextElementDXAttribute' animatable='yes'/>
<attribute name='dy' href='text.html#TextElementDYAttribute' animatable='yes'/>
<attribute name='rotate' href='text.html#TextElementRotateAttribute' animatable='yes'/>
<attribute name='textLength' href='text.html#TextElementTextLengthAttribute' animatable='yes'/>
+ <attribute name='height' href='text.html#TextElementHeightAttribute' animatable='yes'/>
<attribute name='width' href='text.html#TextElementWidthAttribute' animatable='yes'/>
</element>
<element
name='textPath'
href='text.html#TextPathElement'
contentmodel='textoranyof'
elementcategories='descriptive, paint server'
@@ -900,17 +901,17 @@
name='style'>
<attribute name='class' href='styling.html#ClassAttribute' animatable='yes'/>
<attribute name='style' href='styling.html#StyleAttribute'/>
</attributecategory>
<attributecategory
name='presentation'
href='intro.html#TermPresentationAttribute'
- presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, paint-order, pointer-events, shape-rendering, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode'/>
+ presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
<attributecategory
name='document event'
href='intro.html#TermDocumentEventAttribute'>
<attribute name='onunload' href='script.html#OnUnloadEventAttribute'/>
<attribute name='onabort' href='script.html#OnAbortEventAttribute'/>
<attribute name='onerror' href='script.html#OnErrorEventAttribute'/>
<attribute name='onresize' href='script.html#OnResizeEventAttribute'/>
@@ -1011,16 +1012,17 @@
<property name='font-size' href='text.html#FontSizeProperty'/>
<property name='font-size-adjust' href='text.html#FontSizeAdjustProperty'/>
<property name='font-stretch' href='text.html#FontStretchProperty'/>
<property name='font-style' href='text.html#FontStyleProperty'/>
<property name='font-variant' href='text.html#FontVariantProperty'/>
<property name='font-weight' href='text.html#FontWeightProperty'/>
<property name='glyph-orientation-horizontal' href='text.html#GlyphOrientationHorizontalProperty'/>
<property name='glyph-orientation-vertical' href='text.html#GlyphOrientationVerticalProperty'/>
+ <property name='hanging-punctuation' href='painting.html#HangingPunctuationProperty'/>
<property name='image-rendering' href='painting.html#ImageRenderingProperty'/>
<property name='letter-spacing' href='text.html#LetterSpacingProperty'/>
<property name='marker' href='painting.html#MarkerProperty'/>
<property name='marker-end' href='painting.html#MarkerEndProperty'/>
<property name='marker-knockout-left' href='painting.html#MarkerKnockoutLeftProperty'/>
<property name='marker-knockout-right' href='painting.html#MarkerKnockoutRightProperty'/>
<property name='marker-mid' href='painting.html#MarkerMidProperty'/>
<property name='marker-pattern' href='painting.html#MarkerPatternProperty'/>
@@ -1050,19 +1052,35 @@
<property name='vector-effect' href='painting.html#NonScalingStroke'/>
<property name='word-spacing' href='text.html#WordSpacingProperty'/>
<property name='writing-mode' href='text.html#WritingModeProperty'/>
<!-- ... properties defined elsewhere but described in this spec ........ -->
<property name='display' href='painting.html#VisibilityControl'/>
<property name='opacity' href='masking.html#ObjectAndGroupOpacityProperties'/>
- <property name='text-overflow' href='text.html#TextOverflowProcessing'/>
<property name='visibility' href='painting.html#VisibilityControl'/>
- <property name='white-space' href='http://dev.w3.org/csswg/css3-text/#white-space'/>
+
+ <!-- ... text properties defined elsewhere -->
+ <property name='hyphens' href='text.html#HyphensProperty'/>
+ <property name='line-height' href='text.html#TextLineHeight'/>
+ <property name='overflow-wrap' href='text.html#OverflowWrapProperty'/>
+ <property name='line-break' href='text.html#LineBreakProperty'/>
+ <property name='shape-inside' href='text.html#TextShapeInside'/>
+ <property name='shape-margin' href='text.html#TextShapeMargin'/>
+ <property name='shape-outside' href='text.html#TextShapeOutside'/>
+ <property name='shape-padding' href='text.html#TextShapePadding'/>
+ <property name='tab-size' href='text.html#TabSizeProperty'/>
+ <property name='text-align' href='text.html#TextAlignProperty'/>
+ <property name='text-align-last' href='text.html#TextAlignLastProperty'/>
+ <property name='text-indent' href='text.html#TextIndentProperty'/>
+ <property name='text-overflow' href='text.html#TextOverflowProcessing'/>
+ <property name='white-space' href='text.html#WhiteSpaceProperty'/>
+ <property name='word-break' href='text.html#WordBreakProperty'/>
+ <property name='word-wrap' href='text.html#WordWrapProperty'/>
<!-- ... interfaces ..................................................... -->
<interface name='SVGDocument' href='struct.html#InterfaceSVGDocument'/>
<interface name='SVGSVGElement' href='struct.html#InterfaceSVGSVGElement'/>
<interface name='SVGGElement' href='struct.html#InterfaceSVGGElement'/>
<interface name='SVGElement' href='types.html#InterfaceSVGElement'/>
<interface name='SVGDefsElement' href='struct.html#InterfaceSVGDefsElement'/>
@@ -1338,39 +1356,45 @@
<term name='user agent' href='intro.html#TermUserAgent'/>
<term name='user agents' href='intro.html#TermUserAgent'/>
<term name='user coordinate system' href='intro.html#TermUserCoordinateSystem'/>
<term name='user space' href='intro.html#TermUserSpace'/>
<term name='user units' href='intro.html#TermUserUnits'/>
<term name='viewport' href='intro.html#TermViewport'/>
<term name='viewport coordinate system' href='intro.html#TermViewportCoordinateSystem'/>
<term name='viewport space' href='intro.html#TermViewportSpace'/>
+
<!-- ... other, defined outside intro.html ... -->
<term name='Animatable' href="animate.html#Animatable"/>
- <term name='cap shape' href='painting.html#TermCapShape'/>
- <term name='dash positions' href='painting.html#TermDashPositions'/>
<term name='equivalent path' href='paths.html#TermEquivalentPath'/>
<term name='initial coordinate system' href='coords.html#InitialCoordinateSystem'/>
<term name='inherit' href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit'/>
<term name='object bounding box units' href='coords.html#ObjectBoundingBoxUnits'/>
<term name='simple alpha compositing' href='masking.html#SimpleAlphaBlending'/>
<term name='Conforming Dynamic SVG Viewers' href='conform.html#ConformingDynamicSVGViewers'/>
<term name='Conforming Static SVG Viewers' href='conform.html#ConformingStaticSVGViewers'/>
- <term name='line join shape' href='painting.html#TermLineJoinShape'/>
- <term name='marker property' href='painting.html#TermMarkerProperties'/>
- <term name='marker properties' href='painting.html#TermMarkerProperties'/>
- <term name='positioned marker' href='painting.html#TermPositionedMarker'/>
+
+ <!-- ... defined in painting.html ... -->
+ <term name='cap shape' href='painting.html#TermCapShape'/>
+ <term name='dash positions' href='painting.html#TermDashPositions'/>
+ <term name='line join shape' href='painting.html#TermLineJoinShape'/>
+ <term name='marker property' href='painting.html#TermMarkerProperties'/>
+ <term name='marker properties' href='painting.html#TermMarkerProperties'/>
+ <term name='positioned marker' href='painting.html#TermPositionedMarker'/>
<term name='positioned markers' href='painting.html#TermPositionedMarker'/>
- <term name='repeating marker' href='painting.html#TermRepeatingMarker'/>
- <term name='repeating markers' href='painting.html#TermRepeatingMarker'/>
- <term name='segment marker' href='painting.html#TermSegmentMarker'/>
- <term name='segment markers' href='painting.html#TermSegmentMarker'/>
- <term name='vertex marker' href='painting.html#TermVertexMarker'/>
- <term name='vertex markers' href='painting.html#TermVertexMarker'/>
-
+ <term name='repeating marker' href='painting.html#TermRepeatingMarker'/>
+ <term name='repeating markers' href='painting.html#TermRepeatingMarker'/>
+ <term name='segment marker' href='painting.html#TermSegmentMarker'/>
+ <term name='segment markers' href='painting.html#TermSegmentMarker'/>
+ <term name='vertex marker' href='painting.html#TermVertexMarker'/>
+ <term name='vertex markers' href='painting.html#TermVertexMarker'/>
+
+ <!-- ... defined in text.html ... -->
+ <term name='current text position' href='text.html#CurrentTextPosition'/>
+
<!-- === defined in other specifications ================================ -->
<!-- ... interfaces ..................................................... -->
<interface name='DocumentCSS' href='http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-DocumentCSS'/>
<interface name='EventListener' href='http://www.w3.org/TR/2012/WD-dom-20120405/#eventlistener'/>
<interface name='EventTarget' href='http://www.w3.org/TR/2012/WD-dom-20120405/#eventtarget'/>
<interface name='Event' href='http://www.w3.org/TR/2012/WD-dom-20120405/#event'/>
@@ -1394,14 +1418,21 @@
<!-- ... terms .......................................................... -->
<term name='compound selector' href='http://dev.w3.org/csswg/selectors4/#compound'/>
<term name='compound selectors' href='http://dev.w3.org/csswg/selectors4/#compound'/>
<term name='tree order' href='http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order'/>
<term name='InvalidAccessError' href='http://www.w3.org/TR/2012/WD-dom-20120405/#invalidaccesserror'/>
<term name='InvalidStateError' href='http://www.w3.org/TR/2012/WD-dom-20120405/#invalidstateerror'/>
<term name='SyntaxError' href='http://www.w3.org/TR/2012/WD-dom-20120405/#syntaxerror'/>
+ <!-- ... Wrapped text ................................................ -->
+ <term name='content area' href='text.html#TextLayoutContentArea'/>
+ <term name='wrapping context' href='text.html#TextLayoutWrappingArea'/>
+ <term name='wrapping area' href='text.html#TextLayoutWrappingArea'/>
+ <term name='CSS basic shape' href='http://dev.w3.org/csswg/css-shapes/#basic-shapes-from-svg-syntax'/>
+ <term name="forced line break" href="http://dev.w3.org/csswg/css-text/#forced-line-break"/>
+
<!-- ... grammar symbols ................................................ -->
<symbol name='angle' href='http://www.w3.org/TR/2012/WD-css3-values-20120308/#angles'/>
<symbol name='identifier' href='http://www.w3.org/TR/2012/WD-css3-values-20120308/#identifier'/>
<symbol name='transform-function' href='http://dev.w3.org/csswg/css3-transforms/#transform-functions'/>
</definitions>
diff --git a/master/feature.html b/master/feature.html
--- a/master/feature.html
+++ b/master/feature.html
@@ -290,23 +290,16 @@ the SVG 1.0 feature strings can be consi
the <a>'display'</a> and <a>'visibility'</a> properties</dd>
</dl>
<dl id="Marker">
<dt>Feature String:</dt>
<dd>http://www.w3.org/TR/SVG11/feature#Marker</dd>
<dt>User Agent Supports:</dt>
<dd>the <a>'marker element'</a> element</dd>
</dl>
-<dl id="ColorProfile">
- <dt>Feature String:</dt>
- <dd>http://www.w3.org/TR/SVG11/feature#ColorProfile</dd>
- <dt>User Agent Supports:</dt>
- <dd>
- the <a>'color-profile element'</a> element</dd>
-</dl>
<dl id="Gradient">
<dt>Feature String:</dt>
<dd>http://www.w3.org/TR/SVG11/feature#Gradient</dd>
<dt>User Agent Supports:</dt>
<dd>
the <a>'linearGradient'</a>, <a>'radialGradient'</a> and <a>'stop'</a> elements</dd>
</dl>
<dl id="Pattern">
diff --git a/master/images/text/text-anchor-middle.svg b/master/images/text/text-anchor-middle.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-anchor-middle.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewbox="0 0 300 100">
+
+ <text x="150" y="30"
+ font-family="sans-serif"
+ font-size="20px"
+ white-space="pre-line"
+ text-anchor="middle">This multi-line text is<tspan
+ x="150" y="55">anchored to the middle.</tspan></text>
+
+</svg>
diff --git a/master/images/text/text-path.svg b/master/images/text/text-path.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-path.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300" height="100" viewBox="0 0 300 100">
+
+ <path id="MyPath" stroke="lightblue" fill="none"
+ d="M 50,50 C 100,0 200,100 250,50"/>
+
+ <text font-family="sans-serif"
+ font-size="24">
+ <textPath xlink:href="#MyPath">Text on a path.</textPath>
+ </text>
+
+</svg>
+
diff --git a/master/images/text/text-preformatted.svg b/master/images/text/text-preformatted.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-preformatted.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ width="300" height="100" viewBox="0 0 300 100"
+
+ <text x="20" y="45"
+ font-family="sans-serif"
+ font-size="24">
+ Example of multiline,
+ <tspan x="20" y="75">pre-formatted text.</tspan>
+ </text>
+</svg>
+
diff --git a/master/images/text/text-shape-padding.png b/master/images/text/text-shape-padding.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ebbb7085fad156a921697f83a713545fa9f2393
GIT binary patch
literal 27177
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
diff --git a/master/images/text/text-shape-padding.svg b/master/images/text/text-shape-padding.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-shape-padding.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="300" viewbox="0 0 300 300">
+
+ <circle id="circle" cx="150" cy="150" r="125" fill="none" stroke="black" stroke-width="2"/>
+ <circle cx="150" cy="150" r="100" fill="none" stroke="lightblue"/>
+
+ <!-- This should work in both SVG 1.1 and SVG 2 renderers. -->
+ <text font-family="DejaVu Sans"
+ font-size="18px"
+ shape-inside="url(#circle)"
+ shape-margin="25"
+ line-height="110%"
+ text-align="justified">
+ <tspan x="130.1" y="65.8">This</tspan>
+ <tspan x="87.7" y="85.6" dx="0 0 0 11.1 0 11.1">is a sample</tspan>
+ <tspan x="68.9" y="105.4" dx="0 0 0 9.7 0 0 0 0 0 0 0 9.7">of wrapped text</tspan>
+ <tspan x="57.7" y="125.2" dx="0 0 0 14.3 0 0 0 14.3 0 0 14.3">in SVG 2! There</tspan>
+ <tspan x="51.8" y="145" dx="0 0 0 0 0 0 0 10.5 0 0 10.5 0 10.5">should be 25 pixel</tspan>
+ <tspan x="51.4" y="164.8" dx="0 0 0 0 0 0 0 0 9.3 0 0 0 0 0 0 9.3">padding around the</tspan>
+ <tspan x="56.9" y="184.6" dx="0 0 0 0 0 0 14.7 0 0 0 14.7 0 0 0 0 14.7">text. The text is</tspan>
+ <tspan x="67.4" y="204.4" dx="0 0 0 0 0 0 0 0 0 0 9.2 0 0 9.2">justified on both</tspan>
+ <tspan x="85.2" y="224.2" dx="0 0 0 0 0 0 0 3.4 0 0 3.4">sides. It looks</tspan>
+ <tspan x="122.1" y="244.0" dx="0 0 0 0 0 0 0 3.4 0 0 3.4">good!</tspan>
+ </text>
+
+
+</svg>
diff --git a/master/images/text/text-whitespace-vertical.svg b/master/images/text/text-whitespace-vertical.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-whitespace-vertical.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="200" height="200" viewbox="0 0 200 200">
+
+ <text x="150" y="30"
+ font-family="IPAMincho"
+ font-size="20px"
+ writing-mode="tb-rl">
+ <tspan x="150" y="30">åƒåˆ©å¥´æµä¹Žå’ŒåŠ </tspan>
+ <tspan x="130" y="30">餘多連曽津祢那</tspan>
+ <tspan x="110" y="30">良牟有為能於久</tspan>
+ <tspan x="90" y="30">耶万計ä¸å·±è¡£å¤©</tspan>
+ <tspan x="70" y="30">阿ä½ä¼Žå–©å¥³ç¾Žä¹‹</tspan>
+ <tspan x="50" y="30">æµæ¯”æ¯›å‹¢é ˆ</tspan>
+ </text>
+</svg>
diff --git a/master/images/text/text-wrap-complex.png b/master/images/text/text-wrap-complex.png
new file mode 100644
index 0000000000000000000000000000000000000000..64392b3d3f96b4464ce52cfd38d16a307cfc58cb
GIT binary patch
literal 28465
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
O+?RhSS1M!t^1lGXU#T7d
diff --git a/master/images/text/text-wrap-horizontal-rl.svg b/master/images/text/text-wrap-horizontal-rl.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-wrap-horizontal-rl.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewbox="0 0 300 100">
+
+ <text x="250" y="30" width="200"
+ writing-mode="rl-tb"
+ direction="rtl"
+ text-anchor="start"
+ font-family="PakType Naqsh"
+ font-size="20px" >هذا النص يلت٠عند 200<tspan
+ x="250" y="50">بكسل.</tspan></text>
+
+ <line x1="50" y1="0" x2="50" y2="100" stroke="lightblue"/>
+ <line x1="250" y1="0" x2="250" y2="100" stroke="lightblue"/>
+
+ <circle cx="250" cy="30" r="2" fill="red"/>
+</svg>
diff --git a/master/images/text/text-wrap-horizontal.svg b/master/images/text/text-wrap-horizontal.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-wrap-horizontal.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewbox="0 0 300 100">
+
+ <text x="50" y="30" width="200"
+ font-family="sans-serif"
+ font-size="20px" >This text wraps at<tspan
+ x="50" y="50">200 pixels.</tspan></text>
+
+ <line x1="50" y1="0" x2="50" y2="100" stroke="lightblue"/>
+ <line x1="250" y1="0" x2="250" y2="100" stroke="lightblue"/>
+
+ <circle cx="50" cy="30" r="2" fill="red"/>
+</svg>
diff --git a/master/images/text/text-wrap-rectangle.svg b/master/images/text/text-wrap-rectangle.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-wrap-rectangle.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewbox="0 0 300 100">
+
+ <text x="50" y="30"
+ shape-inside="rectangle(50,10,200,80)"
+ font-family="sans-serif"
+ font-size="20px" >This text wraps in a<tspan
+ x="50" y="50">rectangle.</tspan></text>
+
+ <rect x="50" y="10" width="200" height="80" fill="none" stroke="lightblue"/>
+
+</svg>
diff --git a/master/images/text/text-wrap-vertical.svg b/master/images/text/text-wrap-vertical.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-wrap-vertical.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="100" height="300" viewBox="0 0 100 300">
+
+ <text x="62.5" y="25" height="200"
+ writing-mode="tb-rl"
+ font-family="IPAMincho"
+ font-size="25px">テã‚ストã¯ï¼‘ï¼æ–‡å—ã®<tspan x="37.5" y="25">後ã«æŠ˜ã‚Šè¿”ã•ã‚Œã¾ã™ã€‚</tspan></text>
+
+ <line x1="0" y1="25" x2="100" y2="25" stroke="lightblue"/>
+ <line x1="0" y1="275" x2="100" y2="275" stroke="lightblue"/>
+
+ <circle cx="62.5" cy="25" r="2" fill="red"/>
+</svg>
diff --git a/master/images/text/text-wrapped.svg b/master/images/text/text-wrapped.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text-wrapped.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+ width="300" height="100" viewBox="0 0 300 100"
+
+ <text x="20" y="45"
+ font-family="sans-serif"
+ font-size="24"
+ width="250">
+ Example of text
+ <tspan x="20" y="75">auto-wrapped.</tspan>
+ </text>
+
+ <rect x="20" y="26" width="250" height="1000"
+ fill="none" stroke="lightblue"/>
+</svg>
+
diff --git a/master/images/text/text_wrap_complex_inkscape.svg b/master/images/text/text_wrap_complex_inkscape.svg
new file mode 100644
--- /dev/null
+++ b/master/images/text/text_wrap_complex_inkscape.svg
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="450"
+ height="300"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.48+devel r12472 custom"
+ sodipodi:docname="text_wrap_complex_inkscape.svg"
+ inkscape:export-filename="text-wrap-complex.png"
+ inkscape:export-xdpi="89.996605"
+ inkscape:export-ydpi="89.996605">
+ <defs
+ id="defs4" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.8007653"
+ inkscape:cx="89.21579"
+ inkscape:cy="135.27399"
+ inkscape:document-units="px"
+ inkscape:current-layer="svg2"
+ showgrid="true"
+ showguides="false"
+ inkscape:guide-bbox="true"
+ inkscape:window-width="1435"
+ inkscape:window-height="1020"
+ inkscape:window-x="2008"
+ inkscape:window-y="5"
+ inkscape:window-maximized="0"
+ inkscape:snap-bbox="true"
+ inkscape:object-nodes="true">
+ <sodipodi:guide
+ orientation="1,0"
+ position="300,0"
+ id="guide10" />
+ <inkscape:grid
+ type="xygrid"
+ id="grid12"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true"
+ spacingx="5px"
+ spacingy="5px" />
+ <sodipodi:guide
+ orientation="1,0"
+ position="150,0"
+ id="guide14" />
+ <sodipodi:guide
+ orientation="1,0"
+ position="450,0"
+ id="guide16" />
+ <sodipodi:guide
+ orientation="0,1"
+ position="0,150"
+ id="guide18" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata7">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1" />
+ <rect
+ style="color:#000000;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:none;stroke:#000000;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;clip-rule:nonzero;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
+ id="rect3390"
+ width="225"
+ height="175"
+ x="25"
+ y="25" />
+ <rect
+ style="color:#000000;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#ffffff;stroke:#000000;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;clip-rule:nonzero;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto"
+ id="rect3392"
+ width="225"
+ height="150"
+ x="200"
+ y="125" />
+ <path
+ style="fill:none;stroke:#add8e6;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 50,50 175,0 0,50 -50,0 0,75 -125,0 z"
+ id="path3394"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <path
+ style="fill:none;stroke:#add8e6;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 225,150 175,0 0,100 -175,0 z"
+ id="path3396"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <flowRoot
+ xml:space="preserve"
+ style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:justify;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"
+ id="flowRoot3402"><flowRegion
+ id="flowRegion3404"><use
+ x="0"
+ y="0"
+ xlink:href="#path3394"
+ id="use3406"
+ width="100%"
+ height="100%" /></flowRegion><flowPara
+ id="flowPara3408">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</flowPara></flowRoot> <flowRoot
+ xml:space="preserve"
+ style="font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:justify;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:DejaVu Sans;-inkscape-font-specification:DejaVu Sans"
+ id="flowRoot3414"><flowRegion
+ id="flowRegion3416"><use
+ x="0"
+ y="0"
+ xlink:href="#path3396"
+ id="use3418"
+ width="100%"
+ height="100%" /></flowRegion><flowPara
+ id="flowPara3420">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</flowPara></flowRoot></svg>
diff --git a/master/interact.html b/master/interact.html
--- a/master/interact.html
+++ b/master/interact.html
@@ -1017,56 +1017,63 @@ determined, the mask defines the shape o
otherwise, the cursor is an opaque rectangle. Typically, the
other pixel information (e.g., the R, G and B channels) defines
the colors for those parts of the cursor which are not masked
out. Note that cursors usually contain at least two colors so
that the cursor can be visible over most backgrounds.</p>
<edit:elementsummary name='cursor'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="CursorElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The <em>x-coordinate</em> of the position in the
- cursor's coordinate system which represents the precise
- position that is being pointed to.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'0'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="CursorElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The <em>y-coordinate</em> of the position in the
- cursor's coordinate system which represents the precise
- position that is being pointed to.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'0'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="CursorElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeFuncIRI"><FuncIRI></a></span>"</dt>
- <dd>A <a href="types.html#DataTypeFuncIRI">Functional IRI
- reference</a> to the file or element which provides the
- image of the cursor.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
- <p>SVG user agents are required to support PNG format images as
- targets of the <a>'xlink:href'</a>
- attribute.</p>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="CursorElementXAttribute">x</dfn>, <dfn id="CursorElementYAttribute">y</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The x- and y-coordinates of the position in the cursor's coordinate system
+ which represents the precise position that is being pointed to.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="CursorElementHrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ An <a href="types.html#DataTypeIRI">IRI reference</a> to the file or element
+ which provides the image of the cursor.
+ </dd>
+</dl>
+
+<p>SVG user agents are required to support PNG format images as targets of the
+<a>'xlink:href'</a> attribute.</p>
<p class="issue">Add an example.</p>
</edit:with>
<h2 id="DOMInterfaces">DOM interfaces</h2>
<h3 id="InterfaceSVGCursorElement">Interface SVGCursorElement</h3>
diff --git a/master/linking.html b/master/linking.html
--- a/master/linking.html
+++ b/master/linking.html
@@ -169,18 +169,17 @@ references and the valid target types fo
<ul>
<li>the <a>'a'</a> element can reference any local or non-local resource</li>
<li>the <a>'altGlyph'</a> element must reference either an <a>'altGlyphDef'</a> element or a <a>'glyph'</a> element</li>
<li>the <a>'animate'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
<li>the <a>'animateColor'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
<li>the <a>'animateMotion'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
<li>the <a>'animateTransform'</a> element (see <a href="animate.html#TargetElement">Identifying the target element for an animation</a> for reference rules)</li>
<li>the <a>'clip-path'</a> property must reference a <a>'clipPath'</a> element</li>
- <li>the <a>'color-profile element'</a> element must reference an ICC profile resource</li>
- <li>the <a href="color.html#ColorProfileSrcProperty">'src'</a> descriptor on an @color-profile definition must reference an ICC profile resource or a <a>'color-profile element'</a> element</li>
+ <li>the <a href="color.html#ColorProfileSrcProperty">'src'</a> descriptor on an @color-profile definition must reference an ICC profile resource</li>
<li>the <a>'cursor element'</a> element must reference a resource that can provide an image for the cursor graphic</li>
<li>the <a>'cursor property'</a> property must reference a resource that can provide an image for the cursor graphic</li>
<li>the <a>'feImage'</a> element must reference any local or non-local resource</li>
<li>the <a>'fill'</a> property (see <a href="painting.html#SpecifyingPaint">Specifying paint</a> for reference rules)</li>
<li>the <a>'filter element'</a> element must reference a <a>'filter element'</a> element</li>
<li>the <a>'filter property'</a> property must reference a <a>'filter element'</a> element</li>
<li>the <a>'image'</a> element must reference any local or non-local resource</li>
<li>the <a>'linearGradient'</a> element must reference a <a>'linearGradient'</a> or <a>'radialGradient'</a> element</li>
@@ -402,98 +401,123 @@ a link to an ellipse.</p>
<p>If the above SVG file is viewed by a user agent that supports both
SVG and HTML, then clicking on the ellipse will cause the current window
or frame to be replaced by the W3C home page.</p>
<div id="AElement">
<edit:elementsummary name='a'/>
</div>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt><a id="XLinkShowAttribute2" ></a> <span
- class="adef">xlink:show</span> = "<span
- class="attr-value">new</span>" |
- "<span
- class="attr-value">replace</span>" </dt>
- <dd><p>This attribute provides documentation to XLink-aware processors. If
- <span class="attr-value">target="_blank"</span> then use
- <span class="attr-value">xlink:show="new"</span> else use
- <span class="attr-value">'replace'</span>. In
- case of a conflict, the target attribute has priority, since it can
- express a wider range of values.
- Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
- <p class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</p></dd>
- <dt id="AElementXLinkActuateAttribute"><span
- class="adef">xlink:actuate</span> = <span class='attr-value'>"onRequest"</span></dt>
- <dd><p>This attribute provides documentation to XLink-aware processors that
- an application should traverse from the starting
- resource to the ending resource only on a post-loading
- event triggered for the purpose of traversal.
- Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a> [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
- <p class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</p></dd>
- <dt id="AElementXLinkHrefAttribute"><span
- class="adef">xlink:href</span> = "<span class="attr-value"><a href="types.html#DataTypeIRI"><IRI></a></span>"</dt>
- <dd><p>The location of the referenced object, expressed as an <a>IRI reference</a>.</p>
- <p class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</p>
- </dd>
- <dt id="AElementTargetAttribute"><span
- class="adef">target</span> = "<span
- class="attr-value">_replace</span>" |
- "<span
- class="attr-value">_self</span>" |
- "<span
- class="attr-value">_parent</span>" |
- "<span
- class="attr-value">_top</span>" |
- "<span
- class="attr-value">_blank</span>" |
- "<span class="attr-value"><a href="types.html#DataTypeXML-Name"><XML-Name></a></span>"
- </dt>
- <dd><p>This attribute should be used when there are multiple possible targets for
- the ending resource, such as when the parent document is a
- multi-frame HTML or XHTML document. This attribute specifies the
- name or portion of the target window, frame, pane, tab, or other
- relevant presentation context (e.g., an HTML or XHTML frame, iframe, or object element) into
- which a document is to be opened when the link is activated:</p>
- <dl class="definitions"><dt><span class="attr-value">_replace</span></dt>
- <dd>The current SVG image is replaced by the linked content in the
- same rectangular area in the same frame as the current SVG image.</dd>
- <dt><span class="attr-value">_self</span></dt>
- <dd>The current SVG image is replaced by the linked content in the
- same frame as the current SVG image. If the attribute is not specified,
- <span class='attr-value'>'_self'</span> is assumed.</dd>
- <dt><span class="attr-value">_parent</span></dt>
- <dd>The immediate frameset parent of the SVG image is replaced by the
- linked content.</dd>
- <dt><span class="attr-value">_top</span></dt>
- <dd>The content of the full window or tab, including any frames, is
- replaced by the linked content</dd>
- <dt><span class="attr-value">_blank</span></dt>
- <dd>A new un-named window or tab is requested for the display of the
- linked content. If this fails, the result is the same as <span class="attr-value">_top</span></dd>
- <dt><span class="attr-value"><a href="types.html#DataTypeXML-Name"><XML-Name></a></span></dt>
- <dd>Specifies the name of the frame, pane, or other relevant
- presentation context for display of the linked content. If this
- already exists, it is re-used, replacing the existing content. If
- it does not exist, it is created (the same as <span class="attr-value">'_blank'</span>, except that
- it now has a name).
- <!-- Note that frame-target must be an <a href="types.html#DataTypeXML-Name">XML Name</a> [XML11]. --></dd>
- </dl>
- <p>Note: The value <span class="attr-value">'_new'</span> is <em>not</em> a legal value for target (use <span class="attr-value">'_blank'</span>).</p>
- <p class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</p></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="XLinkShowAttribute2">xlink:show</dfn></td>
+ <td>new | replace</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><dfn id="AElementXLinkActuateElement">xlink:actuate</dfn></td>
+ <td>onRequest</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>These attribute provides documentation to XLink-aware processors.</p>
+ <p>If <span class="attr-value">target="_blank"</span> then use
+ <span class="attr-value">xlink:show="new"</span> else use
+ <span class="attr-value">'replace'</span>. In
+ case of a conflict, the target attribute has priority, since it can
+ express a wider range of values.</p>
+ <p><a>'xlink:actuate'</a> indicates that an application should traverse from
+ the starting resource to the ending resource only on a post-loading event
+ triggered for the purpose of traversal.</p>
+ <p>Refer to the <a href="http://www.w3.org/TR/xlink/">XML Linking Language (XLink)</a>
+ [<a href="refs.html#ref-XLINK">XLINK</a>].</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AElementXLinkHrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The location of the referenced object, expressed as an <a>IRI reference</a>.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AElementTargetAttribute">target</dfn></td>
+ <td>_replace | _self | _parent | _top | _blank | <a><XML-Name></a></td>
+ <td>_self</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>This attribute should be used when there are multiple possible targets for
+ the ending resource, such as when the parent document is a
+ multi-frame HTML or XHTML document. This attribute specifies the
+ name or portion of the target window, frame, pane, tab, or other
+ relevant presentation context (e.g., an HTML or XHTML frame, iframe, or object element) into
+ which a document is to be opened when the link is activated:</p>
+ <dl>
+ <dt><span class="attr-value">_replace</span></dt>
+ <dd>The current SVG image is replaced by the linked content in the
+ same rectangular area in the same frame as the current SVG image.</dd>
+ <dt><span class="attr-value">_self</span></dt>
+ <dd>The current SVG image is replaced by the linked content in the
+ same frame as the current SVG image.</dd>
+ <dt><span class="attr-value">_parent</span></dt>
+ <dd>The immediate frameset parent of the SVG image is replaced by the
+ linked content.</dd>
+ <dt><span class="attr-value">_top</span></dt>
+ <dd>The content of the full window or tab, including any frames, is
+ replaced by the linked content</dd>
+ <dt><span class="attr-value">_blank</span></dt>
+ <dd>A new un-named window or tab is requested for the display of the
+ linked content. If this fails, the result is the same as <span class="attr-value">_top</span></dd>
+ <dt><span class="attr-value"><a><XML-Name></a></span></dt>
+ <dd>Specifies the name of the frame, pane, or other relevant
+ presentation context for display of the linked content. If this
+ already exists, it is re-used, replacing the existing content. If
+ it does not exist, it is created (the same as <span class="attr-value">'_blank'</span>, except that
+ it now has a name).
+ <!-- Note that frame-target must be an <a href="types.html#DataTypeXML-Name">XML Name</a> [XML11]. --></dd>
+ </dl>
+ <p>Note: The value <span class="attr-value">'_new'</span> is <em>not</em> a legal value for target (use <span class="attr-value">'_blank'</span>).</p>
+ </dd>
+</dl>
</edit:with>
<h2 id="LinksIntoSVG">Linking into SVG content: IRI fragments and SVG views</h2>
<p>Because SVG content often represents a picture or drawing
of something, a common need is to link into a particular
<em>view</em> of the document, where a view indicates
@@ -691,29 +715,39 @@ as follows:</p>
<h3 id="ViewElement">Predefined views: the <span class="element-name">'view'</span> element</h3>
<edit:with element='view'>
<p>The <span class="element-name">'view'</span> element is defined as follows:</p>
<edit:elementsummary name='view'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="ViewElementViewTargetAttribute"><span
- class="adef">viewTarget</span> = "<em>XML_Name
- [XML_NAME]*</em>"</dt>
- <dd>Indicates the target object associated with the view.
- <br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="ViewElementViewTargetAttribute">viewTarget</dfn></td>
+ <td><a><XML-Name></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Indicates the target object associated with the view.
+ </dd>
+</dl>
</edit:with>
<h3 id="ViewHighlight">Highlighting views</h3>
<p>It is helpful to users if the target element(s) are highlighted. The visual
styling of this highlight should be decided by the document author, because the
<a>SVG user agent</a> has no way to determine what changes would make the
diff --git a/master/painting.html b/master/painting.html
--- a/master/painting.html
+++ b/master/painting.html
@@ -3871,16 +3871,19 @@ SVG user agent about how to optimize its
agent should use the higher quality algorithms instead of
nearest neighbor resampling.</dd>
</dl>
<p>In all cases, resampling must be done in a truecolor (e.g.,
24-bit) color space even if the original data and/or the target
device is indexed color.</p>
+<p class="issue">High quality SVG viewers should perform the image
+processing using a linear color space.</p>
+
<h3 id="BufferedRendering">The <span class="property">'buffered-rendering'</span>
property</h3>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Support a hint to indicate that an element's rendering should be cached.</td>
diff --git a/master/paths.html b/master/paths.html
--- a/master/paths.html
+++ b/master/paths.html
@@ -60,57 +60,78 @@ implementation notes</a>.</p>
<dfn id="TermEquivalentPath">equivalent path</dfn> is, which is
what their shape is as a path. (The equivalent path of a
<a>'path'</a> element is simply the path itself.)</p>
<h2 id="PathElement">The <span class="element-name">'path'</span> element</h2>
<edit:elementsummary name='path'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="DAttribute"><span
- class="adef">d</span> = "<em>path data</em>"</dt>
- <dd>The definition of the outline of a shape. See <a
- href="#PathData">Path data</a>.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: yes.</span>
- Path data animation is only possible when each path data
- specification within an animation specification has exactly
- the same list of path data commands as the <a>'d'</a> attribute. If an animation is
- specified and the list of path data commands is not the
- same, then the animation specification is in error (see <a
- href="implnote.html#ErrorProcessing">Error Processing</a>).
- The animation engine interpolates each parameter to each
- path data command separately based on the attributes to the
- given animation element. Flags and booleans are
- interpolated as fractions between zero and one, with any
- non-zero value considered to be a value of one/true.</dd>
- <dt id="PathLengthAttribute"><span class="adef">pathLength</span> = "<a
- href="types.html#DataTypeNumber"><number></a>"</dt>
- <dd>The author's computation of the total length of the
- path, in user units. This value is used to calibrate the
- user agent's own <a
- href="paths.html#DistanceAlongAPath">distance-along-a-path</a>
- calculations with that of the author. The user agent will
- scale all distance-along-a-path computations by the ratio
- of <a>'pathLength'</a> to the user
- agent's own computed value for total path length. <a>'pathLength'</a> potentially affects
- calculations for <a href="text.html#TextOnAPath">text on a path</a>,
- <a href="animate.html#AnimateMotionElement">motion animation</a> and
- various <a href="painting.html#StrokeProperties">stroke operations</a>.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="DAttribute">d</dfn></td>
+ <td><em>path data</em></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The definition of the outline of a shape. See <a href="#PathData">Path data</a>.</p>
+ <p>Path data animation is only possible when each path data
+ specification within an animation specification has exactly
+ the same list of path data commands as the <a>'d'</a> attribute. If an animation is
+ specified and the list of path data commands is not the
+ same, then the animation specification is in error (see
+ <a href="implnote.html#ErrorProcessing">Error Processing</a>).
+ The animation engine interpolates each parameter to each
+ path data command separately based on the attributes to the
+ given animation element. Flags and booleans are
+ interpolated as fractions between zero and one, with any
+ non-zero value considered to be a value of one/true.</p>
+ <p class="issue">The Value in the table above should be a link to a datatype for path data.</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="PathLengthAttribute">pathLength</dfn></td>
+ <td><a><number></a></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The author's computation of the total length of the
+ path, in user units. This value is used to calibrate the
+ user agent's own <a href="paths.html#DistanceAlongAPath">distance-along-a-path</a>
+ calculations with that of the author. The user agent will
+ scale all distance-along-a-path computations by the ratio
+ of <a>'pathLength'</a> to the user
+ agent's own computed value for total path length. <a>'pathLength'</a> potentially affects
+ calculations for <a href="text.html#TextOnAPath">text on a path</a>,
+ <a href="animate.html#AnimateMotionElement">motion animation</a> and
+ various <a href="painting.html#StrokeProperties">stroke operations</a>.</p>
+ <p>A negative value is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
+ </dd>
+</dl>
<h2 id="PathData">Path data</h2>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Include smooth path between points functionality.</td>
diff --git a/master/propidx.html b/master/propidx.html
--- a/master/propidx.html
+++ b/master/propidx.html
@@ -411,16 +411,30 @@ other specifications.</p>
<a>'feSpecularLighting'</a>
elements</td>
<td>no</td>
<td>N/A</td>
<td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">visual</a></td>
<td>yes</td>
</tr>
<tr>
+ <th><a>'line-height'</a></th>
+ <td>normal |
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-number">
+ <span class="value-inst-number noxref"><number></span></a> |
+ <a href="types.html#DataTypeLength"><length></a> |
+ <a><percentage></a></td>
+ <td>normal</td>
+ <td><a>'text'</a> elements</td>
+ <td>yes</td>
+ <td>refer to font size of element itself</td>
+ <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">visual</a></td>
+ <td>yes</td>
+ </tr>
+ <tr>
<th><a>'marker property'</a></th>
<td>see individual properties</td>
<td>see individual properties</td>
<td><a>'path'</a>, <a>'line'</a>, <a>'polyline'</a> and <a>'polygon'</a> elements</td>
<td>yes</td>
<td>N/A</td>
<td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">visual</a></td>
<td>yes</td>
diff --git a/master/script.html b/master/script.html
--- a/master/script.html
+++ b/master/script.html
@@ -128,42 +128,66 @@ If the <a>SVG user agent</a> does not su
</tr>
</tbody>
</table>
<p class="view-as-svg"><a href="images/script/script01.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
<edit:elementsummary name='script'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="ScriptElementTypeAttribute"><span
- class="adef">type</span> = "<span
- class="attr-value"><em>content-type</em></span>"</dt>
- <dd>Identifies the scripting language for the given <a>'script'</a> element. The value
- <span class="attr-value"><em>content-type</em></span>
- specifies a media type, per
- <a href="http://www.ietf.org/rfc/rfc2046.txt">Multipurpose Internet Mail Extensions
- (MIME) Part Two</a> [<a href="refs.html#ref-RFC2046">RFC2046</a>].
- If a <a>'script/type'</a> is not provided, then the default scripting
- language assumed is ECMAScript, as if processed with the
- <span class="attr-name">'application/ecmascript'</span> media type.
- [<a href="refs.html#ref-RFC4329">RFC4329</a>]<br/>
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
+<p><em>Attribute definitions:</em></p>
- <dt id="ScriptElementHrefAttribute"><span class="adef">xlink:href</span> =
- "<span class="attr-value"><a href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a href="linking.html#IRIReference">IRI reference</a> to an external
- resource containing the script code.<br/>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
- </dl>
- </div>
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="ScriptElementTypeAttribute">type</dfn></td>
+ <td><em>content-type</em></td>
+ <td>application/ecmascript</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Identifies the scripting language for the given <a>'script'</a> element. The value
+ <span class="attr-value"><em>content-type</em></span>
+ specifies a media type, per
+ <a href="http://www.ietf.org/rfc/rfc2046.txt">Multipurpose Internet Mail Extensions
+ (MIME) Part Two</a> [<a href="refs.html#ref-RFC2046">RFC2046</a>].
+ If a <a>'script/type'</a> is not provided, then the default scripting
+ language assumed is ECMAScript, as if processed with the
+ <span class="attr-name">'application/ecmascript'</span> media type.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="ScriptElementHrefAttribute">href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ An <a href="linking.html#IRIReference">IRI reference</a> to an external
+ resource containing the script code.
+ </dd>
+</dl>
<h2 id="EventHandling">Event handling</h2>
<p>Events can cause scripts to execute when either of the following has
occurred:</p>
<ul>
<li><a href="script.html#EventAttributes">Event attributes</a> such as
@@ -207,60 +231,92 @@ as if processed with the media type <spa
<p>Below is the definition for the <a>'g/onload'</a> event attribute. It
can be specified on all of the <a>animation elements</a> and most of the
<a>graphics elements</a> and <a>container elements</a>. The <a>'g/onload'</a>
event attribute is classified as both a <a>graphical event attribute</a>
and an <a>animation event attribute</a>. (See the definition for each element
to determine whether it can have a <a>graphical event attribute</a>
specified on it.)</p>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="OnLoadEventAttribute"><span class="adef">onload</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dd>Specifies some script to execute when "bubbling" or "at target"
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="OnLoadEventAttribute">onload</dfn></td>
+ <td><a><anything></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Specifies some script to execute when "bubbling" or "at target"
phase listeners for the SVGLoad event are fired on the element
- the attribute is specified on.<br/>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
- </dl>
-</div>
+ the attribute is specified on.
+ </dd>
+</dl>
<h3 id="GraphicsEvents">Event attributes on graphics and container elements</h3>
<p>Below are the definitions for the <a>graphical event attributes</a>.
These can be specified on most <a>graphics elements</a> and
<a>container elements</a>. (See the definition for each element to
determine whether it can have a <a>graphical event attribute</a>
specified on it.)</p>
<p>Note that <a>'g/onload'</a>, defined above, is also classified as a
<a>graphical event attribute</a>.</p>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="OnFocusInEventAttribute"><span class="adef">onfocusin</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnFocusOutEventAttribute"><span class="adef">onfocusout</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnActivateEventAttribute"><span class="adef">onactivate</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnClickEventAttribute"><span class="adef">onclick</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnKeyDownEventAttribute"><span class="adef">onkeydown</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnKeyPressEventAttribute"><span class="adef">onkeypress</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnKeyUpEventAttribute"><span class="adef">onkeyup</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnMouseDownEventAttribute"><span class="adef">onmousedown</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnMouseUpEventAttribute"><span class="adef">onmouseup</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnMouseOverEventAttribute"><span class="adef">onmouseover</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnMouseMoveEventAttribute"><span class="adef">onmousemove</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnMouseOutEventAttribute"><span class="adef">onmouseout</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dd>Specifies some script to execute when "bubbling" or "at target"
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td>
+ <dfn id="OnFocusInEventAttribute">onfocusin</dfn>,
+ <dfn id="OnFocusOutEventAttribute">onfocusout</dfn>,
+ <dfn id="OnActivateEventAttribute">onactivate</dfn>,
+ <dfn id="OnClickEventAttribute">onclick</dfn>,
+ <dfn id="OnKeyDownEventAttribute">onkeydown</dfn>,
+ <dfn id="OnKeyPressEventAttribute">onkeypress</dfn>,
+ <dfn id="OnKeyUpEventAttribute">onkeyup</dfn>,
+ <dfn id="OnMouseDownEventAttribute">onmousedown</dfn>,
+ <dfn id="OnMouseUpEventAttribute">onmouseup</dfn>,
+ <dfn id="OnMouseOverEventAttribute">onmouseover</dfn>,
+ <dfn id="OnMouseMoveEventAttribute">onmousemove</dfn>,
+ <dfn id="OnMouseOutEventAttribute">onmouseout</dfn>
+ </td>
+ <td><a><anything></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Specifies some script to execute when "bubbling" or "at target"
phase listeners for the corresponding event are fired on the element
- the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
- to determine which event each of these event attributes corresponds to.<br/>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
- </dl>
-</div>
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of supported events</a>
+ to determine which event each of these event attributes corresponds to.
+ </dd>
+</dl>
<h3 id="DocumentEvents">Document-level event attributes</h3>
<p>Below are the definitions for the <a>document event attributes</a>.
These can be specified only on <a>'svg'</a> elements.</p>
<p class="issue">The conformance class for the 'only-on-<svg> elements'
criteria needs to be clarified here (this is for document validation presumably,
@@ -271,54 +327,88 @@ it makes sense to not encourage uses whe
For <a href="conform.html#ConformingDynamicSVGViewers">Conforming Dynamic SVG Viewers</a>:
what the <a>document event attributes</a> should do is register an event listener
for the event in question.</p>
<p class="issue">'onerror' should be available on image, script and elements
that load external resources. This is related to issue
<a href="http://www.w3.org/Graphics/SVG/WG/track/issues/2254">2254</a>.</p>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="OnUnloadEventAttribute"><span class="adef">onunload</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnAbortEventAttribute"><span class="adef">onabort</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnErrorEventAttribute"><span class="adef">onerror</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnResizeEventAttribute"><span class="adef">onresize</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnScrollEventAttribute"><span class="adef">onscroll</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnZoomEventAttribute"><span class="adef">onzoom</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dd>Specifies some script to execute when "bubbling" or "at target"
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td>
+ <dfn id="OnUnloadEventAttribute">onunload</dfn>,
+ <dfn id="OnAbortEventAttribute">onabort</dfn>,
+ <dfn id="OnErrorEventAttribute">onerror</dfn>,
+ <dfn id="OnResizeEventAttribute">onresize</dfn>,
+ <dfn id="OnScrollEventAttribute">onscroll</dfn>,
+ <dfn id="OnZoomEventAttribute">onzoom</dfn>
+ </td>
+ <td><a><anything></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Specifies some script to execute when "bubbling" or "at target"
phase listeners for the corresponding event are fired on the element
- the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
- to determine which event each of these event attributes corresponds to.<br/>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
- </dl>
-</div>
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of supported events</a>
+ to determine which event each of these event attributes corresponds to.
+ </dd>
+</dl>
<h3 id="AnimationEvents">Animation event attributes</h3>
<p>Below are the definitions for the <a>animation event attributes</a>.
These can be specified on the <a>animation elements</a>.</p>
<p>Note that <a>'g/onload'</a>, defined above, is also classified as an
<a>animation event attribute</a>.</p>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="OnBeginEventAttribute"><span class="adef">onbegin</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnEndEventAttribute"><span class="adef">onend</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dt id="OnRepeatEventAttribute"><span class="adef">onrepeat</span> = "<span class="attr-value"><a href='types.html#DataTypeAnything'><anything></a></span>"</dt>
- <dd>Specifies some script to execute when "bubbling" or "at target"
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td>
+ <dfn id="OnBeginEventAttribute">onbegin</dfn>,
+ <dfn id="OnEndEventAttribute">onend</dfn>,
+ <dfn id="OnRepeatEventAttribute">onrepeat</dfn>
+ </td>
+ <td><a><anything></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ Specifies some script to execute when "bubbling" or "at target"
phase listeners for the corresponding event are fired on the element
- the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of support events</a>
- to determine which event each of these event attributes corresponds to.<br/>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: no.</span></dd>
- </dl>
-</div>
+ the attribute is specified on. See the <a href='interact.html#SVGEvents'>Complete list of supported events</a>
+ to determine which event each of these event attributes corresponds to.
+ </dd>
+</dl>
<h2 id="DOMInterfaces">DOM interfaces</h2>
<h3 id="InterfaceSVGScriptElement">Interface SVGScriptElement</h3>
<edit:with element='script'>
diff --git a/master/shapes.html b/master/shapes.html
--- a/master/shapes.html
+++ b/master/shapes.html
@@ -101,143 +101,116 @@ appropriate values for attributes <a>'rx
readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__ry">ry</a>;
};</pre>
</td>
</tr>
</table>
-->
<edit:elementsummary name='rect'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="RectElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis coordinate of the side of the rectangle
- which has the smaller x-axis coordinate value in the
- current user coordinate system.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RectElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis coordinate of the side of the rectangle
- which has the smaller y-axis coordinate value in the
- current user coordinate system.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RectElementWidthAttribute"><span
- class="adef">width</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The width of the rectangle.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RectElementHeightAttribute"><span
- class="adef">height</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The height of the rectangle.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RectElementRXAttribute"><span
- class="adef">rx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>For rounded rectangles, the x-axis radius of the
- ellipse used to round off the corners of the
- rectangle.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).<br />
- See the notes below about what happens if the attribute is
- not specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RectElementRYAttribute"><span
- class="adef">ry</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>For rounded rectangles, the y-axis radius of the
- ellipse used to round off the corners of the
- rectangle.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).<br />
- See the notes below about what happens if the attribute is
- not specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
-<!--
-<p>If a properly specified value is provided for <a>'rx'</a>
-but not for <a>'ry'</a>, then the user agent processes the
-<a>'rect'</a> element with the effective value for <a>'ry'</a> as
-equal to <a>'rx'</a>. If a properly specified value is provided for
-<a>'ry'</a> but not for <a>'rx'</a>, then the user agent processes
-the <a>'rect'</a> element with the effective value for <a>'rx'</a>
-as equal to <a>'ry'</a>. If neither <a>'rx'</a> nor <a>'ry'</a>
-has a properly specified value, then the user agent processes
-the <a>'rect'</a> element as if no rounding had been specified,
-resulting in square corners. If <a>'rx'</a> is greater than half
-of the width of the rectangle, then the user agent processes the
-<a>'rect'</a> element with the effective value for <a>'rx'</a> as
-half of the width of the rectangle. If <a>'ry'</a> is greater than
-half of the height of the rectangle, then the user agent processes
-the <a>'rect'</a> element with the effective value for <a>'ry'</a>
-as half of the height of the rectangle.</p>
--->
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RectElementXAttribute">x</dfn>, <dfn id="RectElementYAttribute">y</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The coordinates of the left and top edges of the rectangle, in the current
+ user coordinate system.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RectElementWidthAttribute">width</dfn>, <dfn id="RectElementHeightAttribute">height</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The width and height of the rectangle. A negative value for either
+ attribute is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero for either attribute disables rendering of the element.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RectElementRXAttribute">rx</dfn>, <dfn id="RectElementRYAttribute">ry</dfn></td>
+ <td><a><length></a></td>
+ <td>(see below)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>For rounded rectangles, the x- and y-axis radii of the
+ ellipse used to round off the corners of the rectangle.
+ A negative value for either attribute is an error
+ (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
-<p>The values used for the x- and y-axis rounded corner radii are
-determined implicitly if the <a>'rx'</a> or <a>'ry'</a> attributes (or both)
-are not specified, or are specified but with invalid values.
-The values are also subject to clamping so that the lengths of
-the straight segments of the rectangle are never negative. The
-effective values for <a>'rx'</a> and <a>'ry'</a> are determined by following
-these steps in order:</p>
+ <p>The values used for the x- and y-axis rounded corner radii are
+ determined implicitly if the <a>'rx'</a> or <a>'ry'</a> attributes (or both)
+ are not specified, or are specified but with invalid values.
+ The values are also subject to clamping so that the lengths of
+ the straight segments of the rectangle are never negative. The
+ effective values for <a>'rx'</a> and <a>'ry'</a> are determined by following
+ these steps in order:</p>
-<ol>
- <li>Let <var>rx</var> and <var>ry</var> be length values.</li>
+ <ol>
+ <li>Let <var>rx</var> and <var>ry</var> be length values.</li>
- <li>If neither <a>'rx'</a> nor <a>'ry'</a> are properly specified, then set both
- <var>rx</var> and <var>ry</var> to 0. (This will result in square corners.)</li>
+ <li>If neither <a>'rx'</a> nor <a>'ry'</a> are properly specified, then set both
+ <var>rx</var> and <var>ry</var> to 0. (This will result in square corners.)</li>
- <li>Otherwise, if a properly specified value is provided for <a>'rx'</a>, but
- not for <a>'ry'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'rx'</a>.</li>
+ <li>Otherwise, if a properly specified value is provided for <a>'rx'</a>, but
+ not for <a>'ry'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'rx'</a>.</li>
- <li>Otherwise, if a properly specified value is provided for <a>'ry'</a>, but
- not for <a>'rx'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'ry'</a>.</li>
+ <li>Otherwise, if a properly specified value is provided for <a>'ry'</a>, but
+ not for <a>'rx'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'ry'</a>.</li>
- <li>Otherwise, both <a>'rx'</a> and <a>'ry'</a> were specified properly. Set <var>rx</var> to
- the value of <a>'rx'</a> and <var>ry</var> to the value of <a>'ry'</a>.</li>
+ <li>Otherwise, both <a>'rx'</a> and <a>'ry'</a> were specified properly. Set <var>rx</var> to
+ the value of <a>'rx'</a> and <var>ry</var> to the value of <a>'ry'</a>.</li>
- <li>If <var>rx</var> is greater than half of <a>'width'</a>, then set
- <var>rx</var> to half of <a>'width'</a>.</li>
+ <li>If <var>rx</var> is greater than half of <a>'width'</a>, then set
+ <var>rx</var> to half of <a>'width'</a>.</li>
- <li>If <var>ry</var> is greater than half of <a>'height'</a>, then set
- <var>ry</var> to half of <a>'height'</a>.</li>
+ <li>If <var>ry</var> is greater than half of <a>'height'</a>, then set
+ <var>ry</var> to half of <a>'height'</a>.</li>
- <li>The effective values of <a>'rx'</a> and <a>'ry'</a> are <var>rx</var> and
- <var>ry</var>, respectively.</li>
-</ol>
+ <li>The effective values of <a>'rx'</a> and <a>'ry'</a> are <var>rx</var> and
+ <var>ry</var>, respectively.</li>
+ </ol>
+ </dd>
+</dl>
<p>Mathematically, a <a>'rect'</a> element can be mapped to an
equivalent <a>'path'</a> element as follows: (Note: all coordinate and
length values are first converted into user space coordinates according
to <a href="coords.html#Units">Units</a>.)</p>
<ul>
<li>perform an absolute <a
@@ -302,51 +275,58 @@ attribute, it will be assigned the same
<edit:with element='circle'>
<p>The <a>'circle'</a> element defines a circle based on a center point and a
radius.</p>
<edit:elementsummary name='circle'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="CircleElementCXAttribute"><span
- class="adef">cx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis coordinate of the center of the
- circle.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="CircleElementCYAttribute"><span
- class="adef">cy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis coordinate of the center of the
- circle.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="CircleElementRAttribute"><span
- class="adef">r</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The radius of the circle.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="CircleElementCXAttribute">cx</dfn>, <dfn id="CircleElementCYAttribute">cy</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The coordinates of the center of the circle.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RectElementRAttribute">r</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>The radius of the circle. A negative value is an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.</dd>
+</dl>
<p>The arc of a <a>'circle'</a> element begins at the "3 o'clock" point
on the radius and progresses towards the "9 o'clock" point. The starting
point and direction of the arc are affected by the user space transform
in the same manner as the geometry of the element.</p>
<p class="issue">Saying that it progresses towards the "9 o'clock point"
is slightly unclear, since it doesn't say whether it goes clockwise
@@ -366,61 +346,61 @@ with red and stroked with blue.</p>
<edit:with element='ellipse'>
<p>The <a>'ellipse'</a> element defines an ellipse which is axis-aligned
with the current <a>user coordinate system</a> based on a center point and two radii.</p>
<edit:elementsummary name='ellipse'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="EllipseElementCXAttribute"><span
- class="adef">cx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis coordinate of the center of the
- ellipse.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="EllipseElementCYAttribute"><span
- class="adef">cy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis coordinate of the center of the
- ellipse.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="EllipseElementRXAttribute"><span
- class="adef">rx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis radius of the ellipse.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="EllipseElementRYAttribute"><span
- class="adef">ry</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis radius of the ellipse.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="EllipseElementCXAttribute">cx</dfn>, <dfn id="EllipseElementCYAttribute">cy</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The coordinates of the center of the ellipse.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="EllipseElementRXAttribute">rx</dfn>, <dfn id="EllipseElementRYAttribute">ry</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The x- and y-axis radii of the ellipse. A negative value for
+ either attribute is an error (see
+ <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element.
+ </dd>
+</dl>
<p id="ExampleEllipse01">The arc of an <a>'ellipse'</a> element begins
at the "3 o'clock" point on the radius and progresses towards the "9
o'clock" point. The starting point and direction of the arc are affected
by the user space transform in the same manner as the geometry of the
element.</p>
<p><span class="example-ref">Example ellipse01</span> below specifies
@@ -439,57 +419,58 @@ ellipse). The second ellipse is rotated.
<edit:with element='line'>
<p>The <a>'line'</a> element defines a line segment that starts at one point
and ends at another.</p>
<edit:elementsummary name='line'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="LineElementX1Attribute"><span
- class="adef">x1</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis coordinate of the start of the line.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LineElementY1Attribute"><span
- class="adef">y1</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis coordinate of the start of the line.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LineElementX2Attribute"><span
- class="adef">x2</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The x-axis coordinate of the end of the line.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LineElementY2Attribute"><span
- class="adef">y2</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The y-axis coordinate of the end of the line.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="LineElementX1Attribute">x1</dfn>, <dfn id="EllipseElementY1Attribute">y1</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The x- and y-axis coordinates of the start of the line.
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="LineElementX2Attribute">x2</dfn>, <dfn id="EllipseElementY2Attribute">y2</dfn></td>
+ <td><a><length></a></td>
+ <td>0</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ The x- and y-axis coordinates of the end of the line.
+ </dd>
+</dl>
<p>Mathematically, a <a>'line'</a> element can be mapped to an
equivalent <a>'path'</a> element as follows: (Note: all coordinate and
length values are first converted into user space coordinates according
to <a href="coords.html#Units">Units</a>.)</p>
<ul>
<li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
@@ -521,33 +502,43 @@ lines have different thicknesses.</p>
<edit:with element='polyline'>
<p>The <a>'polyline'</a> element defines a set of connected straight
line segments. Typically, <a>'polyline'</a> elements define open
shapes.</p>
<edit:elementsummary name='polyline'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="PolylineElementPointsAttribute"><span
- class="adef">points</span> = "<span class="attr-value"><a
- href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt>
- <dd>The points that make up the polyline. All coordinate
- values are in the user coordinate system.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
-<p>If an odd number of coordinates is provided, then the element is in
-error, with the same user agent behavior as occurs with an incorrectly
-specified <a>'path'</a> element.</p>
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="PolylineElementPointsAttribute">points</dfn></td>
+ <td><a href="shapes.html#PointsBNF"><list-of-points></a></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The points that make up the polyline. All coordinate
+ values are in the user coordinate system.</p>
+ <p>If an odd number of coordinates is provided, then the element is in
+ error, with the same user agent behavior as occurs with an incorrectly
+ specified <a>'path'</a> element.</p>
+ </dd>
+</dl>
<p>Mathematically, a <a>'polyline'</a> element can be mapped to an
equivalent <a>'path'</a> element as follows:</p>
<ul>
<li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
operation to the first coordinate pair in the list of points</li>
@@ -568,33 +559,43 @@ below specifies a polyline in the user c
<edit:with element='polygon'>
<p>The <a>'polygon'</a> element defines a closed shape consisting of a
set of connected straight line segments.</p>
<edit:elementsummary name='polygon'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="PolygonElementPointsAttribute"><span
- class="adef">points</span> = "<span class="attr-value"><a
- href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt>
- <dd>The points that make up the polygon. All coordinate
- values are in the user coordinate system.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
-<p>If an odd number of coordinates is provided, then the element is in
-error, with the same user agent behavior as occurs with an incorrectly
-specified <a>'path'</a> element.</p>
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="PolygonElementPointsAttribute">points</dfn></td>
+ <td><a href="shapes.html#PointsBNF"><list-of-points></a></td>
+ <td>(none)</td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The points that make up the polygon. All coordinate
+ values are in the user coordinate system.</p>
+ <p>If an odd number of coordinates is provided, then the element is in
+ error, with the same user agent behavior as occurs with an incorrectly
+ specified <a>'path'</a> element.</p>
+ </dd>
+</dl>
<p>Mathematically, a <a>'polygon'</a> element can be mapped to an
equivalent <a>'path'</a> element as follows:</p>
<ul>
<li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a>
operation to the first coordinate pair in the list of points</li>
diff --git a/master/struct.html b/master/struct.html
--- a/master/struct.html
+++ b/master/struct.html
@@ -2120,16 +2120,23 @@ is split on spaces. </p>
<td>default</td>
<td>no</td>
</tr>
</table>
</dt>
<dd>
<p>The role value is a set of white-space separated machine-extractable semantic information used to define the purpose of the element.
</p>
+ <p class="issue">The "Value" entry in the attribute definition box above should
+ be a grammar, not a sentence. Maybe we can define a symbol <role> by
+ reference to the ARIA specification, and then define the attribute as taking
+ "role+".</p>
+ <p class="issue">The lacuna value is defined to be "default", but that's not
+ listed as one of the role names in the referenced ARIA section. What does
+ "default" mean?</p>
</dd>
</dl>
<h3 id="ARIAStateandPropertyAttributes">State and property attributes (all aria- attributes)</h3>
<p>Every renderable SVG element may have WAI-ARIA state and property attributes
specified. These attributes are defined by ARIA in
<a href="http://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a>
diff --git a/master/text.html b/master/text.html
--- a/master/text.html
+++ b/master/text.html
@@ -58,4677 +58,6892 @@
<td>Doug (no action)</td>
</tr>
</table>
</div>
<h2 id="Introduction">Introduction</h2>
-<p>Text that is to be rendered as part of an SVG document fragment is
-specified using the <a>'text'</a> element. The characters to be drawn are
-expressed as <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#syntax">XML character data</a>
-([<a href="refs.html#ref-XML10">XML10</a>], section 2.4)
-inside the <a>'text'</a> element.</p>
-
-<p>SVG's <a>'text'</a> elements are rendered like other graphics elements.
-Thus, <a href="coords.html">coordinate system transformations</a>,
-<a href="painting.html">painting</a>, <a href="masking.html">clipping</a> and
-<a href="masking.html">masking</a> features apply to <a>'text'</a> elements in
-the same way as they apply to <a>shapes</a> such as
-<a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a>.</p>
-
-<p>Each <a>'text'</a> element causes a single string of text to be rendered.
-SVG performs no automatic line breaking or word wrapping. To achieve the
-effect of multiple lines of text, use one of the following methods:</p>
-
-<ul>
- <li>The author or authoring package needs to pre-compute the line breaks and
- use multiple <a>'text'</a> elements (one for each line of text).</li>
-
- <li>The author or authoring package needs to pre-compute the line breaks and
- use a single <a>'text'</a> element with one or more <a>'tspan'</a> child
- elements with appropriate values for attributes <a>'tspan/x'</a>, <a>'tspan/y'</a>,
- <a>'tspan/dx'</a> and <a>'tspan/dy'</a> to set new start positions for those characters
- which start new lines. (This approach allows user text selection across
- multiple lines of text -- see
- <a href="text.html#TextSelection">Text selection and clipboard operations</a>.)</li>
-
- <li>Express the text to be rendered in another XML namespace such as XHTML
- [<a href="refs.html#ref-XHTML">XHTML</a>] embedded inline within a
- <a>'foreignObject'</a> element. (Note: the exact semantics of this approach
- are not completely defined at this time.)</li>
-</ul>
-
-<p>The text strings within <a>'text'</a> elements can be rendered in a
-straight line or rendered along the outline of a <a>'path'</a> element.
-SVG supports the following international text processing features for
-both straight line text and text on a path:</p>
-
-<ul>
- <li>horizontal and vertical orientation of text</li>
-
- <li>left-to-right or bidirectional text (i.e., languages
- which intermix right-to-left and left-to-right text, such as
- Arabic and Hebrew)</li>
-
- <li>when <a href="fonts.html#SVGFontsOverview">SVG fonts</a> are
- used, automatic selection of the correct glyph corresponding
- to the current form for
- <a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a>
- and <a href="fonts.html#GlyphElementLangAttribute">Han</a>
- text</li>
-</ul>
-
-<p>(The layout rules for straight line text are described in
-<a href="text.html#TextLayout">Text layout</a>. The layout rules for text on a
-path are described in <a href="text.html#TextpathLayoutRules">Text on a path
-layout rules</a>.)</p>
-
-<p>Because SVG text is packaged as XML character data:</p>
-
-<ul>
- <li>Text data in SVG content is readily accessible to the visually impaired
- (see <a href="access.html">Accessibility Support</a>)</li>
-
- <li>In many viewing scenarios, the user will be able to search for and select
- text strings and copy selected text strings to the system clipboard (see
- <a href="text.html#TextSelection">Text selection and clipboard operations</a>)</li>
-
- <li>XML-compatible Web search engines will find text strings in SVG
- content with no additional effort over what they need to do to find
- text strings in other XML documents</li>
-</ul>
-
-<p>Multi-language SVG content is possible by <a href="i18n.html#I18nTextSubstitution">substituting
-different text strings based on the user's preferred language</a>.</p>
-
-<p>For accessibility reasons, it is recommended that text which is
-included in a document have appropriate semantic markup to indicate
-its function. See <a href="access.html#SVGAccessibilityGuidelines">SVG
-accessibility guidelines</a> for more information.</p>
+ <p>
+ Text that is to be rendered as part of an SVG document fragment is
+ specified using the <a>'text'</a> element. The characters to be
+ drawn are expressed as
+ <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#syntax">XML
+ character data</a> ([<a href="refs.html#ref-XML10">XML10</a>],
+ section 2.4) inside the <a>'text'</a> element.
+ </p>
+
+ <p>
+ SVG's <a>'text'</a> elements are rendered like other graphics
+ elements. Thus, <a href="coords.html">coordinate system
+ transformations</a>, <a href="painting.html">painting</a>,
+ <a href="masking.html">clipping</a> and
+ <a href="masking.html">masking</a> features apply to
+ <a>'text'</a> elements in the same way as they apply to
+ <a>shapes</a> such as
+ <a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a>.
+ </p>
+
+ <p>
+ Each <a>'text'</a> element causes a section of text to be
+ rendered. The text can be rendered:
+ <ul>
+ <li>pre-formatted (with limited line wrapping),</li>
+ <li>auto-wrapped (if a <a>content area</a> is provided),</li>
+ <li>on a path (if a <a>'textPath'</a> element is provided).</li>
+ </ul>
+ </p>
+
+ <p>
+ SVG supports the following international text processing features for
+ all text:
+ <ul>
+ <li>horizontal and vertical orientation of text,</li>
+
+ <li>left-to-right or bidirectional text (i.e., languages
+ which intermix right-to-left and left-to-right text, such as
+ Arabic and Hebrew),</li>
+
+ <li>when <a href="fonts.html#SVGFontsOverview">SVG fonts</a> are
+ used, automatic selection of the correct glyph corresponding
+ to the current form for
+ <a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a>
+ and <a href="fonts.html#GlyphElementLangAttribute">Han</a>
+ text.</li>
+ <p class="issue">What about Hebrew, Hindi, etc.?</p>
+ </ul>
+ </p>
+
+ <p>
+ The section <a href="text.html#TextLayout">Text layout</a> gives an
+ introduction to text layout. It is followed by sections covering
+ <a href="text.html#TextLayoutContentArea">content areas</a>,
+ <a href="text.html#TextLayoutDirections">writing directions</a> and
+ <a href="text.html#TextLayoutPositioning">general glyph
+ positioning</a>. The specialized layout rules corresponding to
+ text that is
+ <a href="text.html#TextLayoutPre">pre-formatted</a>,
+ <a href="text.html#TextLayoutWrapped">auto-wrapped</a>, and
+ <a href="text.html#TextLayoutPath">on a path</a>
+ are then addressed in individual sections.
+ </p>
+
+ <p class="note">
+ Rules for text layout in SVG 1.1 are mostly defined within the SVG
+ 1.1 specification. The rules mirror to a large extent those found
+ in CSS. In SVG 2, the dependence on CSS is more explicit. In
+ practice the end layout is the same. The change to directly
+ relying on CSS specifications simplifies the SVG specification
+ while making it more obvious that rendering agents can use the
+ same code to both render text in HTML and in SVG. It also allows
+ the easy extension of SVG text layout to include things like
+ automatic text wrapping.
+ </p>
+
+ <p>
+ Because SVG text is packaged as XML character data:
+
+ <ul>
+ <li>
+ Text data in SVG content is readily accessible to the visually
+ impaired (see <a href="access.html">Accessibility
+ Support</a>),
+ </li>
+
+ <li>
+ In many viewing scenarios, the user will be able to search for
+ and select text strings and copy selected text strings to the
+ system clipboard (see <a href="text.html#TextSelection">Text
+ selection and clipboard operations</a>),
+ </li>
+
+ <li>
+ XML-compatible Web search engines will find text strings in
+ SVG content with no additional effort over what they need to
+ do to find text strings in other XML documents.
+ </li>
+ </ul>
+ </p>
+
+ <p>
+ Multi-language SVG content is possible by
+ <a href="i18n.html#I18nTextSubstitution">substituting different
+ text strings based on the user's preferred language</a>.
+ </p>
+
+ <p>
+ For accessibility reasons, it is recommended that text which is
+ included in a document have appropriate semantic markup to
+ indicate its function.
+ See <a href="access.html#SVGAccessibilityGuidelines">SVG
+ accessibility guidelines</a> for more information.
+ </p>
<h2 id="CharactersAndGlyphs">Characters and their corresponding glyphs</h2>
-<p>In XML [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>], textual content
-is defined in terms of a sequence of XML characters,
-where each character is defined by a particular Unicode code point
-[<a href="refs.html#ref-UNICODE">UNICODE</a>].
-Fonts, on the other hand, consist of a collection of
-<a>glyphs</a> and other associated information, such as
-<a href="text.html#FontsTablesBaselines">font tables</a>. A glyph is a
-presentable form of one or more characters (or a part of a character in some
-cases). Each glyph consists of some sort of identifier (in some cases a string,
-in other cases a number) along with drawing instructions for rendering that
-particular glyph.</p>
-
-<p>In many cases, there is a one-to-one mapping of Unicode
-characters (i.e., Unicode code points) to glyphs in a font. For
-example, it is common for a font designed for Latin languages
-(where the term <em>Latin</em> is used for European languages
-such as English with alphabets similar to and/or derivative to
-the Latin language) to contain a single glyph for each of the
-standard ASCII characters (i.e., A-to-Z, a-to-z, 0-to-9, plus
-the various punctuation characters found in ASCII). Thus, in
-most situations, the string "XML", which consists of three
-Unicode characters, would be rendered by the three glyphs
-corresponding to "X", "M" and "L", respectively.</p>
-
-<p>In various other cases, however, there is not a strict
-one-to-one mapping of Unicode characters to glyphs. Some of the
-circumstances when the mapping is not one-to-one:</p>
-
-<ul>
- <li>Ligatures - For best looking typesetting, it is often
- desirable that particular sequences of characters are
- rendered as a single glyph. An example is the word "office".
- Many fonts will define an "ffi" ligature. When the word
- "office" is rendered, sometimes the user agent will render
- the glyph for the "ffi" ligature instead of rendering
- distinct glyphs (i.e., "f", "f" and "i") for each of the
- three characters. Thus, for ligatures, multiple Unicode
- characters map to a single glyph. (Note that for proper
- rendering of some languages, ligatures are required for
- certain character combinations.)</li>
-
- <li>Composite characters - In various situations, commonly
- used adornments such as diacritical marks will be stored once
- in a font as a particular glyph and then composed with one or
- more other glyphs to result in the desired character. For
- example, it is possible that a font engine might render the
- <span class="code-fragment">é</span> character by
- first rendering the glyph for <span
- class="code-fragment">e</span> and then rendering the glyph
- for <span class="code-fragment">´</span> (the accent
- mark) such that the accent mark will appear over the <span
- class="code-fragment">e</span>. In this situation, a single
- Unicode character maps to multiple glyphs.</li>
-
- <li>Glyph substitution - Some typography systems examine the
- nature of the textual content and utilize different glyphs in
- different circumstances. For example, in Arabic, the same
- Unicode character might render as any of four different
- glyphs, depending on such factors as whether the character
- appears at the start, the end or the middle of a sequence of
- cursively joined characters. Different glyphs might be used
- for a punctuation character depending on
- inline-progression-direction (e.g., horizontal vs. vertical).
- In these situations, a single Unicode character might map to
- one of several alternative glyphs.</li>
-
- <li>In some languages, particular sequences of characters
- will be converted into multiple glyphs such that parts of a
- particular character are in one glyph and the remainder of
- that character is in another glyph.</li>
-
- <li>Alternative glyph specification - SVG contains a facility
- for the author to explicitly specify that a particular
- sequence of Unicode characters is to be rendered using a
- particular glyph. (See <a
- href="text.html#AlternateGlyphs">Alternate glyphs</a>.) When
- this facility is used, multiple Unicode characters map to a
- single glyph.</li>
-</ul>
-
-<p>In many situations, the algorithms for mapping from
-characters to glyphs are system-dependent, resulting in the
-possibility that the rendering of text might be (usually
-slightly) different when viewed in different user environments.
-If the author of SVG content requires precise selection of
-fonts and glyphs, then the recommendation is that the necessary
-fonts (potentially subsetted to include only the glyphs needed
-for the given document) be available either as <a
-href="fonts.html#SVGFontsOverview">SVG fonts</a> embedded within the
-SVG content or as <a
-href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#introduction">downloadable fonts</a>
-([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 1)
-posted at the same Web location as the SVG content.</p>
-
-<p>Throughout this chapter, the term <em>character</em> shall be equivalent to the
-definition of a character in XML [<a
-href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>].</p>
+ <p>
+ In XML
+ [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>],
+ textual content is defined in terms of a sequence of XML
+ characters, where each character is defined by a particular
+ Unicode code point [<a href="refs.html#ref-UNICODE">UNICODE</a>].
+ Fonts, on the other hand, consist of a collection of
+ <a>glyphs</a> and other associated information, such as
+ <a href="text.html#FontsTablesBaselines">font tables</a>. A glyph is a
+ presentable form of one or more characters (or a part of a character
+ in some cases). Each glyph consists of some sort of identifier (in
+ some cases a string, in other cases a number) along with drawing
+ instructions for rendering that particular glyph.
+ </p>
+
+ <p>
+ In many cases, there is a one-to-one mapping of Unicode characters
+ (i.e., Unicode code points) to glyphs in a font. For example, it
+ is common for a font designed for Latin languages (where the
+ term <em>Latin</em> is used for European languages such as English
+ with alphabets similar to and/or derivative to the Latin language)
+ to contain a single glyph for each of the standard ASCII
+ characters (i.e., A-to-Z, a-to-z, 0-to-9, plus the various
+ punctuation characters found in ASCII). Thus, in most situations,
+ the string "XML", which consists of three Unicode characters,
+ would be rendered by the three glyphs corresponding to "X", "M"
+ and "L", respectively.
+ </p>
+
+ <p>
+ In various other cases, however, there is not a strict one-to-one
+ mapping of Unicode characters to glyphs. Some of the circumstances
+ when the mapping is not one-to-one:
+ </p>
+
+ <ul>
+ <li>
+ Ligatures – For best looking typesetting, it is often desirable
+ that particular sequences of characters are rendered as a single
+ glyph. An example is the word "office". Many fonts will define
+ an "ffi" ligature. When the word "office" is rendered, sometimes
+ the user agent will render the glyph for the "ffi" ligature
+ instead of rendering distinct glyphs (i.e., "f", "f" and "i")
+ for each of the three characters. Thus, for ligatures, multiple
+ Unicode characters map to a single glyph. (Note that for proper
+ rendering of some languages, ligatures are required for certain
+ character combinations.)
+ </li>
+
+ <li>
+ Composite characters – In various situations, commonly used
+ adornments such as diacritical marks will be stored once in a
+ font as a particular glyph and then composed with one or more
+ other glyphs to result in the desired character. For example, it
+ is possible that a font engine might render the
+ <span class="code-fragment">é</span> character by first
+ rendering the glyph for <span class="code-fragment">e</span> and
+ then rendering the glyph for
+ <span class="code-fragment">´</span> (the accent mark)
+ such that the accent mark will appear over
+ the <span class="code-fragment">e</span>. In this situation, a
+ single Unicode character maps to multiple glyphs.
+ </li>
+
+ <li>
+ Glyph substitution – Some typography systems examine the nature
+ of the textual content and utilize different glyphs in different
+ circumstances. For example, in Arabic, the same Unicode
+ character might render as any of four different glyphs,
+ depending on such factors as whether the character appears at
+ the start, the end or the middle of a sequence of cursively
+ joined characters. Different glyphs might be used for a
+ punctuation character depending on inline-progression-direction
+ (e.g., horizontal vs. vertical). In these situations, a single
+ Unicode character might map to one of several alternative
+ glyphs.
+ </li>
+
+ <li>
+ In some languages, particular sequences of characters will be
+ converted into multiple glyphs such that parts of a particular
+ character are in one glyph and the remainder of that character
+ is in another glyph.
+ </li>
+
+ <li>
+ Alternative glyph specification – SVG contains a facility for
+ the author to explicitly specify that a particular sequence of
+ Unicode characters is to be rendered using a particular
+ glyph. (See <a href="text.html#AlternateGlyphs">Alternate
+ glyphs</a>.) When this facility is used, multiple Unicode
+ characters map to a single glyph.
+ </li>
+ </ul>
+
+ <p>
+ In many situations, the algorithms for mapping from characters to
+ glyphs are system-dependent, resulting in the possibility that the
+ rendering of text might be (usually slightly) different when
+ viewed in different user environments. If the author of SVG
+ content requires precise selection of fonts and glyphs, then the
+ recommendation is that the necessary fonts (potentially subsetted
+ to include only the glyphs needed for the given document) be
+ available either as <a href="fonts.html#SVGFontsOverview">SVG
+ fonts</a> embedded within the SVG content or as
+ <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#introduction">downloadable
+ fonts</a> ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>],
+ section 1) posted at the same Web location as the SVG content.
+ </p>
+
+ <p>
+ Throughout this chapter, the term <em>character</em> shall be
+ equivalent to the definition of a character in XML
+ [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>].
+ </p>
<h2 id="FontsTablesBaselines">Fonts, font tables and baselines</h2>
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Support text aligned to different baselines.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2012/03/15-svg-irc#T21-07-21">SVG 2 will support glyphs being aligned to different baselines, perhaps by using existing or improved CSS properties.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To allow glyphs in horizontal text to have different vertical alignments for stylistic effects.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Chris (no action)</td>
- </tr>
- </table>
-</div>
-
-<p>A font consists of a collection of glyphs together with the
-information (the font tables) necessary to use those glyphs to
-present characters on some medium. The combination of the
-collection of glyphs and the font tables is called the <em>font
-data</em>. The font tables include the information necessary to
-map characters to glyphs, to determine the size of glyph areas
-and to position the glyph area. Each font table consists of one
-or more font characteristics, such as the font-weight and
-font-style.</p>
-
-<p>The geometric font characteristics are expressed in a
-coordinate system based on the EM box. (The EM is a relative
-measure of the height of the glyphs in the font.)
-The box 1 EM high and 1 EM wide is called the
-<em>design space</em>. This space is given a geometric
-coordinates by sub-dividing the EM into a number of <em>units
-per em</em>.</p>
-
-<p>Note: Units per em is a font characteristic. A typical value
-for units per em is 1000 or 2048.</p>
-
-<p>The coordinate space of the EM box is called the <em>design
-space coordinate system</em>. For scalable fonts, the curves
-and lines that are used to draw a glyph are represented using
-this coordinate system.</p>
-
-<p>Note: Most often, the (0,0) point in this coordinate system
-is positioned on the left edge of the EM box, but not at the
-bottom left corner. The Y coordinate of the bottom of a roman
-capital letter is usually zero. And the descenders on lowercase
-roman letters have negative coordinate values.</p>
-
-<p>SVG assumes that the font tables will provide at least three
-font characteristics: an ascent, a descent and a set of
-baseline-tables. The ascent is the distance to the top of the
-EM box from the (0,0) point of the font; the descent is the
-distance to the bottom of the EM box from the (0.0) point of
-the font. The baseline-table is explained below.</p>
-
-<p>Note: Within an OpenType font, for horizontal writing-modes,
-the ascent and descent are given by the sTypoAscender and
-sTypoDescender entries in the OS/2 table. For vertical
-writing-modes, the descent (the distance, in this case from the
-(0,0) point to the left edge of the glyph) is normally zero
-because the (0,0) point is on the left edge. The ascent for
-vertical writing-modes is either 1 em or is specified by the
-ideographic top baseline value in the OpenType Base table for
-vertical writing-modes.</p>
-
-<p>In horizontal writing-modes, the glyphs of a given script
-are positioned so that a particular point on each glyph, the
-<em><a
-href="text.html#AlignmentPoint">alignment-point</a></em>, is
-aligned with the alignment-points of the other glyphs in that
-script. The glyphs of different scripts, for example, Western,
-Northern Indic and Far-Eastern scripts, are typically aligned
-at different points on the glyph. For example, Western glyphs
-are aligned on the bottoms of the capital letters, northern
-indic glyphs are aligned at the top of a horizontal stroke near
-the top of the glyphs and far-eastern glyphs are aligned either
-at the bottom or center of the glyph. Within a script and
-within a line of text having a single font-size, the sequence
-of alignment-points defines, in the inline-
-progression-direction, a geometric line called a
-<em>baseline</em>. Western and most other alphabetic and
-syllabic glyphs are aligned to an "alphabetic" baseline, the
-northern indic glyphs are aligned to a "hanging" baseline and
-the far-eastern glyphs are aligned to an "ideographic"
-baseline.</p>
-
-<p>A <em>baseline-table</em> specifies the position of one or
-more baselines in the design space coordinate system. The
-function of the baseline table is to facilitate the alignment
-of different scripts with respect to each other when they are
-mixed on the same text line. Because the desired relative
-alignments may depend on which script is dominant in a line (or
-block), there may be a different baseline table for each
-script. In addition, different alignment positions are needed
-for horizontal and vertical writing modes. Therefore, the font
-may have a set of baseline tables: typically, one or more for
-horizontal writing-modes and zero or more for vertical
-writing-modes.</p>
-
-<p>Note: Some fonts may not have values for the baseline
-tables. Heuristics are suggested for approximating the baseline
-tables when a given font does not supply baseline tables.</p>
-
-<p>SVG further assumes that for each glyph in the font data for
-a font, there are two width values, two alignment-baselines and
-two alignment-points, one each for horizontal writing-modes and
-the other for vertical writing-modes. (Even though it is
-specified as a width, for vertical writing-modes the width is
-used in the vertical direction.) The script to which a glyph
-belongs determines an alignment-baseline to which the glyph is
-to be aligned. The <a
-href="text.html#InlineProgressionDirection">inline-progression-direction</a>
-position of the alignment-point is on the start-edge of the
-glyph.</p>
-
-<p>Properties related to baselines are described below under <a
-href="text.html#BaselineAlignmentProperties">Baseline alignment
-properties</a>.</p>
-
-<p>In addition to the font characteristics required above, a
-font may also supply substitution and positioning tables that
-can be used by a formatter to re-order, combine and position a
-sequence of glyphs to make one or more composite glyphs. The
-combination may be as simple as a ligature, or as complex as an
-indic syllable which combines, usually with some re-ordering,
-multiple consonants and vowel glyphs.</p>
-
+ <div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Requirement:</th>
+ <td>Support text aligned to different baselines.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://www.w3.org/2012/03/15-svg-irc#T21-07-21">SVG 2 will support glyphs being aligned to different baselines, perhaps by using existing or improved CSS properties.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>To allow glyphs in horizontal text to have different vertical alignments for stylistic effects.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Chris (no action)</td>
+ </tr>
+ </table>
+ </div>
+
+ <p>
+ A font consists of a collection of glyphs together with the
+ information (the font tables) necessary to use those glyphs to
+ present characters on some medium. The combination of the
+ collection of glyphs and the font tables is called the <em>font
+ data</em>. The font tables include the information necessary to
+ map characters to glyphs, to determine the size of glyph areas and
+ to position the glyph area. Each font table consists of one or
+ more font characteristics, such as the font-weight and
+ font-style.
+ </p>
+
+ <p>
+ The geometric font characteristics are expressed in a coordinate
+ system based on the EM box. (The EM is a relative measure of the
+ height of the glyphs in the font.) The box 1 EM high and 1 EM
+ wide is called the <em>design space</em>. This space is given a
+ geometric coordinates by sub-dividing the EM into a number
+ of <em>units per em</em>.
+ </p>
+
+ <p class="note">
+ Units per em is a font characteristic. A typical value
+ for units per em is 1000 or 2048.
+ </p>
+
+ <p>
+ The coordinate space of the EM box is called the <em>design space
+ coordinate system</em>. For scalable fonts, the curves and lines
+ that are used to draw a glyph are represented using this
+ coordinate system.
+ </p>
+
+ <p class="note">
+ Most often, the (0,0) point in this coordinate system is
+ positioned on the left edge of the EM box, but not at the bottom
+ left corner. The Y coordinate of the bottom of a roman capital
+ letter is usually zero. And the descenders on lowercase roman
+ letters have negative coordinate values.
+ </p>
+ <p class="issue">Insert figure.</p>
+
+ <p>
+ SVG assumes that the font tables will provide at least three font
+ characteristics: an ascent, a descent and a set of
+ baseline-tables. The ascent is the distance to the top of the EM
+ box from the (0,0) point of the font; the descent is the distance
+ to the bottom of the EM box from the (0.0) point of the font. The
+ baseline-table is explained below.
+ </p>
+
+ <p class="note">
+ Within an OpenType font, for horizontal writing-modes,
+ the ascent and descent are given by the sTypoAscender and
+ sTypoDescender entries in the OS/2 table. For vertical writing-modes,
+ the descent (the distance, in this case from the (0,0) point to the
+ left edge of the glyph) is normally zero because the (0,0) point is on
+ the left edge. The ascent for vertical writing-modes is either 1 em or
+ is specified by the ideographic top baseline value in the OpenType
+ Base table for vertical writing-modes.
+ </p>
+
+ <p>
+ In horizontal writing-modes, the glyphs of a given script
+ are positioned so that a particular point on each glyph, the
+ <em><a href="text.html#AlignmentPoint">alignment-point</a></em>,
+ is aligned with the alignment-points of the other glyphs in that
+ script. The glyphs of different scripts, for example, Western,
+ Northern Indic and Far-Eastern scripts, are typically aligned at
+ different points on the glyph. For example, Western glyphs are
+ aligned on the bottoms of the capital letters, northern indic
+ glyphs are aligned at the top of a horizontal stroke near the top
+ of the glyphs and far-eastern glyphs are aligned either at the
+ bottom or center of the glyph. Within a script and within a line
+ of text having a single font-size, the sequence of
+ alignment-points defines, in the inline- progression-direction, a
+ geometric line called a <em>baseline</em>. Western and most other
+ alphabetic and syllabic glyphs are aligned to an "alphabetic"
+ baseline, the northern indic glyphs are aligned to a "hanging"
+ baseline and the far-eastern glyphs are aligned to an
+ "ideographic" baseline.
+ </p>
+ <p class="issue">Insert figure.</p>
+
+ <p>
+ A <em>baseline-table</em> specifies the position of one or more
+ baselines in the design space coordinate system. The function of
+ the baseline table is to facilitate the alignment of different
+ scripts with respect to each other when they are mixed on the same
+ text line. Because the desired relative alignments may depend on
+ which script is dominant in a line (or block), there may be a
+ different baseline table for each script. In addition, different
+ alignment positions are needed for horizontal and vertical writing
+ modes. Therefore, the font may have a set of baseline tables:
+ typically, one or more for horizontal writing-modes and zero or
+ more for vertical writing-modes.
+ </p>
+
+ <p class="note">
+ Some fonts may not have values for the baseline tables. Heuristics
+ are suggested for approximating the baseline tables when a given
+ font does not supply baseline tables.
+ </p>
+
+ <p>
+ SVG further assumes that for each glyph in the font data for a
+ font, there are two width values, two alignment-baselines and two
+ alignment-points, one each for horizontal writing-modes and the
+ other for vertical writing-modes. (Even though it is specified as
+ a width, for vertical writing-modes the width is used in the
+ vertical direction.) The script to which a glyph belongs
+ determines an alignment-baseline to which the glyph is to be
+ aligned. The
+ <a href="text.html#InlineProgressionDirection">inline-progression-direction</a>
+ position of the alignment-point is on the start-edge of the glyph.
+ </p>
+
+ <p>
+ Properties related to baselines are described below under
+ <a href="text.html#BaselineAlignmentProperties">Baseline alignment
+ properties</a>.
+ </p>
+
+ <p>
+ In addition to the font characteristics required above, a font may
+ also supply substitution and positioning tables that can be used
+ by a formatter to re-order, combine and position a sequence of
+ glyphs to make one or more composite glyphs. The combination may
+ be as simple as a ligature, or as complex as an indic syllable
+ which combines, usually with some re-ordering, multiple consonants
+ and vowel glyphs.
+ </p>
+
+ <div class="issue">
+ <p>
+ The discussion of vertical text (CJK and Mongolian) is
+ lacking. Here are some notes:
+ <ul>
+ <li>Some Japanese opentype fonts have different glyphs for horizontal and vertical text.</li>
+ <li>Kanji is set in a box 1 zenkaku width x 1 zenkaku width.</li>
+ <li>Kanji baseline divides box into 88:12 ratio.</li>
+ <li>Japanese/Latin mixed, 1 zenkaku should be slightly smaller than 1 em (ex. 10pt: 3.25mm vs 3.51mm).</li>
+ <li>See: <a href="http://ajt.ktug.org/2008/0201okumura.pdf">pTEX and Japanese Typesetting</a>.</li>
+ <li>Vertical kana can have ligatures!</li>
+ <li>At least one proportional (horizontal and vertical) Japanese font exists.</li>
+ <li>See: <a href="http://www.imug.org/presentations/imug-lunde-09162010.pdf">Kazuraki: Adobe Systems' Groundbreaking New Japanese Typeface</a>.</li>
+ </ul>
+ </p>
+ </div>
+
+
<h2 id="TextElement">The <span class="element-name">'text'</span> element</h2>
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Have a DOM method to convert a <a>'text'</a> element to outline path data.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2012/01/13-svg-irc#T05-07-07">We will add a DOM method to convert a <span class='element-name'>'text'</span> element to outline path data, possibly moving the functionality to the FXTF.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To allow manipualtion of text as a path.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3076">ACTION-3076</a>)</td>
- </tr>
- </table>
-</div>
-
-<edit:with element='text'>
-
-<p>The <a>'text'</a> element defines
-a graphics element consisting of text. The XML
-character data within the <a>'text'</a> element, along with relevant attributes
-and properties and character-to-glyph mapping tables within
-the font itself, define the glyphs to be rendered. (See
-<a href="text.html#CharactersAndGlyphs">Characters and their corresponding
-glyphs</a>.) The attributes and properties on the <a>'text'</a>
-element indicate such things as the writing direction, font
-specification and painting attributes which describe how exactly
-to render the characters. Subsequent sections of this chapter
-describe the relevant text-specific attributes and properties,
-particular <a href="text.html#TextLayout">text layout</a> and
-<a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>.</p>
-
-<p>Since <a>'text'</a> elements are
-rendered using the same rendering methods as other graphics
-elements, all of the same <a href="coords.html">coordinate
-system transformations</a>, <a
-href="painting.html">painting</a>, <a
-href="masking.html">clipping</a> and <a
-href="masking.html">masking</a> features that apply to <a>shapes</a> such as <a
-href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a> also apply to
-<a>'text'</a> elements.</p>
-
-<p id="ObjectBoundingBoxUnitsTextObjects">It is possible to apply
-a gradient, pattern, clipping path, mask or filter to text. When
-one of these facilities is applied to text and keyword
-<span class="attr-value">'objectBoundingBox'</span> is used (see
-<a href="coords.html#ObjectBoundingBox">Object bounding box units</a>)
-to specify a graphical effect relative to the "object bounding box",
-then the object bounding box units are computed relative to the entire
-<a>'text'</a> element in all cases, even when different effects
-are applied to different <a>'tspan'</a> elements within the same
-<a>'text'</a> element.</p>
-
-<p>The <a>'text'</a> element renders its first glyph (after
-<a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
-reordering) at the initial <a href="text.html#CurrentTextPosition">current
-text position</a>, which is established by the <a>'x'</a> and <a>'y'</a>
-attributes on the <a>'text'</a> element (with possible adjustments
-due to the value of the <a>'text-anchor'</a> property, the presence
-of a <a>'textPath'</a> element containing the first character,
-and/or an <a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a> or
-<a>'tspan/dy'</a> attributes on a <a>'tspan'</a>, <a>'tref'</a> or
-<a>'altGlyph'</a> element which contains the first character). After
-the glyph(s) corresponding to the given character is(are) rendered, the
-current text position is updated for the next character. In the simplest
-case, the new current text position is the previous current text
-position plus the glyphs' advance value (horizontal or vertical). See
-<a href="text.html#TextLayout">text layout</a> for a description of glyph
-placement and glyph advance.</p>
-
-<edit:elementsummary name='text'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="TextElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>If a single <a
- href="types.html#DataTypeLength"><length></a>
- is provided, then the value represents the new absolute X
- coordinate for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> for rendering the glyphs that correspond to
- the first character within this element or any of its
- descendants.<br />
- If a comma- or space-separated list of <var>n</var> <a
- href="types.html#DataTypeLength"><length></a>s
- is provided, then the values represent new absolute X
- coordinates for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> for rendering the glyphs corresponding to each
- of the first <var>n</var> characters within this element or
- any of its descendants.<br />
- For additional processing rules, refer to the description
- of the <a>'tspan/x'</a> attribute on the <a>'tspan'</a> element.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>The corresponding list of absolute Y coordinates for
- the glyphs corresponding to the characters within this
- element. The processing rules for the <a>'y'</a> attribute parallel the
- processing rules for the <a>'x'</a> attribute.<br />
- If the attribute is not specified, the effect is as if a
- value of "0" were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextElementDXAttribute"><span
- class="adef">dx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>Shifts in the <a
- href="text.html#CurrentTextPosition">current text
- position</a> along the x-axis for the characters within
- this element or any of its descendants.<br />
- Refer to the description of the <a>'tspan/dx'</a> attribute on the
- <a>'tspan'</a> element.<br />
- If the attribute is not specified on this element or any
- of its descendants, no supplemental shifts along the x-axis
- will occur.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextElementDYAttribute"><span
- class="adef">dy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>Shifts in the <a
- href="text.html#CurrentTextPosition">current text
- position</a> along the y-axis for the characters within
- this element or any of its descendants.<br />
- Refer to the description of the <a>'tspan/dy'</a> attribute on the
- <a>'tspan'</a> element.<br />
- If the attribute is not specified on this element or any
- of its descendants, no supplemental shifts along the y-axis
- will occur.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextElementRotateAttribute"><span
- class="adef">rotate</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
- <dd>The supplemental rotation about the <a
- href="text.html#CurrentTextPosition">current text
+ <edit:with element='text'>
+
+ <p>
+ The <a>'text'</a> element defines a graphics element consisting of
+ text. The XML character data within the <a>'text'</a> element,
+ along with relevant attributes and properties, and
+ character-to-glyph mapping tables within the font itself, define
+ the glyphs to be rendered. (See
+ <a href="text.html#CharactersAndGlyphs">Characters and their
+ corresponding glyphs</a>.) The attributes and properties on
+ the <a>'text'</a> element indicate such things as the writing
+ direction, font specification, and painting attributes which
+ describe how exactly to render the characters. Subsequent sections
+ of this chapter describe the relevant text-specific attributes and
+ properties, particular <a href="text.html#TextLayout">text
+ layout</a> and
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>.
+ </p>
+
+ <p>
+ Since <a>'text'</a> elements are rendered using the same rendering
+ methods as other graphics elements, all of the same
+ <a href="coords.html">coordinate system transformations</a>,
+ <a href="painting.html">painting</a>,
+ <a href="masking.html">clipping</a>, and
+ <a href="masking.html">masking</a> features that apply to
+ <a>shapes</a> such as <a href="paths.html">paths</a> and
+ <a href="shapes.html#RectElement">rectangles</a> also apply to
+ <a>'text'</a> elements.
+ </p>
+
+ <p id="ObjectBoundingBoxUnitsTextObjects">
+ It is possible to apply a gradient, pattern, clipping path, mask
+ or filter to text. When one of these facilities is applied to text
+ and keyword <span class="attr-value">'objectBoundingBox'</span> is
+ used (see
+ <a href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) to specify a graphical effect relative to the "object
+ bounding box", then the object bounding box units are computed
+ relative to the entire <a>'text'</a> element in all cases, even
+ when different effects are applied to different <a>'tspan'</a>
+ elements within the same <a>'text'</a> element.
+ </p>
+
+ <p>
+ The <a>'text'</a> element renders its first glyph (after
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+ reordering) at the initial <a>current text position</a> (with
+ possible adjustments due to the value of the
+ <a>'text-anchor'</a> property or the <a>'text-align'</a> property).
+ For pre-formatted text and for auto-wrapped text where the
+ <a>content area</a> is determined by a <a>'text/width'</a>
+ or <a>'text/height'</a> attribute, the initial <a>current text
+ position</a> is determined by the <a>'tspan/x'</a> and
+ <a>'tspan/y'</a> values of the <a>'text'</a>, <a>'tspan'</a>,
+ <a>'tref'</a>, or <a>'altGlyph'</a> element which contains the
+ first rendered character.
+
+ For auto-wrapped text in a shape or text on a path see
+ the <a href="text.html#TextLayoutAuto">Auto-wrapped text</a> or
+ <a href="text.html#TextLayoutPath">Text on a path</a> sections,
+ respectively, to determine the initial <a>current text
+ position</a>.
+
+ After the glyph(s) corresponding to the given character is (are)
+ rendered, the current text position is updated for the next
+ character. In the simplest case, the new current text position is
+ the previous current text position plus the glyphs' advance value
+ (horizontal or vertical). See
+ <a href="text.html#TextLayout">text layout</a> for a description
+ of glyph placement and glyph advance.
+ </p>
+
+ <edit:elementsummary name='text'/>
+
+<h3 id="TextAttributes">Attributes</h3>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="TextElementXAttribute"><span class="adef">x</span></dt>
+ <dd>
+
+ <p>
+ If a single
+ <a href="types.html#DataTypeLength"><length></a> is
+ provided, then the value represents the new absolute X
+ coordinate for the <a>current text position</a> for rendering
+ the glyphs that correspond to the first character within this
+ element or any of its descendants.
+ </p>
+ <p>
+ If a comma- or space-separated list of <var>n</var>
+ <a href="types.html#DataTypeLength"><length></a>s is
+ provided, then the values represent new absolute X coordinates
+ for the <a>current text position</a> for rendering the glyphs
+ corresponding to each of the first <var>n</var> characters
+ within this element or any of its descendants.
+ </p>
+ <p>
+ For additional processing rules, refer to the description of
+ the <a>'tspan/x'</a> attribute on the <a>'tspan'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-coordinates></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementYAttribute"><span class="adef">y</span></dt>
+ <dd>
+
+ <p>
+ The corresponding list of absolute Y coordinates for the
+ glyphs corresponding to the characters within this
+ element. The processing rules for the <a>'y'</a> attribute
+ parallel the processing rules for the <a>'x'</a> attribute.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-coordinates></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementDXAttribute"><span class="adef">dx</span></dt>
+ <dd>
+
+ <p>
+ Shifts in the <a>current text position</a> along the x-axis
+ for the characters within this element or any of its
+ descendants.
+ </p>
+ <p>
+ Refer to the description of the <a>'tspan/dx'</a> attribute on
+ the <a>'tspan'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-lengths></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>If not specified on this element or any of its descendants, no supllemental shifts along the x-axis will occur.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementDYAttribute"><span class="adef">dy</span></dt>
+ <dd>
+
+ <p>
+ Shifts in the <a>current text position</a> along the y-axis
+ for the characters within this element or any of its
+ descendants.
+ </p>
+ <p>
+ Refer to the description of the <a>'tspan/dy'</a> attribute on
+ the <a>'tspan'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-lengths></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>If not specified on this element or any of its descendants, no supllemental shifts along the y-axis will occur.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementRotateAttribute"><span class="adef">rotate</span></dt>
+ <dd>
+
+ <p>
+ The supplemental rotation about the <a>current text
position</a> that will be applied to all of the glyphs
- corresponding to each character within this element.<br />
- Refer to the description of the <a>'tspan/rotate'</a> attribute on the
- <a>'tspan'</a> element.<br />
- If the attribute is not specified on this element or any
- of its descendants, no supplemental rotations will
- occur.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: yes
- (non-additive).</span></dd>
- <dt id="TextElementTextLengthAttribute"><span
- class="adef">textLength</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The author's computation of the total sum of all of the
- advance values that correspond to character data within
- this element, including the advance value on the glyph
- (horizontal or vertical), the effect of properties
- <a>'letter-spacing'</a> and <a>'word-spacing'</a>
- and adjustments due to attributes <a>'tspan/dx'</a> and
- <a>'tspan/dy'</a> on <a>'tspan'</a> elements. This
- value is used to calibrate the user agent's own
- calculations with that of the author.<br />
- The purpose of this attribute is to allow the author to
+ corresponding to each character within this element.
+ </p>
+ <p>
+ Refer to the description of the <a>'tspan/rotate'</a> attribute on the
+ <a>'tspan'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumbers"><list-of-numbers></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>If not specified on this element or any of its descendants, no supllemental rotations will occur.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes (non-additive).</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementTextLengthAttribute"><span class="adef">textLength</span></dt>
+ <dd>
+
+ <p>
+ The author's computation of the total sum of all of the
+ advance values that correspond to character data within this
+ element, including the advance value on the glyph (horizontal
+ or vertical), the effect of properties
+ <a>'letter-spacing'</a> and <a>'word-spacing'</a> and
+ adjustments due to attributes <a>'tspan/dx'</a> and
+ <a>'tspan/dy'</a> on <a>'tspan'</a> elements. This value is
+ used to calibrate the user agent's own calculations with that
+ of the author.
+ </p>
+ <p>
+ The purpose of this attribute is to allow the author to
achieve exact alignment, in visual rendering order after
- any <a
- href="text.html#RelationshipWithBiDirectionality">bidirectional
+ any <a href="text.html#RelationshipWithBiDirectionality">bidirectional
reordering</a>, for the first and last rendered glyphs that
correspond to this element; thus, for the last rendered
- character (in visual rendering order after any <a
- href="text.html#RelationshipWithBiDirectionality">bidirectional
+ character (in visual rendering order after
+ any <a href="text.html#RelationshipWithBiDirectionality">bidirectional
reordering</a>), any supplemental inter-character spacing
- beyond normal glyph advances are ignored (in most cases)
- when the user agent determines the appropriate amount to
+ beyond normal glyph advances are ignored (in most cases) when
+ the user agent determines the appropriate amount to
expand/compress the text string to fit within a length of
- <a>'textLength'</a>.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).<br />
- If the attribute is not specified, the effect is as if the
- author's computation exactly matched the value calculated
- by the user agent; thus, no advance adjustments are
- made.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextElementLengthAdjustAttribute"><span
- class="adef">lengthAdjust</span> = "<span
- class="attr-value">spacing|spacingAndGlyphs</span>"</dt>
- <dd>Indicates the type of adjustments which the user agent
+ <a>'textLength'</a>.
+ </p>
+ <p class="note">
+ This property is not intended for use to obtain effects such
+ as shrinking or expanding text.
+ </p>
+ <p>
+ A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>).
+ </p>
+ <p>
+ If the attribute is not specified anywhere within a
+ <a>'text'</a> element, the effect is as if the author's
+ computation exactly matched the value calculated by the user
+ agent; thus, no advance adjustments are made.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLength"><length></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementLengthAdjust"><span class="adef">lengthAdjust</span></dt>
+ <dd>
+
+ <p>
+ Indicates the type of adjustments which the user agent
shall make to make the rendered length of the text match
- the value specified on the <a>'textLength'</a> attribute.<br />
- <span class="attr-value">'spacing'</span> indicates that
- only the advance values are adjusted. The glyphs themselves
- are not stretched or compressed.<br />
- <span class="attr-value">'spacingAndGlyphs'</span> indicates
- that the advance values are adjusted and the glyphs
- themselves stretched or compressed in one axis (i.e., a
- direction parallel to the
- inline-progression-direction).<br />
- The user agent is required to achieve correct start and
- end positions for the text strings, but the locations of
+ the value specified on the <a>'textLength'</a> attribute.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd>spacing|spacingAndGlyphs</dd>
+ <dt><a>Lacuna value</a></dt> <dd>spacing</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>spacing</dt>
+ <dd>
+ Indicates that only the advance values are adjusted. The
+ glyphs themselves are not stretched or compressed.
+ </dd>
+
+ <dt>spacingAndGlyphs</dt>
+ <dd>
+ Indicates that the advance values are adjusted and the
+ glyphs themselves stretched or compressed in one axis (i.e.,
+ a direction parallel to the inline-progression-direction).
+ </dd>
+ </dl>
+
+ <p>
+ The user agent is required to achieve correct start and end
+ positions for the text strings, but the locations of
intermediate glyphs are not predictable because user agents
- might employ advanced algorithms to stretch or compress
- text strings in order to balance correct start and end
- positioning with optimal typography.<br />
- Note that, for a text string that contains <var>n</var>
- characters, the adjustments to the advance values often
- occur only for <var>n</var>−1 characters (see description of
- attribute <a>'textLength'</a>), whereas
- stretching or compressing of the glyphs will be applied to
- all <var>n</var> characters.<br />
- If the attribute is not specified, the effect is as a
- value of <span class="attr-value">'spacing'</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
+ might employ advanced algorithms to stretch or compress text
+ strings in order to balance correct start and end positioning
+ with optimal typography.
+ </p>
+ <p>
+ Note that, for a text string that contains <var>n</var>
+ characters, the adjustments to the advance values often occur
+ only for <var>n</var>−1 characters (see description of
+ attribute <a>'textLength'</a>), whereas stretching or
+ compressing of the glyphs will be applied to all <var>n</var>
+ characters.
+ </p>
+ </dd>
+
+ <dt id="TextElementHeight"><span class="adef">height</span></dt>
+ <dd>
+ <p class="annotation">Added according to Resolution from June 27th, 2013.</p>
+ <p>
+ Establishes a rectangular <a>content area</a> for vertical
+ text with the specified height. If <a>'width'</a> is also
+ given, defines the height of a rectangular <a>content
+ area</a> for horizontal text. It does not establish a
+ <a>content area</a> for horizontal text if <a>'width'</a>
+ is not also specified. See
+ the <a href="text.html#TextLayoutContentArea">Content Area</a>
+ section.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLength"><length></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>As if not specified.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementWidth"><span class="adef">width</span></dt>
+ <dd>
+ <p class="annotation">Redefined according to Resolution from June 27th, 2013.</p>
+ <p>
+ Establishes a rectangular <a>content area</a> for horizontal
+ text with the specified width. If <a>'height'</a> is also
+ given, defines the width of a rectangular <a>content
+ area</a> for vertical text. It does not establish a
+ <a>content area</a> for vertical text if <a>'height'</a>
+ is not also specified. See
+ the <a href="text.html#TextLayoutContentArea">Content Area</a>
+ section.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLength"><length></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>As if not specified.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ </dl>
+
+ <p id="ExampleText01">
+ <span class="example-ref">Example text01</span> below contains the
+ text string "Hello, out there" which will be rendered onto the
+ canvas using the Verdana font family with the glyphs filled with
+ the color blue.
+ </p>
+
+
+ <edit:example href='images/text/text01.svg' name='test01' description="'Hello, out there' in blue" image='yes' link='yes'/>
+
+ </edit:with>
+
+<h2 id="TSpanElement">The <span class="element-name">'tspan'</span> element</h2>
+
+ <div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Requirement:</th>
+ <td>Allow transforms on <a>'tspan'</a>.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://www.w3.org/2011/12/01-svg-irc#T21-02-34">SVG 2 will allow transforms on <span class="element-name">'tspan'</span>.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>Align with other elements such as <a>'a'</a> which already allow transforms.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Cameron (no action)</td>
+ </tr>
+ </table>
+ </div>
+
+ <edit:with element='tspan'>
+
+ <p>
+ Within a <a>'text'</a> element, text and font properties can be
+ changed by including a <span class="element-name">'tspan'</span>
+ element.
+
+ A <span class="element-name">'tspan'</span> element can also be
+ used to adjust the <a>current text position</a> with absolute or
+ relative coordinate values (some restrictions apply for
+ auto-wrapped text and text on a path).
+ </p>
+
+ <edit:elementsummary name='tspan'/>
+
+<h3 id="TSpanAttributes">Attributes</h3>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="TSpanElementXAttribute"><span class="adef">x</span></dt>
+ <dd>
+
+ <p>
+ If a single
+ <a href="types.html#DataTypeLength"><length></a> is
+ provided, then the value represents the new absolute X
+ coordinate for the <a>current text position</a> for rendering
+ the glyphs that correspond to the first character within this
+ element or any of its descendants.
+ </p>
+ <p>
+ If a comma- or space-separated list of <var>n</var>
+ <a href="types.html#DataTypeLength"><length></a>s is
+ provided, then the values represent new absolute X coordinates
+ for the <a>current text position</a> for rendering the glyphs
+ corresponding to each of the first <var>n</var> characters
+ within this element or any of its descendants.
+ </p>
+ <p>
+ If more
+ <a href="types.html#DataTypeLength"><length></a>s are
+ provided than characters, then the extra
+ <a href="types.html#DataTypeLength"><length></a>s will
+ have no effect on glyph positioning.
+ </p>
+ <p>
+ If more characters exist than
+ <a href="types.html#DataTypeLength"><length></a>s,
+ then for each of these extra characters:
+
+ (a) if an ancestor <a>'text'</a> or <a>'tspan'</a> element
+ specifies an absolute X coordinate for the given character via
+ an <span class="attr-name">'x'</span> attribute, then that
+ absolute X coordinate is used as the starting X coordinate for
+ that character (nearest ancestor has precedence), else
- <dl class="ready-for-wider-review">
- <dt id="TextElementWidthAttribute"><span
- class="adef">width</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>Indicates the maximum length that the text is allowed to have
- before being subject to <a>'text-overflow'</a> handling.
- Whenever the sum of advances (including properties <a>'letter-spacing'</a> and <a>'word-spacing'</a> and
- adjustments due to attributes <a>'dx'</a> and <a>'dy'</a> on <a>'tspan'</a> elements) computed by the user agent exceeds
- the given width the <a>'text'</a> element is subject to <a>'text-overflow'</a> processing.
- <p>The given width does not affect SVG DOM methods for measuring text, but
- does affect the boundingbox of the element.
- </p>
- <br />
- The lacuna value for <a>'width'</a> is as if the attribute wasn't specified.
- <br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ (b) the starting X coordinate for rendering the glyphs
+ corresponding to the given character is the X coordinate of
+ the resulting <a>current text position</a> from the most
+ recently rendered glyph for the current <a>'text'</a> element.
+ </p>
+ <p>
+ If the attribute is not specified:
+
+ (a) if an ancestor <a>'text'</a> or <a>'tspan'</a> element
+ specifies an absolute X coordinate for a given character via
+ an <span class="attr-name">'x'</span> attribute, then that
+ absolute X coordinate is used (nearest ancestor has
+ precedence), else
+
+ (b) the starting X coordinate for rendering the glyphs
+ corresponding to a given character is the X coordinate of the
+ resulting <a>current text position</a> from the most recently
+ rendered glyph for the current <a>'text'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-coordinates></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
- <p id="ExampleText01"><span class="example-ref">Example text01</span> below
- contains the text string "Hello, out there" which will be
- rendered onto the canvas using the Verdana font family with the
- glyphs filled with the color blue.</p>
-
-<edit:example href='images/text/text01.svg' name='test01' description="'Hello, out there' in blue" image='yes' link='yes'/>
-
-</edit:with>
-
-<h2 id="TSpanElement">The <span class="element-name">'tspan'</span> element</h2>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Allow transforms on <a>'tspan'</a>.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2011/12/01-svg-irc#T21-02-34">SVG 2 will allow transforms on <span class="element-name">'tspan'</span>.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>Align with other elements such as <a>'a'</a> which already allow transforms.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron (no action)</td>
- </tr>
- </table>
-</div>
-
-<p>Within a <a>'text'</a> element, text and font properties and the
-<a href="text.html#CurrentTextPosition">current text position</a> can be
-adjusted with absolute or relative coordinate values by including a
-<span class="element-name">'tspan'</span> element.</p>
-
-<edit:with element='tspan'>
-
-<edit:elementsummary name='tspan'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="TSpanElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>If a single <a
- href="types.html#DataTypeLength"><length></a>
- is provided, then the value represents the new absolute X
- coordinate for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> for rendering the glyphs that correspond to
- the first character within this element or any of its
- descendants.<br />
- If a comma- or space-separated list of <var>n</var> <a
- href="types.html#DataTypeLength"><length></a>s
- is provided, then the values represent new absolute X
- coordinates for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> for rendering the glyphs corresponding to each
- of the first <var>n</var> characters within this element or
- any of its descendants.<br />
- If more <a
- href="types.html#DataTypeLength"><length></a>s
- are provided than characters, then the extra <a
- href="types.html#DataTypeLength"><length></a>s
- will have no effect on glyph positioning.<br />
- If more characters exist than <a
- href="types.html#DataTypeLength"><length></a>s,
- then for each of these extra characters: (a) if an ancestor
- <a>'text'</a> or <a>'tspan'</a> element specifies
- an absolute X coordinate for the given character via an
- <span class="attr-name">'x'</span> attribute, then that
- absolute X coordinate is used as the starting X coordinate
- for that character (nearest ancestor has precedence), else
- (b) the starting X coordinate for rendering the glyphs
- corresponding to the given character is the X coordinate of
- the resulting <a
- href="text.html#CurrentTextPosition">current text
- position</a> from the most recently rendered glyph for the
- current <a>'text'</a> element.<br />
- If the attribute is not specified: (a) if an ancestor <a>'text'</a>
- or <a>'tspan'</a> element specifies
- an absolute X coordinate for a given character via an
- <span class="attr-name">'x'</span> attribute, then that absolute X
- coordinate is used (nearest ancestor has precedence), else
- (b) the starting X coordinate for rendering the glyphs
- corresponding to a given character is the X coordinate of
- the resulting <a
- href="text.html#CurrentTextPosition">current text
- position</a> from the most recently rendered glyph for the
- current <a>'text'</a> element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TSpanElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>The corresponding list of absolute Y coordinates for
- the glyphs corresponding to the characters within this
- element. The processing rules for the <a>'y'</a> attribute parallel the
- processing rules for the <a>'x'</a> attribute.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TSpanElementDXAttribute"><span
- class="adef">dx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>If a single <a
- href="types.html#DataTypeLength"><length></a> is
- provided, this value represents the new relative X
- coordinate for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> for rendering the glyphs corresponding to the
- first character within this element or any of its
- descendants. The <a
- href="text.html#CurrentTextPosition">current text
- position</a> is shifted along the x-axis of the current
- user coordinate system by <a
- href="types.html#DataTypeLength"><length></a> before
- the first character's glyphs are rendered.<br />
- If a comma- or space-separated list of <var>n</var> <a
- href="types.html#DataTypeLength"><length></a>s is
- provided, then the values represent incremental shifts
- along the x-axis for the <a
- href="text.html#CurrentTextPosition">current text
- position</a> before rendering the glyphs corresponding to
- the first <var>n</var> characters within this element or any
- of its descendants. Thus, before the glyphs are rendered
- corresponding to each character, the <a
- href="text.html#CurrentTextPosition">current text
+
+ </dd>
+
+ <dt id="TSpanElementYAttribute"><span class="adef">y</span></dt>
+ <dd>
+
+ <p>
+ The corresponding list of absolute Y coordinates for the
+ glyphs corresponding to the characters within this
+ element. The processing rules for the <a>'y'</a> attribute
+ parallel the processing rules for the <a>'x'</a> attribute.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-coordinates></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+
+ <dt id="TSpanElementDXAttribute"><span class="adef">dx</span></dt>
+ <dd>
+
+ <p>
+ If a single
+ <a href="types.html#DataTypeLength"><length></a> is
+ provided, this value represents the new relative X coordinate
+ for the <a>current text position</a> for rendering the glyphs
+ corresponding to the first character within this element or
+ any of its descendants. The <a>current text position</a> is
+ shifted along the x-axis of the current user coordinate system
+ by <a href="types.html#DataTypeLength"><length></a>
+ before the first character's glyphs are rendered.
+ </p>
+ <p>
+ If a comma- or space-separated list of
+ <var>n</var> <a href="types.html#DataTypeLength"><length></a>s
+ is provided, then the values represent incremental shifts
+ along the x-axis for the <a>current text position</a> before
+ rendering the glyphs corresponding to the first <var>n</var>
+ characters within this element or any of its
+ descendants. Thus, before the glyphs are rendered
+ corresponding to each character, the <a >current text
position</a> resulting from drawing the glyphs for the
- previous character within the current <a>'text'</a> element is shifted
- along the X axis of the current user coordinate system by
- <a
- href="types.html#DataTypeLength"><length></a>.<br />
- If more <a
- href="types.html#DataTypeLength"><length></a>s are
- provided than characters, then any extra <a
- href="types.html#DataTypeLength"><length></a>s will
- have no effect on glyph positioning.<br />
- If more characters exist than <a
- href="types.html#DataTypeLength"><length></a>s, then
- for each of these extra characters: (a) if an ancestor
- <a>'text'</a> or <a>'tspan'</a> element specifies a
- relative X coordinate for the given character via a
- <span class="attr-name">'dx'</span> attribute, then the <a
- href="text.html#CurrentTextPosition">current text
- position</a> is shifted along the x-axis of the current
- user coordinate system by that amount (nearest ancestor has
- precedence), else (b) no extra shift along the x-axis
- occurs.<br />
- If the attribute is not specified: (a) if an ancestor <a>'text'</a>
- or <a>'tspan'</a> element specifies a
- relative X coordinate for a given character via a
- <span class="attr-name">'dx'</span> attribute, then the <a
- href="text.html#CurrentTextPosition">current text
- position</a> is shifted along the x-axis of the current
- user coordinate system by that amount (nearest ancestor has
- precedence), else (b) no extra shift along the x-axis
- occurs.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TSpanElementDYAttribute"><span
- class="adef">dy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>The corresponding list of relative Y coordinates for
- the characters within the <a>'tspan'</a> element. The processing
- rules for the <a>'dy'</a> attribute
- parallel the processing rules for the
- <a>'dx'</a> attribute.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TSpanElementRotateAttribute"><span
- class="adef">rotate</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
- <dd>The supplemental rotation about the <a
- href="text.html#CurrentTextPosition">current text
+ previous character within the current <a>'text'</a> element is
+ shifted along the X axis of the current user coordinate system
+ by <a href="types.html#DataTypeLength"><length></a>.
+ </p>
+ <p>
+ If more
+ <a href="types.html#DataTypeLength"><length></a>s are
+ provided than characters, then any extra
+ <a href="types.html#DataTypeLength"><length></a>s will
+ have no effect on glyph positioning.
+ </p>
+ <p>
+ If more characters exist than
+ <a href="types.html#DataTypeLength"><length></a>s, then
+ for each of these extra characters:
+
+ (a) if an ancestor <a>'text'</a> or <a>'tspan'</a> element
+ specifies a relative X coordinate for the given character via
+ a <span class="attr-name">'dx'</span> attribute, then
+ the <a >current text position</a> is shifted along the x-axis
+ of the current user coordinate system by that amount (nearest
+ ancestor has precedence), else
+
+ (b) no extra shift along the x-axis occurs.
+ </p>
+ <p>
+ If the attribute is not specified:
+
+ (a) if an ancestor <a>'text'</a> or <a>'tspan'</a> element
+ specifies a relative X coordinate for a given character via a
+ <span class="attr-name">'dx'</span> attribute, then
+ the <a>current text position</a> is shifted along the x-axis
+ of the current user coordinate system by that amount (nearest
+ ancestor has precedence), else
+
+ (b) no extra shift along the x-axis occurs.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-lengths></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TSpanElementDYAttribute"><span class="adef">dy</span></dt>
+ <dd>
+
+ <p>
+ The corresponding list of relative Y coordinates for the
+ characters within the <a>'tspan'</a> element. The processing
+ rules for the <a>'dy'</a> attribute parallel the processing
+ rules for the <a>'dx'</a> attribute.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><list-of-lengths></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See <a>'text/dx'</a> attribute above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TSpanElementRotateAttribute"><span class="adef">rotate</span></dt>
+ <dd>
+
+ <p>
+ The supplemental rotation about the <a>current text
position</a> that will be applied to all of the glyphs
- corresponding to each character within this element.<br />
- If a comma- or space-separated list of <a
- href="types.html#DataTypeNumber"><number></a>s is
- provided, then the first <a
- href="types.html#DataTypeNumber"><number></a>
+ corresponding to each character within this element.
+ </p>
+ <p>
+ If a comma- or space-separated list of
+ <a href="types.html#DataTypeNumber"><number></a>s is
+ provided, then the first
+ <a href="types.html#DataTypeNumber"><number></a>
represents the supplemental rotation for the glyphs
corresponding to the first character within this element or
- any of its descendants, the second <a
- href="types.html#DataTypeNumber"><number></a>
+ any of its descendants, the second
+ <a href="types.html#DataTypeNumber"><number></a>
represents the supplemental rotation for the glyphs that
- correspond to the second character, and so on.<br />
- If more <a
- href="types.html#DataTypeNumber"><number></a>s are
- provided than there are characters, then the extra <a
- href="types.html#DataTypeNumber"><number></a>s will
- be ignored.<br />
- If more characters are provided than <a
- href="types.html#DataTypeNumber"><number></a>s, then
- for each of these extra characters the rotation value specified by the
- last number must be used.
- <br />
- If the attribute is not specified and if an ancestor <a>'text'</a> or
- <a>'tspan'</a> element specifies a supplemental rotation for a given
- character via a <a>'rotate'</a> attribute, then the given supplemental
- rotation is applied to the given character (nearest ancestor has
- precedence). If there are more characters than <a
- href="types.html#DataTypeNumber"><number></a>s specified in the
- ancestor's <a>'rotate'</a> attribute, then for each of these extra
- characters the rotation value specified by the last number must be used.
- <br />
+ correspond to the second character, and so on.
+ </p>
+ <p>
+ If more
+ <a href="types.html#DataTypeNumber"><number></a>s are
+ provided than there are characters, then the extra
+ <a href="types.html#DataTypeNumber"><number></a>s
+ will be ignored.
+ </p>
+ <p>
+ If more characters are provided than
+ <a href="types.html#DataTypeNumber"><number></a>s, then
+ for each of these extra characters the rotation value
+ specified by the last number must be used.
+ </p>
+ <p>
+ If the attribute is not specified and if an ancestor <a>'text'</a> or
+ <a>'tspan'</a> element specifies a supplemental rotation for a
+ given character via a <a>'rotate'</a> attribute, then the
+ given supplemental rotation is applied to the given character
+ (nearest ancestor has precedence). If there are more
+ characters than
+ <a href="types.html#DataTypeNumber"><number></a>s
+ specified in the ancestor's <a>'rotate'</a> attribute, then
+ for each of these extra characters the rotation value
+ specified by the last number must be used.
+ </p>
+ <p>
This supplemental rotation has no impact on the rules by
- which <a href="text.html#CurrentTextPosition">current text
- position</a> is modified as glyphs get rendered and is
- supplemental to any rotation due to <a
- href="text.html#TextOnAPath">text on a path</a> and to
- <a>'glyph-orientation-horizontal'</a>
- or <a>'glyph-orientation-vertical'</a>.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: yes
- (non-additive).</span>
- </dd>
- <dt id="TSpanElementTextLengthAttribute"><span
- class="adef">textLength</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>The author's computation of the total sum of all of the
- advance values that correspond to character data within
- this element, including the advance value on the glyph
- (horizontal or vertical), the effect of properties
- <a>'letter-spacing'</a> and <a>'word-spacing'</a> and adjustments due
- to attributes <a>'dx'</a> and <a>'dy'</a> on this <a>'tspan'</a>
- element or any descendants. This value is used to calibrate the user
- agent's own calculations with that of the author.<br />
- The purpose of this attribute is to allow the author to
+ which <a>current text position</a> is modified as glyphs get
+ rendered and is supplemental to any rotation due to
+ <a href="text.html#TextLayoutPath">text on a path</a> and
+ to <a>'glyph-orientation-horizontal'</a>
+ or <a>'glyph-orientation-vertical'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumbers"><list-of-numbers></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes (non-additive).</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextElementTextLengthAttribute"><span class="adef">textLength</span></dt>
+ <dd>
+
+ <p>
+ The author's computation of the total sum of all of the
+ advance values that correspond to character data within this
+ element, including the advance value on the glyph (horizontal
+ or vertical), the effect of properties
+ <a>'letter-spacing'</a> and <a>'word-spacing'</a> and
+ adjustments due to attributes <a>'tspan/dx'</a> and
+ <a>'tspan/dy'</a> on this <a>'tspan'</a> element or any
+ descendants. This value is used to calibrate the user agent's
+ own calculations with that of the author.
+ </p>
+ <p>
+ The purpose of this attribute is to allow the author to
achieve exact alignment, in visual rendering order after
- any <a
- href="text.html#RelationshipWithBiDirectionality">bidirectional
+ any <a href="text.html#RelationshipWithBiDirectionality">bidirectional
reordering</a>, for the first and last rendered glyphs that
correspond to this element; thus, for the last rendered
- character (in visual rendering order after any <a
- href="text.html#RelationshipWithBiDirectionality">bidirectional
+ character (in visual rendering order after
+ any <a href="text.html#RelationshipWithBiDirectionality">bidirectional
reordering</a>), any supplemental inter-character spacing
- beyond normal glyph advances are ignored (in most cases)
- when the user agent determines the appropriate amount to
+ beyond normal glyph advances are ignored (in most cases) when
+ the user agent determines the appropriate amount to
expand/compress the text string to fit within a length of
- <a>'textLength'</a>.<br />
- If attribute <a>'textLength'</a> is
- specified on a given element and also specified on an
- ancestor, the adjustments on all character data within this
- element are controlled by the value of <a>'textLength'</a> on this element
- exclusively, with the possible side-effect that the
- adjustment ratio for the contents of this element might be
- different than the adjustment ratio used for other content
- that shares the same ancestor. The user agent must assume
- that the total advance values for the other content within
- that ancestor is the difference between the advance value
- on that ancestor and the advance value for this
- element.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).<br />
- If the attribute is not specified anywhere within a
- <a>'text'</a> element, the effect
- is as if the author's computation exactly matched the value
- calculated by the user agent; thus, no advance adjustments
- are made.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ <a>'textLength'</a>.
+ </p>
+ <p>
+ If attribute <a>'textLength'</a> is specified on a given
+ element and also specified on an ancestor, the adjustments on
+ all character data within this element are controlled by the
+ value of <a>'textLength'</a> on this element exclusively, with
+ the possible side-effect that the adjustment ratio for the
+ contents of this element might be different than the
+ adjustment ratio used for other content that shares the same
+ ancestor. The user agent must assume that the total advance
+ values for the other content within that ancestor is the
+ difference between the advance value on that ancestor and the
+ advance value for this element.
+ </p>
+ <p>
+ A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>).
+ </p>
+ <p>
+ If the attribute is not specified anywhere within a
+ <a>'text'</a> element, the effect is as if the author's
+ computation exactly matched the value calculated by the user
+ agent; thus, no advance adjustments are made.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLength"><length></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
-
-<p>The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and
-<a>'rotate'</a> on the <a>'tspan'</a> element are useful in
-high-end typography scenarios where individual glyphs require
-exact placement. These attributes are useful for minor
-positioning adjustments between characters or for major
-positioning adjustments, such as moving the <a
-href="text.html#CurrentTextPosition">current text position</a>
-to a new location to achieve the visual effect of a new line of
-text. Multi-line <a>'text'</a> elements are possible by
-defining different <a>'tspan'</a>
-elements for each line of text, with attributes <a>'x'</a>, <a>'y'</a>,
-<a>'dx'</a> and/or <a>'dy'</a> defining the position of each
-<a>'tspan'</a>. (An advantage of
-such an approach is that users will be able to perform
-multi-line <a href="text.html#TextSelection">text
-selection</a>.)</p>
-
-<p>In situations where micro-level positioning adjustment are
-necessary for advanced typographic control, the SVG content
-designer needs to ensure that the necessary font will be
-available for all viewers of the document (e.g., package up the
-necessary font data in the form of an SVG font or an
-alternative WebFont
-format which is stored at the same Web site as the SVG content)
-and that the viewing software will process the font in the
-expected way (the capabilities, characteristics and font layout
-mechanisms vary greatly from system to system). If the SVG
-content contains <a>'x'</a>, <a>'y'</a>, <a>'dx'</a> or
-<a>'dy'</a> attribute values which are
-meant to correspond to a particular font processed by a
-particular set of viewing software and either of these
-requirements is not met, then the text might display with poor
-quality.</p>
-
-<p>The following additional rules apply to attributes <a>'x'</a>,
-<a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a> when they
-contain a list of numbers:</p>
-
-<ul>
- <li>When a single XML character maps to a single glyph - In
- this case, the <span class="code-fragment">i</span>-th value for the
- <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
- attributes is applied to the glyph that corresponds to the <span
- class="code-fragment">i</span>-th character.</li>
-
- <li>When a single XML character maps to multiple glyphs (e.g., when an
- accent glyph is placed on top of a base glyph) - In this case, the
- <span class="code-fragment">i</span>-th value for the <a>'x'</a>,
- <a>'y'</a>, <a>'dx'</a> and <a>'dy'</a> values are applied (i.e., the
- <a href="text.html#CurrentTextPosition">current text position</a> is
- adjusted) before rendering the first glyph. The rotation transformation
- corresponding to the <span class="code-fragment">i</span>-th <a>'rotate'</a>
- value is applied to the glyphs and to the inter-glyph advance values
- corresponding to this character on a group basis (i.e., the rotation
- value creates a temporary new rotated coordinate system, and the glyphs
- orresponding to the character are rendered into this rotated coordinate
- system).</li>
-
- <li>When multiple XML characters map to a single
- glyph (e.g., when a ligature is used) - Suppose
- that the <span class="code-fragment">i</span>-th
- and <span class="code-fragment">(i+1)</span>-th XML
- characters map to a single glyph. In this case, the <span
- class="code-fragment">i</span>-th value for the <a>'x'</a>,
- <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
- attributes all apply when rendering the glyph. The <span
- class="code-fragment">(i+1)</span>-th values, however, for
- <a>'x'</a>, <a>'y'</a> and <a>'rotate'</a> are ignored (exception:
- the final <a>'rotate'</a> value in the list would still apply to
- subsequent characters), whereas the <a>'dx'</a> and <a>'dy'</a>
- are applied to the subsequent XML character (i.e., the <span
- class="code-fragment">(i+2)</span>-th character), if one exists,
- by translating the <a href="text.html#CurrentTextPosition">current
- text position</a> by the given amounts before rendering the first
- glyph associated with that character.</li>
-
- <li>When there is a many-to-many mapping of characters to
- glyphs (e.g., when three characters map to two glyphs, such as
- when the first glyph expresses the first character and half
- of the second character, and the second glyph expresses the
- other half of the second character plus the third character)
- - Suppose that the <span class="code-fragment">i</span>-th,
- <span class="code-fragment">(i+1)</span>-th and <span
- class="code-fragment">(i+2)</span>-th XML characters map to two
- glyphs. In this case, the <span class="code-fragment">i</span>-th
- value for the <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>
- and <a>'dy'</a> values are applied (i.e., the <a
- href="text.html#CurrentTextPosition">current text
- position</a> is adjusted) before rendering the first glyph.
- The rotation transformation corresponding to the <span
- class="code-fragment">i</span>-th <a>'rotate'</a> value is
- applied to both the two glyphs and the glyph advance values
- for the first glyph on a group basis (i.e., the rotation value
- creates a temporary new rotated coordinate system, and the
- two glyphs are rendered into the temporary rotated coordinate
- system). The <span class="code-fragment">(i+1)</span>-th and
- <span class="code-fragment">(i+2)</span>-th values, however,
- for the <a>'x'</a>, <a>'y'</a> and <a>'rotate'</a> attributes
- are not applied (exception: the final <a>'rotate'</a> value in
- the list would still apply to subsequent characters), whereas
- the <span class="code-fragment">(i+1)</span>-th and <span
- class="code-fragment">(i+2)</span>-th values for the <a>'dx'</a>
- and <a>'dy'</a> attributes are applied to the subsequent XML
- character (i.e., the <span class="code-fragment">(i+3)</span>-th
- character), if one exists, by translating the <a
- href="text.html#CurrentTextPosition">current text position</a> by
- the given amounts before rendering the first glyph associated with
- that character.</li>
-
- <li>
- <p>Relationship to <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
- - As described below in the discussion on
- <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>,
- text is laid out in a two-step process, where any
- bidirectional text is first re-ordered into a left-to-right
- string, and then text layout occurs with the re-ordered
- text string. Whenever the character data within a <a>'tspan'</a> element is re-ordered,
- the corresponding elements within the <a>'x'</a>, <a>'y'</a>,
- <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a> are also re-ordered
- to maintain the correspondence. For example, suppose that you have
- the following <a>'tspan'</a> element:</p>
-
-<pre>
+
+ </dd>
+ </dl>
+
+<h3 id="TSpanNotes">Notes on 'x', 'y', 'dx', 'dy', and 'rotate'</h3>
+
+ <p>
+ The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a>, and
+ <a>'rotate'</a> on the <a>'tspan'</a> element are useful in
+ high-end typography scenarios where individual glyphs require
+ exact placement. These attributes are useful for minor positioning
+ adjustments between characters or for major positioning
+ adjustments, such as moving a section of text to a new location to
+ achieve the visual effect of a new line of text (compatable with
+ SVG 1.1). Note that the <a>'x'</a> and <a>'y'</a> attributes are
+ ignored for auto-wrapped text (except for the initial <a>current
+ text position</a> when the <a>content area</a> is specified by
+ a <a>'text/width'</a> or <a>'text/height'</a> attribute).
+ </p>
+ <p class="issue">
+ Are 'dx', 'dy', and 'rotate' also ignored
+ for auto-wrapped text? Or are they added adjustments after
+ the text is laid out?
+ </p>
+ <p>
+ In situations where micro-level positioning adjustment are
+ necessary for advanced typographic control, the SVG content
+ designer needs to ensure that the necessary font will be available
+ for all viewers of the document (e.g., package up the necessary
+ font data in the form of an SVG font or an alternative WebFont
+ format which is stored at the same Web site as the SVG content)
+ and that the viewing software will process the font in the
+ expected way (the capabilities, characteristics and font layout
+ mechanisms vary greatly from system to system). If the SVG content
+ contains <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, or
+ <a>'dy'</a> attribute values which are meant to correspond to a
+ particular font processed by a particular set of viewing software
+ and either of these requirements is not met, then the text might
+ display with poor quality.
+ </p>
+ <p>
+ The following additional rules apply to attributes <a>'x'</a>,
+ <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a>, and <a>'rotate'</a> when they
+ contain a list of numbers:
+ </p>
+
+ <ul>
+ <li>
+ When a single XML character maps to a single glyph – In this
+ case, the <span class="code-fragment">i</span>-th value for the
+ <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a>,
+ and <a>'rotate'</a> attributes is applied to the glyph that
+ corresponds to the <span class="code-fragment">i</span>-th
+ character.
+ </li>
+
+ <li>
+ When a single XML character maps to multiple glyphs (e.g., when
+ an accent glyph is placed on top of a base glyph) – In this
+ case, the <span class="code-fragment">i</span>-th value for
+ the <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, and <a>'dy'</a> values
+ are applied (i.e., the <a>current text position</a> is adjusted)
+ before rendering the first glyph. The rotation transformation
+ corresponding to the
+ <span class="code-fragment">i</span>-th <a>'rotate'</a>
+ value is applied to the glyphs and to the inter-glyph advance
+ values corresponding to this character on a group basis (i.e.,
+ the rotation value creates a temporary new rotated coordinate
+ system, and the glyphs orresponding to the character are
+ rendered into this rotated coordinate system).
+ </li>
+
+ <li>
+ When multiple XML characters map to a single glyph (e.g., when a
+ ligature is used) – Suppose that the
+ <span class="code-fragment">i</span>-th and
+ <span class="code-fragment">(i+1)</span>-th XML characters
+ map to a single glyph. In this case, the
+ <span class="code-fragment">i</span>-th value for the
+ <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a>,
+ and <a>'rotate'</a> attributes all apply when rendering the
+ glyph. The <span class="code-fragment">(i+1)</span>-th values,
+ however, for <a>'x'</a>, <a>'y'</a>, and <a>'rotate'</a> are
+ ignored (exception: the final <a>'rotate'</a> value in the list
+ would still apply to subsequent characters), whereas
+ the <a>'dx'</a> and <a>'dy'</a> are applied to the subsequent
+ XML character (i.e., the
+ <span class="code-fragment">(i+2)</span>-th character), if one
+ exists, by translating the <a>current text position</a> by the
+ given amounts before rendering the first glyph associated with
+ that character.
+ </li>
+
+ <li>
+ When there is a many-to-many mapping of characters to
+ glyphs (e.g., when three characters map to two glyphs, such as
+ when the first glyph expresses the first character and half
+ of the second character, and the second glyph expresses the
+ other half of the second character plus the third character)
+ – Suppose that the <span class="code-fragment">i</span>-th,
+ <span class="code-fragment">(i+1)</span>-th and
+ <span class="code-fragment">(i+2)</span>-th XML characters map
+ to two glyphs. In this case, the
+ <span class="code-fragment">i</span>-th value for the
+ <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, and <a>'dy'</a> values
+ are applied (i.e., the <a >current text position</a> is
+ adjusted) before rendering the first glyph. The rotation
+ transformation corresponding to the
+ <span class="code-fragment">i</span>-th <a>'rotate'</a>
+ value is applied to both the two glyphs and the glyph advance
+ values for the first glyph on a group basis (i.e., the rotation
+ value creates a temporary new rotated coordinate system, and the
+ two glyphs are rendered into the temporary rotated coordinate
+ system). The <span class="code-fragment">(i+1)</span>-th and
+ <span class="code-fragment">(i+2)</span>-th values, however, for
+ the <a>'x'</a>, <a>'y'</a>, and <a>'rotate'</a> attributes are
+ not applied (exception: the final <a>'rotate'</a> value in the
+ list would still apply to subsequent characters), whereas
+ the <span class="code-fragment">(i+1)</span>-th
+ and <span class="code-fragment">(i+2)</span>-th values for
+ the <a>'dx'</a> and <a>'dy'</a> attributes are applied to the
+ subsequent XML character (i.e.,
+ the <span class="code-fragment">(i+3)</span>-th character), if
+ one exists, by translating the <a >current text position</a> by
+ the given amounts before rendering the first glyph associated
+ with that character.
+ </li>
+
+ <li>
+ Relationship to
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+ – As described below in the discussion on
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>,
+ text is laid out in a two-step process, where any bidirectional
+ text is first re-ordered into a left-to-right string, and then
+ text layout occurs with the re-ordered text string. Whenever the
+ character data within a <a>'tspan'</a> element is re-ordered,
+ the corresponding elements within the <a>'x'</a>, <a>'y'</a>,
+ <a>'dx'</a>, <a>'dy'</a>, and <a>'rotate'</a> are also
+ re-ordered to maintain the correspondence. For example,
+ suppose that you have the following <a>'tspan'</a> element:
+ <pre>
<tspan dx="11 12 13 14 15 0 21 22 23 0 31 32 33 34 35 36">Latin and Hebrew</tspan>
-</pre>
-
- <p>and that the word "Hebrew" will be drawn right-to-left. First, the
- character data and the corresponding values in the <a>'dx'</a>
- list will be reordered, such that the text string will be "Latin
- and werbeH" and the list of values for the <a>'dx'</a> attribute
- will be "11 12 13 14 15 0 21 22 23 0 36 35 34 33 32 31". After
- this re-ordering, the glyphs corresponding to the characters will
- be positioned using standard left-to-right layout rules.</p>
- </li>
-</ul>
-
-<p>The following examples show basic use of the <a>'tspan'</a> element.</p>
-
-<p id="ExampleTSpan01"><span class="example-ref">Example tspan01</span> uses a
-<a>'tspan'</a> element to indicate
-that the word "not" is to use a bold font and have red
-fill.</p>
-
-<edit:example href='images/text/tspan01.svg' name='tspan01' description='using tspan to change visual attributes' image='yes' link='yes'/>
-
-<p id="ExampleTSpan02"><span class="example-ref">Example tspan02</span>
-uses the <a>'dx'</a> and <a>'dy'</a> attributes on the <a>'tspan'</a>
-element to adjust the <a href="text.html#CurrentTextPosition">current text position</a>
-horizontally and vertically for particular text strings within a
-<a>'text'</a> element.</p>
-
-<edit:example href='images/text/tspan02.svg' name='tspan02' description="using tspan's dx and dy attributes for incremental positioning adjustments" image='yes' link='yes'/>
-
-<p id="ExampleTSpan03"><span class="example-ref">Example tspan03</span>
-uses the <a>'x'</a> and <a>'y'</a> attributes on the
-<a>'tspan'</a> element to establish a new absolute
-<a href="text.html#CurrentTextPosition">current text position</a> for each
-glyph to be rendered. The example shows two lines of text within a single
-<a>'text'</a> element. Because both lines of text are within the same
-<a>'text'</a> element, the user will be able to select through both lines
-of text and copy the text to the system clipboard in user agents that
-support <a href="text.html#TextSelection">text selection and clipboard operations</a>.</p>
-
-<edit:example href='images/text/tspan03.svg' name='tspan03' description="using tspan's x and y attributes for multiline text and precise glyph positioning" image='yes' link='yes'/>
-
-<p><span class="example-ref">Example tspan04</span> uses the
-<a>'rotate'</a> attribute on the <a>'tspan'</a> element to rotate the
-glyphs to be rendered. This example shows a single text string in a
-<a>'tspan'</a> element that contains more characters than the number
-of values specified in the <a>'rotate'</a> attribute. In this case the
-last value specified in the <a>'rotate'</a> attribute of the
-<a>'tspan'</a> must be applied to the remaining characters in the
-string.</p>
-
-<edit:example href='images/text/tspan04.svg' name='tspan04' description="simple rotation of characters in a tspan element" image='yes' link='yes'/>
-
-<p><span class="example-ref">Example tspan05</span> specifies the
-<a>'rotate'</a> attribute on the <a>'text'</a> element and on all but
-one of the child <a>'tspan'</a> elements to rotate the glyphs to be
-rendered. The example demonstrates the propagation of the
-<a>'rotate'</a> attribute.</p>
-
-<edit:example href='images/text/tspan05.svg' name='tspan05' description="propagation of rotation values to nested tspan elements" image='yes' link='yes'/>
-
-<p>Rotation of red text inside the <a>'text'</a> element:</p>
-
-<ul>
- <li>
- The <a>'rotate'</a> value will rotate the characters in the text
- <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space that follows the
- text <em>"Not"</em>, to the space in between the text in the
- "child1" and "child5" <a>'tspan'</a> elements, and to the space
- before the text <em>"rotation"</em>.
- </li>
- <li>
- The next current <a>'rotate'</a> value specified is 45 followed
- by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
- element is incremented as subsequent characters in the text of the
- child <a>'tspan'</a> elements are processed.
- </li>
- <li>
- The next immediate <a>'tspan'</a> element specifies rotate values
- for the text, hence the current <a>'rotate'</a> value will change to
- the next value in the list (but is not used) as each character is
- processed until the last value of 55 degrees is reached.
- </li>
- <li>
- The last <a>'rotate'</a> value of 55 degrees will be applied to all
- the characters in the text <em>"rotation"</em>.
- </li>
-</ul>
-
-<p>Rotation of the orange text inside the "child1" <a>'tspan'</a>element:</p>
-
-<ul>
- <li>
- The <a>'rotate'</a> value will rotate the first 4 characters in the
- text <em>"all characters "</em> by -10, -20, -30 and -40
- respectively.
- </li>
- <li>
- The last <a>'rotate'</a> value of -40 becomes the current
- <a>'rotate'</a> value and will be applied to all subsequent
- characters in the <a>'tspan'</a> element and to any child
- <a>'tspan'</a> elements that do not specify <a>'rotate'</a>
- values.
- </li>
- <li>
- The "child4" <a>'tspan'</a> element does not specify any
- <a>'rotate'</a> values and thus uses the current <a>'rotate'</a> of
- its ancestor ("child1" <a>'tspan'</a> element). All the characters
- in the text <em>"text"</em> specified within the "child4"
- <a>'tspan'</a> element will be rotated by -40 degrees.
- </li>
- <li>
- The last <a>'rotate'</a> value of -40 degrees will be applied to all
- the characters in the text <em>"have a"</em>.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space in between the text
- in the "child2" and "child4" <a>'tspan'</a> elements, and to the
- space before the text <em>"have a"</em>.
- </li>
-</ul>
-
-<p>Rotation of the yellow text inside the "child2" <a>'tspan'</a>element:</p>
-
-<ul>
- <li>
- The <a>'rotate'</a> value will rotate the characters in the (yellow)
- text <em>"in "</em> by 70, 60, and 50 degrees respectively.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space that follows the
- text <em>"in"</em>.
- </li>
- <li>
- There are more <a>'rotate'</a> values specified than characters,
- thus the additional <a>'rotate'</a> values will be applied to the
- "child3" <a>'tspan'</a> element which does not specified any
- <a>'rotate'</a> values.
- </li>
- <li>
- The characters in the text <em>"the"</em> specified within the
- "child3" <a>'tspan'</a> element will be rotated 40, 30 and 20
- degrees respectively.
- </li>
-</ul>
-
-<p>Rotation of the blue text inside the "child5" <a>'tspan'</a> element:</p>
-
-<ul>
- <li>
- The <a>'rotate'</a> value will rotate all the characters in text
- <em>"specified"</em> by -10 degrees.
- </li>
- <li>
- Only one <a>'rotate'</a> value is specified and is thus
- applied to all characters in the <a>'tspan'</a> element.
- </li>
-</ul>
-
-<p>The following diagram illustrates how the rotation values propagate to
-<a>'tspan'</a> elements nested withing a <a>'text'</a> element:</p>
-
-<img alt="Image that shows propagation of rotation values"
- src="images/text/tspan05-diagram.png" width="528" height="918" />
-
-</edit:with>
-
-<h2 id="TRefElement">The <span class="element-name">'tref'</span> element</h2>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Allow <a>'tref'</a> to point to non-SVG elements.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://lists.w3.org/Archives/Public/public-svg-wg/2009JulSep/att-0094/26-svg-minutes-last-topic.html#item01">We agree to remove the restriction of <span class="element-name">'tref'</span> pointing to only an SVG document fragment.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To allow easier text substitution.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3130">ACTION-3130</a>)</td>
- </tr>
- </table>
-</div>
-
-<edit:with element='tref'>
-
-<p>The textual content for a <a>'text'</a> can be either character data
-directly embedded within the <a>'text'</a> element or the character data
-content of a referenced element, where the referencing is specified with a
-<a>'tref'</a> element.</p>
-
-<edit:elementsummary name='tref'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="TRefElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a>IRI reference</a> to an element
- whose character data content shall be used as
- character data for this <a>'tref'</a> element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
-
-<p>All character data within the referenced element, including
-character data enclosed within additional markup, will be
-rendered.</p>
-<p>The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a> and <a>'rotate'</a>
-attributes have the same meanings as for the <a>'tspan'</a> element. The
-attributes are applied as if the <a>'tref'</a> element was replaced by a
-<a>'tspan'</a> with the referenced character data (stripped of all
-supplemental markup) embedded within the hypothetical <a>'tspan'</a> element.</p>
-
-<p id="ExampleTRef01"><span class="example-ref">Example tref01</span> shows
-how to use character data from a different element as the character data
-for a given <a>'tspan'</a> element. The first <a>'text'</a> element (with
-<span class='attr-value'>id="ReferencedText"</span>) will not draw because
-it is part of a <a>'defs'</a> element. The second <a>'text'</a> element
-draws the string "Inline character data". The third <a>'text'</a> element
-draws the string "Reference character data" because it includes a
-<a>'tref'</a> element which is a reference to element "ReferencedText",
-and that element's character data is "Referenced character data".</p>
-
-<edit:example href='images/text/tref01.svg' name='tref01' description="inline vs reference text content" image='yes' link='yes'/>
-
-</edit:with>
-
-<h2 id="TextLayout">Text layout</h2>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Include text layout improvements from SVG Tiny 1.2.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2012/02/02-svg-minutes.html#item10">SVG 2 will include the improved text from SVG Tiny 1.2 on characters and glyphs, text layout, text selection, text search.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To include clearer descriptions of text layout; no functional change.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3236">ACTION-3236</a>)</td>
- </tr>
- </table>
-</div>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Align with CSS for text layout functionality.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2011/07/29-svg-minutes.html#item08">SVG 2 Will use CSS3 definitions for text layout (white space, bidi, etc.) that is not specific to SVG.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To facilitate shared specification and implementation of text layout in HTML and SVG.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron and Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3004">ACTION-3004</a>,
- <a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3005">ACTION-3005</a>)</td>
- </tr>
- </table>
-</div>
-
-<p>This section describes the text layout features supported by
-SVG, which includes support for various international writing
-directions, such as left-to-right (e.g., Latin scripts) and
-bidirectional (e.g., Hebrew or Arabic) and vertical (e.g.,
-Asian scripts). The descriptions in this section assume
-straight line text (i.e., text that is either strictly
-horizontal or vertical with respect to the current user
-coordinate system). Subsequent sections describe the
-supplemental layout rules for <a
-href="text.html#TextOnAPath">text on a path</a>.</p>
-
-<p>SVG does not provide for automatic line breaks or word
-wrapping, which makes internationalized text layout for SVG
-relatively simpler than it is for languages which support
-formatting of multi-line text blocks.</p>
-
-<p id="ReferenceOrientation">For each <a>'text'</a> element, the SVG user
-agent determines the current <dfn>reference
-orientation</dfn>. For standard horizontal or vertical text
-(i.e., no text-on-a-path), the reference orientation is the
-vector pointing towards negative infinity in Y within the
-current user coordinate system. (Note: in the <a
-href="coords.html#InitialCoordinateSystem">initial coordinate
-system</a>, the reference orientation is up.) For <a
-href="text.html#TextOnAPath">text on a path</a>, the reference
-orientation is reset with each character.</p>
-
-<p id="InlineProgressionDirection">Based on the reference orientation and the value for
-property <a>'writing-mode'</a>, the SVG user agent
-determines the current <dfn>inline-progression-direction</dfn>. For
-left-to-right text, the inline-progression-direction points 90
-degrees clockwise from the reference orientation vector. For
-right-to-left text, the inline progression points 90 degrees
-counter-clockwise from the reference orientation vector. For
-top-to-bottom text, the inline-progression-direction points 180
-degrees from the reference orientation vector.</p>
-
-<p id="BlockProgressionDirection">Based on the reference orientation and the value for
-property <a>'writing-mode'</a>, the SVG user agent
-determines the current <dfn>block-progression-direction</dfn>. For
-left-to-right and right-to-left text, the
-block-progression-direction points 180 degrees from the
-reference orientation vector because the only available
-horizontal <a>'writing-mode'</a>s are <span
-class="prop-value">lr-tb</span> and <span
-class="prop-value">rl-tb</span>. For top-to-bottom text, the
-block-progression-direction always points 90 degrees
-counter-clockwise from the reference orientation vector because
-the only available top-to-bottom <a>'writing-mode'</a> is <span
-class="prop-value">tb-rl</span>.</p>
-
-<p id="ShiftDirection">The <dfn>shift direction</dfn> is the
-direction towards which the <a
-href="#FontsTablesBaselines">baseline table</a> moves
-due to positive values for property <a>'baseline-shift'</a>. The shift
-direction is such that a positive value shifts the baseline
-table towards the topmost entry in the parent's <a
-href="#FontsTablesBaselines">baseline table</a>.</p>
-
-<p id="CurrentTextPosition">In processing a given <a>'text'</a> element, the SVG user
-agent keeps track of the <dfn>current text
-position</dfn>. The initial current text position is
-established by the <a>'text/x'</a> and <a>'text/y'</a> attributes on the <a>'text'</a> element.</p>
-
-<p>The current text position is adjusted after each glyph to
-establish a new current text position at which the next glyph
-shall be rendered. The adjustment to the current text position
-is based on the current <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>,
-glyph-specific advance values corresponding to the <a
-href="text.html#GlyphOrientation">glyph orientation</a> of the
-glyph just rendered, kerning tables in the font and the current
-values of various attributes and properties, such as the <a
-href="text.html#SpacingProperties">spacing properties</a> and
-any <a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a> and
-<a>'tspan/dy'</a> attributes on <a>'text'</a>, <a>'tspan'</a>,
-<a>'tref'</a> or <a>'altGlyph'</a> elements. If a glyph
-does not provide explicit advance values corresponding to the
-current <a href="text.html#GlyphOrientation">glyph
-orientation</a>, then an appropriate approximation should be
-used. For vertical text, a suggested approximation is the sum
-of the ascent and descent values for the glyph. Another
-suggested approximation for an advance value for both
-horizontal and vertical text is the size of an <em>em</em> (see
-<a
-href="fonts.html#FontFaceElementUnitsPerEmAttribute">units-per-em</a>).</p>
-<p id="AlignmentPoint">For each glyph to be rendered, the SVG user agent determines
-an appropriate <dfn>alignment-point</dfn> on
-the glyph which will be placed exactly at the current text
-position. The alignment-point is determined based on glyph cell
-metrics in the glyph itself, the current <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
-and the <a href="text.html#GlyphOrientation">glyph
-orientation</a> relative to the inline-progression-direction.
-For most uses of Latin text (i.e.,
-<span class='attr-value'>writing-mode:lr</span>,
-<span class='attr-value'>text-anchor:start</span> and
-<span class='attr-value'>alignment-baseline:baseline</span>)
-the alignment-point in the glyph will be the intersection of
-left edge of the glyph cell (or some other glyph-specific
-x-axis coordinate indicating a left-side origin point) with the
-Latin baseline of the glyph. For many cases with top-to-bottom
-vertical text layout, the reference point will be either a
-glyph-specific origin point based on the set of vertical
-baselines for the font or the intersection of the center of the
-glyph with its <em>top line</em> (see
-<a href="http://dev.w3.org/csswg/css3-linebox/#AlignmentBaselineType">top baseline</a>;
-in [<a href="refs.html#ref-CSS3LINEBOX">CSS3LINEBOX</a>], section 4.2). If a glyph does not
-provide explicit origin points corresponding to the current <a
-href="text.html#GlyphOrientation">glyph orientation</a>, then
-an appropriate approximation should be used, such as the
-intersection of the left edge of the glyph with the appropriate
-horizontal baseline for the glyph or intersection of the top
-edge of the glyph with the appropriate vertical baseline. If
-baseline tables are not available, user agents should establish
-baseline tables that reflect common practice.</p>
-
-<p id="TextChunks">Adjustments to the current text position are either
-<dfn id='absolute-position-adjustment'>absolute position adjustments</dfn> or
-<dfn id='relative-position-adjustment'>relative position adjustments</dfn>. An
-absolute position adjustment occurs in the following
-circumstances:</p>
-
-<ul>
- <li>At the start of a <a>'text'</a> element</li>
- <li>At the start of each <a>'textPath'</a> element</li>
- <li>For each character within a <a>'text'</a>, <a>'tspan'</a>,
- <a>'tref'</a> and <a>'altGlyph'</a> element which has an
- <span class='attr-name'>'x'</span> or <span class='attr-name'>'y'</span>
- attribute value assigned to it explicitly</li>
-</ul>
-
-<p>All other position adjustments to the current text position
-are relative position adjustments.</p>
-
-<p id="TextChunk">Each absolute position adjustment defines a new
-<dfn>text chunk</dfn>. Absolute position
-adjustments impact text layout in the following ways:</p>
-
-<ul>
- <li>Ligatures only occur when a set of characters which might
- map to a ligature are all in the same text chunk.</li>
- <li>Each text chunk represents a separate block of text for
- alignment due to <a>'text-anchor'</a> property values.</li>
- <li>Reordering of characters due to <a
- href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
- only occurs within a text chunk. Reordering does <em>not</em>
- happen across text chunks.</li>
-</ul>
-
-<p>The following additional rules apply to ligature formation:</p>
-
-<ul>
- <li>As <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#spacing-props">defined in CSS 2.1</a>,
- ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.4),
- when the resultant space between two characters is not the
- same as the default space, user agents should not use
- ligatures; thus, if there is a non-default value for
- <a>'letter-spacing'</a>, the user agent
- should not use ligatures.</li>
-
- <li>Ligature formation should not be enabled for the glyphs
- corresponding to characters within different DOM text nodes;
- thus, characters separated by markup should not use
- ligatures.</li>
-
- <li>As mentioned above, ligature formation should not be
- enabled for the glyphs corresponding to characters within
- different text chunks.</li>
-</ul>
-
-<h3 id="SettingInlineProgressionDirection">Setting the inline-progression-direction</h3>
-
-<p>The <a>'writing-mode'</a> property specifies whether the initial
-inline-progression-direction for a <a>'text'</a> element shall be
-left-to-right, right-to-left, or top-to-bottom. The <a>'writing-mode'</a>
-property applies only to <a>'text'</a> elements; the property is ignored for
-<a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a> and <a>'textPath'</a>
-sub-elements. (Note that the inline-progression-direction can change within
-a <a>'text'</a> element due to the Unicode bidirectional algorithm and
-properties <a>'direction'</a> and <a>'unicode-bidi'</a>. For more on
-bidirectional text, see
-<a href="text.html#RelationshipWithBiDirectionality">Relationship with bidirectionality</a>.)</p>
-
- <div class="propdef">
- <dl>
- <dt id='WritingModeProperty'><span class="propdef-title property">'writing-mode'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>lr-tb | rl-tb | tb-rl | lr | rl | tb</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>lr-tb</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>'text'</a> elements</td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr>
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr>
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>no</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<dl>
- <dt><span class="attr-value">lr-tb | lr</span></dt>
- <dd>Sets the initial inline-progression-direction to
- left-to-right, as is common in most Latin-based documents.
- For most characters, the <em>current text position</em> is
- advanced from left to right after each glyph is rendered.
- (When the character data includes characters which are
- subject to the Unicode bidirectional algorithm, the text
- advance rules are more complex. See <a
- href="text.html#RelationshipWithBiDirectionality">Relationship
- with bidirectionality</a>).</dd>
-
- <dt><span class="attr-value">rl-tb | rl</span></dt>
- <dd>Sets the initial inline-progression-direction to
- right-to-left, as is common in Arabic or Hebrew scripts. (See
- <a
- href="text.html#RelationshipWithBiDirectionality">Relationship
- with bidirectionality</a>.)</dd>
-
- <dt><span class="attr-value">tb-rl | tb</span></dt>
- <dd>Sets the initial inline-progression-direction to
- top-to-bottom, as is common in some Asian scripts, such as
- Chinese and Japanese. Though hardly as frequent as
- horizontal, this type of vertical layout also occurs in Latin
- based documents, particularly in table column or row labels.
- In most cases, the vertical baselines running through the
- middle of each glyph are aligned.</dd>
-</dl>
-
-<h3 id="GlyphOrientation">Glyph orientation within a text run</h3>
-
-<p>In some cases, it is required to alter the orientation of a
-sequence of characters relative to the
-inline-progression-direction. The requirement is particularly
-applicable to vertical layouts of East Asian documents, where
-sometimes narrow-cell Latin text is to be displayed
-horizontally and other times vertically.</p>
-
-<p>Two properties control the glyph orientation relative to the
-reference orientation for each of the two possible
-inline-progression-directions. <a>'glyph-orientation-vertical'</a> controls
-glyph orientation when the inline-progression-direction is
-vertical. <a>'glyph-orientation-horizontal'</a>
-controls glyph orientation when the
-inline-progression-direction is horizontal.</p>
-
- <div class="propdef">
- <dl>
- <dt id="GlyphOrientationVerticalProperty"><span class="propdef-title property">'glyph-orientation-vertical'</span></dt>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td>auto | <a><angle></a> | <a><number></a></td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>auto</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr>
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr>
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>no</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<dl>
- <dt><span class="prop-value">auto</span></dt>
- <dd>
+ </pre>
+ and that the word "Hebrew" will be drawn right-to-left. First,
+ the character data and the corresponding values in
+ the <a>'dx'</a> list will be reordered, such that the text
+ string will be "Latin and werbeH" and the list of values for
+ the <a>'dx'</a> attribute will be "11 12 13 14 15 0 21 22 23 0
+ 36 35 34 33 32 31". After this re-ordering, the glyphs
+ corresponding to the characters will be positioned using
+ standard left-to-right layout rules.
+ </li>
+ </ul>
+
+ <p>
+ The following examples show basic use of the <a>'tspan'</a>
+ element:
+ </p>
+
+ <p id="ExampleTSpan01">
+ <span class="example-ref">Example tspan01</span> uses a
+ <a>'tspan'</a> element to indicate that the word "not" is to use a
+ bold font and have red fill.
+ </p>
+
+ <edit:example href='images/text/tspan01.svg' name='tspan01' description='using tspan to change visual attributes' image='yes' link='yes'/>
+
+ <p id="ExampleTSpan02">
+ <span class="example-ref">Example tspan02</span> uses
+ the <a>'dx'</a> and <a>'dy'</a> attributes on the <a>'tspan'</a>
+ element to adjust the <a>current text position</a> horizontally
+ and vertically for particular text strings within a
+ <a>'text'</a> element.
+ </p>
+
+ <edit:example href='images/text/tspan02.svg' name='tspan02' description="using tspan's dx and dy attributes for incremental positioning adjustments" image='yes' link='yes'/>
+
+ <p id="ExampleTSpan03">
+ <span class="example-ref">Example tspan03</span> uses
+ the <a>'x'</a> and <a>'y'</a> attributes on the
+ <a>'tspan'</a> element to establish a new absolute
+ <a>current text position</a> for each glyph to be rendered. The
+ example shows two lines of text within a single
+ <a>'text'</a> element. Because both lines of text are within the
+ same <a>'text'</a> element, the user will be able to select
+ through both lines of text and copy the text to the system
+ clipboard in user agents that support
+ <a href="text.html#TextSelection">text selection and clipboard
+ operations</a>.
+ </p>
+
+ <edit:example href='images/text/tspan03.svg' name='tspan03' description="using tspan's x and y attributes for multi-line text and precise glyph positioning" image='yes' link='yes'/>
+
+ <p>
+ <span class="example-ref">Example tspan04</span> uses the
+ <a>'rotate'</a> attribute on the <a>'tspan'</a> element to rotate the
+ glyphs to be rendered. This example shows a single text string in a
+ <a>'tspan'</a> element that contains more characters than the
+ number of values specified in the <a>'rotate'</a> attribute. In
+ this case the last value specified in the <a>'rotate'</a>
+ attribute of the <a>'tspan'</a> must be applied to the remaining
+ characters in the string.
+ </p>
+
+ <edit:example href='images/text/tspan04.svg' name='tspan04' description="simple rotation of characters in a tspan element" image='yes' link='yes'/>
+
+ <p>
+ <span class="example-ref">Example tspan05</span> specifies the
+ <a>'rotate'</a> attribute on the <a>'text'</a> element and on all
+ but one of the child <a>'tspan'</a> elements to rotate the glyphs
+ to be rendered. The example demonstrates the propagation of the
+ <a>'rotate'</a> attribute.
+ </p>
+
+ <edit:example href='images/text/tspan05.svg' name='tspan05' description="propagation of rotation values to nested tspan elements" image='yes' link='yes'/>
+
+ <p>
+ Rotation of red text inside the <a>'text'</a> element:
+
<ul>
<li>
- <p>Fullwidth ideographic and fullwidth Latin text will
- be set with a glyph-orientation of 0-degrees.</p>
- <p>Ideographic punctuation and other ideographic
- characters having alternate horizontal and vertical
- forms will use the vertical form of the glyph.</p>
+ The <a>'rotate'</a> value will rotate the characters in the text
+ <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
</li>
<li>
- <p>Text which is not fullwidth will be set with a
- glyph-orientation of 90-degrees.</p>
- <p>This reorientation rule applies only to the
- first-level non-ideographic text. All further embedding
- of writing-modes or bidi processing will be based on
- the first-level rotation.</p>
- <blockquote>
- <b>NOTE:</b>
- <ul>
- <li>
- <p>This is equivalent to having set the
- non-ideographic text string horizontally honoring
- the bidi-rule, then rotating the resultant
- sequence of inline-areas (one area for each
- change of glyph direction) 90-degrees
- clockwise.</p>
- <p>It should be noted that text set in this
- "rotated" manner may contain ligatures or other
- glyph combining and reordering common to the
- language and script. (This "rotated" presentation
- form does not disable auto-ligature formation or
- similar context-driven variations.)</p>
- </li>
- <li>
- <p>The determination of which characters should
- be auto-rotated may vary across user agents. The
- determination is based on a complex interaction
- between country, language, script, character
- properties, font, and character context. It is
- suggested that one consult the Unicode TR 11 and
- the various JIS or other national standards.</p>
- </li>
- </ul>
- </blockquote>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"Not"</em>, to the space in between the text in the
+ "child1" and "child5" <a>'tspan'</a> elements, and to the space
+ before the text <em>"rotation"</em>.
+ </li>
+ <li>
+ The next current <a>'rotate'</a> value specified is 45 followed
+ by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
+ element is incremented as subsequent characters in the text of the
+ child <a>'tspan'</a> elements are processed.
+ </li>
+ <li>
+ The next immediate <a>'tspan'</a> element specifies rotate values
+ for the text, hence the current <a>'rotate'</a> value will change to
+ the next value in the list (but is not used) as each character is
+ processed until the last value of 55 degrees is reached.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of 55 degrees will be applied to all
+ the characters in the text <em>"rotation"</em>.
</li>
</ul>
- </dd>
-
- <dt><span class="prop-value"><a><angle></a></span></dt>
- <dt><span class="prop-value"><a><number></a></span></dt>
- <dd>The glyph orientation angle. A value specified as a
- <a><number></a> is interpreted as an angle in degrees.
- The value of the angle is restricted to 0, 90, 180, and
- 270 degrees. The user agent shall round the value of the
- angle to the closest of the permitted values.<br />
- A value of <span class="prop-value">0deg</span> indicates
- that all glyphs are set with the top of the glyphs oriented
- towards the <a
- href="text.html#ReferenceOrientation">reference
- orientation</a>. A value of <span
- class="prop-value">90deg</span> indicates an orientation of
- 90 degrees clockwise from the <a
- href="text.html#ReferenceOrientation">reference
- orientation</a>.</dd>
-</dl>
-
-<p>This property is applied only to text written in a vertical
-<a>'writing-mode'</a>.</p>
-
-<p>The glyph orientation affects the amount that the current
-text position advances as each glyph is rendered. When the
-inline-progression-direction is vertical and the <a>'glyph-orientation-vertical'</a> results
-in an orientation angle that is a multiple of 180 degrees, then
-the current text position is incremented according to the
-vertical metrics of the glyph. Otherwise, if the <a>'glyph-orientation-vertical'</a> results
-in an orientation angle that is not a multiple of 180 degrees,
-then the current text position is incremented according to the
-horizontal metrics of the glyph.</p>
-
-<p>The text layout diagrams in this section use the following
-symbols:</p>
-
-<table>
- <tr><th><img alt="Symbolic wide-cell glyph representation" class="example" width="39" height="39" src="images/text/fullwidth.png" /></th>
- <td>wide-cell glyph (e.g. Han) which is the <em>n</em>-th glyph in the text run</td></tr>
- <tr><th><img alt="Symbolic narrow-cell glyph representation" class="example" width="19" height="39" src="images/text/halfwidth.png" /></th>
- <td>narrow-cell glyph (e.g. Latin) which is the <em>n</em>-th glyph in the text run</td></tr>
-</table>
-
-<p>The orientation which the above symbols assume in the
-diagrams corresponds to the orientation that the Unicode
-characters they represent are intended to assume when rendered
-in the user agent. Spacing between the glyphs in the diagrams
-is usually symbolic, unless intentionally changed to make a
-point.</p>
-
-<p>The diagrams below illustrate different uses of <a>'glyph-orientation-vertical'</a>. The
-diagram on the left shows the result of the mixing of
-full-width ideographic glyphs with narrow-cell Latin glyphs
-when <a>'glyph-orientation-vertical'</a> for the
-Latin characters is either <span class="prop-value">auto</span>
-or <span class="prop-value">90</span>. The diagram on the right
-show the result of mixing full-width ideographic glyphs with
-narrow-cell Latin glyphs when Latin glyphs are specified to
-have a <a>'glyph-orientation-vertical'</a> of <span
-class="prop-value">0</span>.</p>
-
-<p><img
-alt="Layout of mixed glyphs in vertical-ideographic mode. Wide-cell glyphs are upright, Non-wide-cell glyphs are rotated by 90 degrees."
- class="example" width="45" height="262"
-src="images/text/lf-vi.png" /><img
-alt="Example of mixed Japanese and English in vertical-ideographic layout. Japanese glyphs are upright, English rotated."
- class="example" width="40" height="260"
-src="images/text/GlyphOrientAuto.png" />
-
-<img
-alt="Layout of mixed glyphs in vertical mode. All glyphs are upright."
- class="example" width="42" height="342"
-src="images/text/lf-v.png" /><img
-alt="Example of mixed Japanese and English in vertical layout. All glyphs are upright."
- class="example" width="38" height="340"
-src="images/text/GlyphOrientZero.png" /></p>
-
- <div class="propdef">
- <dl>
- <dt id="GlyphOrientationHorizontalProperty"><span class="propdef-title property">'glyph-orientation-horizontal'</span></dt>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td><a><angle></a> | <a><number></a></td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>0deg</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr>
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr>
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>no</td>
- </tr>
- </table>
- </dd>
+ </p>
+
+ <p>
+ Rotation of the orange text inside the "child1" <a>'tspan'</a>element:
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the first 4 characters in the
+ text <em>"all characters "</em> by -10, -20, -30 and -40
+ respectively.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 becomes the current
+ <a>'rotate'</a> value and will be applied to all subsequent
+ characters in the <a>'tspan'</a> element and to any child
+ <a>'tspan'</a> elements that do not specify <a>'rotate'</a>
+ values.
+ </li>
+ <li>
+ The "child4" <a>'tspan'</a> element does not specify any
+ <a>'rotate'</a> values and thus uses the current <a>'rotate'</a> of
+ its ancestor ("child1" <a>'tspan'</a> element). All the characters
+ in the text <em>"text"</em> specified within the "child4"
+ <a>'tspan'</a> element will be rotated by -40 degrees.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 degrees will be applied to all
+ the characters in the text <em>"have a"</em>.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space in between the text
+ in the "child2" and "child4" <a>'tspan'</a> elements, and to the
+ space before the text <em>"have a"</em>.
+ </li>
+ </ul>
+ </p>
+
+ <p>
+ Rotation of the yellow text inside the "child2" <a>'tspan'</a>element:
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the characters in the (yellow)
+ text <em>"in "</em> by 70, 60, and 50 degrees respectively.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"in"</em>.
+ </li>
+ <li>
+ There are more <a>'rotate'</a> values specified than characters,
+ thus the additional <a>'rotate'</a> values will be applied to the
+ "child3" <a>'tspan'</a> element which does not specified any
+ <a>'rotate'</a> values.
+ </li>
+ <li>
+ The characters in the text <em>"the"</em> specified within the
+ "child3" <a>'tspan'</a> element will be rotated 40, 30 and 20
+ degrees respectively.
+ </li>
+ </ul>
+ </p>
+
+ <p>Rotation of the blue text inside the "child5" <a>'tspan'</a> element:
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate all the characters in text
+ <em>"specified"</em> by -10 degrees.
+ </li>
+ <li>
+ Only one <a>'rotate'</a> value is specified and is thus
+ applied to all characters in the <a>'tspan'</a> element.
+ </li>
+ </ul>
+ </p>
+
+ <p>
+ The following diagram illustrates how the rotation values propagate to
+ <a>'tspan'</a> elements nested withing a <a>'text'</a> element:
+ </p>
+
+ <img alt="Image that shows propagation of rotation values" src="images/text/tspan05-diagram.png" width="528" height="918" />
+
+ </edit:with>
+
+<h2 id="TRefElement">The <span class="element-name">'tref'</span> element</h2>
+
+ <div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Requirement:</th>
+ <td>Allow <a>'tref'</a> to point to non-SVG elements.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://lists.w3.org/Archives/Public/public-svg-wg/2009JulSep/att-0094/26-svg-minutes-last-topic.html#item01">We agree to remove the restriction of <span class="element-name">'tref'</span> pointing to only an SVG document fragment.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>To allow easier text substitution.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3130">ACTION-3130</a>)</td>
+ </tr>
+ </table>
+ </div>
+
+ <edit:with element='tref'>
+
+ <p>
+ The textual content for a <a>'text'</a> can be either character data
+ directly embedded within the <a>'text'</a> element or the character data
+ content of a referenced element, where the referencing is specified with a
+ <a>'tref'</a> element.
+ </p>
+
+ <edit:elementsummary name='tref'/>
+
+<h3 id="TRefAttributes">Attributes</h3>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="TRefElementHrefAttribute"><span class="adef">xlink:href</span></dt>
+ <dd>
+
+ <p>
+ An <a>IRI reference</a> to an element whose character data
+ content shall be used as character data for this <a>'tref'</a>
+ element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeIRI"><iri></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>As if not specified.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
-
-<dl>
- <dt><span class="prop-value"><a><angle></a></span></dt>
- <dt><span class="prop-value"><a><number></a></span></dt>
- <dd>The glyph orientation angle. A value specified as a
- <a><number></a> is interpreted as an angle in degrees.
- The value of the angle is restricted to 0, 90, 180, and
- 270 degrees. The user agent shall round the value of the
- angle to the closest of the permitted values.<br />
- A value of <span class="prop-value">0deg</span> indicates
- that all glyphs are set with the top of the glyphs oriented
- towards the <a
- href="text.html#ReferenceOrientation">reference
- orientation</a>. A value of <span
- class="prop-value">90deg</span> indicates an orientation of
- 90 degrees clockwise from the <a
- href="text.html#ReferenceOrientation">reference
- orientation</a>.</dd>
-</dl>
-
-<p>This property is applied only to text written in a
-horizontal <a>'writing-mode'</a>.</p>
-
-<p>The glyph orientation affects the amount that the current
-text position advances as each glyph is rendered. When the
-reference orientation direction is horizontal and the <a>'glyph-orientation-horizontal'</a> results
-in an orientation angle that is a multiple of 180 degrees, then
-the current text position is incremented according to the
-horizontal metrics of the glyph. Otherwise, if the <a>'glyph-orientation-horizontal'</a> results
-in an orientation angle that is not a multiple of 180 degrees,
-then the current text position is incremented according to the
-vertical metrics of the glyph.</p>
-
-<h3 id="RelationshipWithBiDirectionality">Relationship with bidirectionality</h3>
-
-<p>The characters in certain scripts are written from right to
-left. In some documents, in particular those written with the
-Arabic or Hebrew script, and in some mixed-language contexts,
-text in a single line may appear with mixed directionality.
-This phenomenon is called bidirectionality, or "bidi" for
-short.</p>
-
-<p>The Unicode standard ([<a href="refs.html#ref-UNICODE">UNICODE</a>],
-specifically [<a href="refs.html#ref-UAX9">UAX9</a>]) defines a
-complex algorithm for determining the proper directionality of
-text. The algorithm consists of an implicit part based on
-character properties, as well as explicit controls for
-embeddings and overrides. The
-<a>SVG user agent</a>
-applies this bidirectional algorithm when determining the layout of characters within a
-<a>text content block element</a>.</p>
-
-<p>The <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
-and <a href="text.html#DirectionProperty"><span class="attr-name">'unicode-bidi'</span></a>
-properties allow authors to override the inherent directionality
-of the content characters and thus explicitly control how the
-elements and attributes of a document language map to this algorithm. These
-two properties are applicable to all characters whose glyphs are
-perpendicular to the inline-progression-direction.</p>
-
-<p>In many cases, the bidirectional algorithm from Unicode
-[<a href="refs.html#ref-UNICODE">UNICODE</a>] produces the desired
-result automatically, and in such cases the author does not need
-to use these properties. For other cases, such as when using
-right-to-left languages, it may be sufficient to add the
-<a>'direction'</a> property to the <a>rootmost 'svg' element</a>,
-and allow that direction to inherit to all text elements,
-as in the following example (which may be used as a template):</p>
-
-<edit:example href="images/text/rtl-text.svg" link="yes" image="yes"/>
-
-<p>Below is another example, where where implicit bidi reordering is not sufficient:</p>
-<edit:example href="images/text/rtl-complex.svg" link="yes" image="yes"/>
-
-<p>Within <a>text content elements</a>,
-the alignment of text with regards to the
-<a href="#TextAnchorProperty"><span class="property">'text-anchor'</span></a> property
-is determined by the value of the
-<a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
-property. For example, given a
-<a href="text.html#TextElement"><span class="element-name">'text'</span></a>
-element with a
-<a href="#TextAnchorProperty"><span class="property">'text-anchor'</span></a>
-value of <span class="prop-value">"end"</span>, for a
-<a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
-value of <span class="prop-value">"ltr"</span>, the text will
-extend to the left of the position of the
-<a href="text.html#TextElement"><span class="element-name">'text'</span></a>
-element's
-<a href="text.html#TextElementXAttribute"><span class="attr-name">'x'</span></a>
-attribute value, while for
-<a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
-value of <span class="prop-value">"rtl"</span>, the text will
-extend to the right of the position of the
-<a href="text.html#TextElement"><span class="element-name">'text'</span></a>
-element's
-<a href="text.html#TextElementXAttribute"><span class="attr-name">'x'</span></a>
-attribute value.</p>
-
-<p>A more complete discussion of bidirectionality can be found
-in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#direction">Text direction</a>
-section of CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 9.10).</p>
-<p>The processing model for bidirectional text is as follows.
-The user agent processes the characters which are provided in
-<em>logical order</em> (i.e., the order
-the characters appear in the original document, either via
-direct inclusion or via indirect reference due a <a href="text.html#TRefElement"><span class="element-name">'tref'</span></a> element). The user agent
-determines the set of independent blocks within each of which
-it should apply the Unicode bidirectional algorithm. Each <a href="text.html#TextChunk">text chunk</a> represents an
-independent block of text. Additionally, any change in glyph
-orientation due to processing of properties <a href="text.html#GlyphOrientationHorizontalProperty"><span class="property">'glyph-orientation-horizontal'</span></a> or
-<a href="text.html#GlyphOrientationVerticalProperty"><span class="property">'glyph-orientation-vertical'</span></a> will
-subdivide the independent blocks of text further. After
-processing the Unicode bidirectional algorithm and properties
-<a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a> and <a href="text.html#UnicodeBidiProperty"><span class="attr-name">'unicode-bidi'</span></a> on each of the
-independent text blocks, the user agent will have a potentially
-re-ordered list of characters which are now in left-to-right
-rendering order. Simultaneous with re-ordering of the
-characters, the <a href="text.html#TSpanElementDXAttribute"><span class="attr-name">dx</span></a>, <a href="text.html#TSpanElementDYAttribute"><span class="attr-name">dy</span></a> and <a href="text.html#TSpanElementRotateAttribute"><span class="attr-name">rotate</span></a> attributes on the <a href="text.html#TSpanElement"><span class="element-name">'tspan'</span></a> and <a href="text.html#TRefElement"><span class="element-name">'tref'</span></a> elements are also
-re-ordered to maintain the original correspondence between
-characters and attribute values. While kerning or ligature
-processing might be font-specific, the preferred model is that
-kerning and ligature processing occurs between combinations of
-characters or glyphs after the characters have been
-re-ordered.</p>
-
- <div class="propdef">
- <dl>
- <dt id="DirectionProperty"><span class="propdef-title property">'direction'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>ltr | rtl</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>ltr</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr>
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr>
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>no</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>This property specifies the base writing direction of text
-and the direction of embeddings and overrides (see <a>'unicode-bidi'</a>) for the Unicode
-bidirectional algorithm. For the <a>'direction'</a> property to have any
-effect on an element that does not by itself establish a new <a href="text.html#TextChunks">text chunk</a>
-(such as a <a>'tspan'</a> element without absolute position adjustments due to <a>'tspan/x'</a> or <a>'tspan/y'</a> attributes),
-the <a>'unicode-bidi'</a> property's value
-must be <span class='prop-value'>embed</span> or <span class='prop-value'>bidi-override</span>.</p>
-
-<p>Except for any additional information provided in this
-specification, the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#propdef-direction">normative definition</a>
-of the <a>'direction'</a> property is in CSS 2.1
-([<a href="refs.html#ref-CSS21">CSS21</a>], section 9.10).</p>
-
-<p>The <a>'direction'</a> property
-applies only to glyphs oriented perpendicular to the <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>,
-which includes the usual case of horizontally-oriented Latin or
-Arabic text and the case of narrow-cell Latin or Arabic
-characters rotated 90 degrees clockwise relative to a
-top-to-bottom inline-progression-direction.</p>
-
- <div class="propdef">
- <dl>
- <dt id="UnicodeBidiProperty"><span class='propdef-title property'>'unicode-bidi'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | embed | bidi-override</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>normal</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>no</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>N/A</td>
- </tr>
- <tr>
- <td><em>Media:</em> </td>
- <td>visual</td>
- </tr>
- <tr>
- <td><em><a
- href="animate.html#Animatable">Animatable</a>:</em> </td>
- <td>no</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>Except for any additional information provided in this
-specification, the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#propdef-unicode-bidi">normative definition</a>
-of the <a>'unicode-bidi'</a> property is in CSS 2.1
-([<a href="refs.html#ref-CSS21">CSS21</a>], section 9.10).</p>
-
-<h2 id="TextRenderingOrder">Text rendering order</h2>
-
-<p>The glyphs associated with the characters within a <a>'text'</a> element are rendered in
-the logical order of the characters in the original document,
-independent of any re-ordering necessary to implement
-bidirectionality. Thus, for text that goes right-to-left
-visually, the glyphs associated with the rightmost character
-are rendered before the glyphs associated with the other
-characters.</p>
-
-<p>Additionally, each distinct glyph is rendered in its
-entirety (i.e., it is filled and stroked as specified by the <a>'fill'</a>
-and <a>'stroke'</a> properties) before the
-next glyph gets rendered.</p>
-
-<div class="ready-for-wider-review">
-<h3 id='TextOverflowProcessing'>Text overflow processing</h3>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Add <a>'text-overflow'</a> functionality.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2011/03/03-svg-minutes.html#item04">We will add text-overflow in SVG 2.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To align with CSS, allow indicating that not all text is shown.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Erik (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3003">ACTION-3003</a>)</td>
- </tr>
- </table>
-</div>
-
-<p class="note">New in SVG 2.
-Added to allow user agents to handle text strings that overflow a predefined width in a more useful way.
-Aligns SVG and HTML/CSS text processing.
-</p>
-
-<p class="note">See the CSS3 UI specification for the definition
-of <a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow">'text-overflow'</a>.
-[<a href="refs.html#ref-CSS3UI">CSS3UI</a>]</p>
-
-<p>SVG uses the <a>'text-overflow'</a> property to control how <a>text content block elements</a>
-render when the text overflows a specified <a>'width'</a>.
-</p>
-
-<p>When applied to a <a>text content block element</a> setting <a>'text-overflow'</a> to
-<span class="attr-value">ellipsis</span> then if the text that is to be rendered
-overflows the specified <a>'width'</a> an ellipsis is rendered such that it fits
-within the given width. For the purposes of rendering the ellipsis is treated as if it replaced the characters at
-the point where it is inserted. The text positioning attributes
-(<a>'text/x'</a>, <a>'text/y'</a>, <a>'text/dx'</a>, <a>'text/dy'</a>, <a>'text/rotate'</a>) apply to the ellipsis
-as if it was one character in the logical document order mapping to one glyph.
-In SVG <a>'text-overflow'</a> has an effect if there is a validly specified <a>'text/width'</a> attribute, regardless of the
-computed value of the <a>'overflow'</a> property on the <a>text content block element</a>.
-</p>
-
-<p>Any other value for <a>'text-overflow'</a> is treated as if it wasn't specified.</p>
-
-<p class="issue">SVG could allow the keyword 'clip' to work too. It's already possible to do clipping with clip-path,
-but it's unconditional, where this would theoretically only clip if the text overflowed. It's mostly a convenient shorthand.</p>
-
-<p>Note that the effect of <a>'text-overflow'</a> is purely visual, the ellipsis itself does not become part of the DOM.
-For all the DOM methods it's as if <a>'text-overflow'</a> wasn't applied, and as if <a>'text/width'</a> didn't constrain the text.
-</p>
-
-<div class="example">
- <p>The following example shows the use of <a>'text-overflow'</a>.
- The top line shows text as it would normally be rendered, without any width restriction.
- The middle line shows text with text-overflow=clip specified, and the bottom line shows
- text with text-overflow=ellipsis.</p>
-
- <pre><![CDATA[
-<svg xmlns="http://www.w3.org/2000/svg"
- width="180" height="120" viewBox="0 0 180 120">
- <style>
- text { font: 16px sans-serif; }
- rect { fill: none; stroke: black; vector-effect: non-scaling-stroke; stroke-width: 1; }
- </style>
-
- <g>
- <rect x="19.5" y="16.5" width="100" height="20"/>
- <text x="20" y="2em" width="100">SVG is awesome</text>
- </g>
-
- <g transform="translate(0,30)">
- <rect x="19.5" y="16.5" width="100" height="20"/>
- <text x="20" y="2em" width="100" text-overflow="clip">SVG is awesome</text>
- </g>
-
- <g transform="translate(0,60)">
- <rect x="19.5" y="16.5" width="100" height="20"/>
- <text x="20" y="2em" width="100" text-overflow="ellipsis">SVG is awesome</text>
- </g>
+
+ </dd>
+ </dl>
+
+<h3 id="TRefNotes">Notes</h3>
+
+ <p>
+ All character data within the referenced element, including
+ character data enclosed within additional markup, will be
+ rendered.
+ </p>
+ <p>
+ The <a>'x'</a>, <a>'y'</a>, <a>'dx'</a>, <a>'dy'</a>
+ and <a>'rotate'</a> attributes have the same meanings as for
+ the <a>'tspan'</a> element. The attributes are applied as if
+ the <a>'tref'</a> element was replaced by a
+ <a>'tspan'</a> with the referenced character data (stripped of all
+ supplemental markup) embedded within the hypothetical
+ <a>'tspan'</a> element.
+ </p>
+
+ <p id="ExampleTRef01">
+ <span class="example-ref">Example tref01</span> shows how to use
+ character data from a different element as the character data for
+ a given <a>'tspan'</a> element. The first <a>'text'</a> element
+ (with <span class='attr-value'>id="ReferencedText"</span>) will
+ not draw because it is part of a <a>'defs'</a> element. The
+ second <a>'text'</a> element draws the string "Inline character
+ data". The third <a>'text'</a> element draws the string "Reference
+ character data" because it includes a <a>'tref'</a> element which
+ is a reference to element "ReferencedText", and that element's
+ character data is "Referenced character data".
+ </p>
+
+ <edit:example href='images/text/tref01.svg' name='tref01' description="inline vs reference text content" image='yes' link='yes'/>
+
+</edit:with>
+
+<h2 id="TextLayout">Text layout – Introduction</h2>
+
+ <div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Requirement:</th>
+ <td>Include text layout improvements from SVG Tiny 1.2.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://www.w3.org/2012/02/02-svg-minutes.html#item10">SVG 2 will include the improved text from SVG Tiny 1.2 on characters and glyphs, text layout, text selection, text search.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>To include clearer descriptions of text layout; no functional change.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3236">ACTION-3236</a>)</td>
+ </tr>
+ </table>
+ </div>
+
+ <p>
+ This section gives a short overview of SVG text layout. It is
+ followed by sections that cover different aspects of text layout
+ in more detail.
+ </p>
+
+ <p>
+ Text is first laid out inside a <a>content area</a>.
+ The <a>content area</a> may be explictly declared by setting the
+ <a>'text/width'</a> attribute (for horizontal text) or the
+ <a>'text/height'</a> attribute (for vertical text), or by setting
+ the <a>'shape-inside'</a> property that defines or references an
+ SVG <a>shape</a>. If a <a>content area</a> is not declared, it
+ defaults to a rectangle of infinite width and height. The rules
+ for text layout within the <a>content area</a> are the same as for
+ text layout in a
+ <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">CSS
+ content area</a> except as noted in this chapter.
+ </p>
+
+ <p>
+ After the initial text layout, SVG transforms are applied. These
+ transforms may shift and/or rotate parts of or all of the
+ text. The rules for which transforms are allowed depend on if
+ the <a>content area</a> was explictly declared or not. If not
+ explicitly declared, the rules define the layout of
+ <em>pre-formatted</em> text. If declared, the rules define the
+ layout of <em>auto-wrapped</em> text. In addition, a
+ <a>'textPath'</a> element can convert a single line of
+ <em>pre-formatted</em> text to <em>text on a path</em>.
+ Examples of the different types of text follow:
+ </p>
+
+ <dl>
+ <dt>Pre-formatted:</dt>
+ <dd>For short strings of text (e.g. labels) or where exact
+ placement of glyphs is required (e.g. hand-kerned titles).
+
+ <div class="example">
+ <p>An example of multi-line pre-formatted text.</p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg">
+ width="300" height="100" viewBox="0 0 300 100"
+
+ <text x="20" y="45"
+ font-family="sans-serif"
+ font-size="24" >
+ Example of multi-line,
+ <tspan x="20" y="75">pre-formatted text.</tspan>
+ </text>
+
</svg>
]]></pre>
- <div class="figure">
- <img class="bordered" src="images/text/text-overflow-ref.svg"
- alt="Image showing the use of the text-overflow property."/>
- <p class="caption">The <a>'text-overflow'</a> property used on text elements, the bottom line showing text with an ellipsis applied.</p>
+ <div class="figure">
+ <img class="bordered" src="images/text/text-preformatted.svg"
+ alt="Image showing two lines of pre-formatted text."/>
+ <p class="caption">Pre-formatted text where a <a>'tspan'</a> element has
+ been used to create multi-line text.</p>
+ </div>
+ </div>
+
+ </dd>
+
+ <dt>Wrapped text:</dt>
+ <dd>For long strings of text where automatic text wrapping is
+ required.
+ <div class="example">
+ <p>An example of auto-wrapped text.</p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg">
+ width="300" height="100" viewBox="0 0 300 100"
+
+ <text x="20" y="45"
+ font-family="sans-serif"
+ font-size="24"
+ width="250">
+ Example of text auto-wrapped.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrapped.svg"
+ alt="Image showing auto-wrapped text on two lines."/>
+ <p class="caption">Auto-wrapped text. The <a>'width'</a>
+ parameter defines a rectangular content area (shown
+ in light blue).</p>
+ </div>
+ </div>
+
+ </dd>
+
+ <dt>Text on path:</dt>
+ <dd>For text that follows a specified path.
+ <div class="example">
+ <p>An example of text on a path.</p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg">
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="300" height="100" viewBox="0 0 300 100"
+
+ <path id="MyPath" stroke="lightblue" fill="none"
+ d="M 50,50 C 100,0 200,100 250,50"/>
+
+ <text font-family="sans-serif"
+ font-size="24">
+ <textPath xlink:href="#MyPath">Text on a path.</textPath>
+ </text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-path.svg"
+ alt="Image showing text following a path."/>
+ <p class="caption">Text on a path. The <a>'textPath'</a>
+ element references a <a>'path'</a> element (shown in light
+ blue).</p>
+ </div>
+ </div>
+
+ </dd>
+ </dl>
+
+ <p class="note">
+ SVG 2 introduces the ability to automatically wrap text inside a
+ rectangle or other shape by specifying a <a>content area</a>. The
+ design of SVG wrapped text is motivated by the desire that SVG
+ text wrapping be as compatible as possible with text wrapping in
+ CSS inorder that renderers that support CSS text wrapping can
+ implement SVG text wrapping easily (but without requiring non-HTML
+ compatable SVG renderers to implement HTML). There are several
+ differences between SVG and CSS text wrapping. The most important
+ is that in SVG, a <a>content area</a> must be explicitly provided
+ as SVG does not have an automatic finite (or semi-finite)
+ <a>content area</a> (provided in CSS by the box model). Another
+ difference is that SVG does not have the <p></p> and
+ <br/> elements which create line breaks. Instead, SVG relies
+ on the <span class="prop-value">pre</span> and
+ <span class="prop-value">pre-line</span> values of
+ <a>'white-space'</a> to provide line breaks. SVG wrapped text also
+ allows a content-creation tool to provide a natural fallback for
+ SVG 1.1 renderers that do not support wrapped text (by use of
+ <a>'text/x'</a> and <a>'text/y'</a> attributes in the <a>'text'</a> and
+ <a>'tspan'</a> elements, which are ignored by SVG 2 renderers for
+ auto-wrapped text).
+ </p>
+
+ <p>
+ SVG's text layout options are designed to cover most general use
+ cases. If more complex layout is required (bulleted lists, tables,
+ etc.), text can be rendered in another XML namespace such as XHTML
+ [<a href="refs.html#ref-XHTML">XHTML</a>] embedded inline within a
+ <a>'foreignObject'</a> element. (Note: the exact semantics of
+ this approach are not completely defined at this time.)
+ </p>
+
+ <p class="issue">Define semantics of foriegnObject.</p>
+
+<h2 id="TextLayoutContentArea">Text layout – Content Area</h2>
+
+ <p>
+ A <dfn>content area</dfn> is defined by specifying in
+ a <a>'text'</a> element either a <a>'text/width'</a> attribute
+ (for horizontal text), a <a>'text/height'</a> attribute (for
+ vertical text), or a <a>'shape-inside'</a> property that defines
+ or references an SVG <a>shape</a>. If no <a>content area</a> is
+ provided, the <a>content area</a> defaults to a rectangle of
+ infinite width and height (see the
+ <a href="text.html#TextLayoutPre">pre-formatted text</a> section).
+ </p>
+
+ <p class="note">
+ An SVG <a>content area</a> corresponds to the <em>content
+ area</em> defined in the
+ <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">CSS
+ box model</a> and in
+ <a href="http://www.w3.org/TR/css3-exclusions/#content-area">CSS
+ Exclusions</a>.
+ </p>
+
+ <p id="TextLayoutWrappingArea">
+ Wrapped text is laid out in a <dfn>wrapping area</dfn>. The
+ <a>wrapping area</a> is normally the same as the <a>content
+ area</a>. It is possible to exclude part of the <a>content
+ area</a> by defining a <dfn>wrapping context</dfn> using
+ the <a>'shape-outside'</a> property. The <a>wrapping area</a> then
+ is defined by subtracting the <a>wrapping context</a> from
+ the <a>content area</a>. When the <a>content area</a> is defined
+ using the <a>'shape-inside'</a> property, the <a>wrapping area</a>
+ can be reduced by the value of the <a>'shape-padding'</a>
+ property.
+ </p>
+
+ <p class="note">
+ The terms <em>wrapping area</em> and <em>wrapping context</em> are
+ defined in
+ <a href="http://www.w3.org/TR/css3-exclusions/#wrapping-context">CSS
+ Exclusions</a>.
+ </p>
+
+
+<h3 id='TextLayoutWidthHeight'>The 'width' and/or 'height' attributes</h3>
+
+ <p>
+ There are three possible ways to define a <a>content area</a> using the
+ <a>'text'</a> element attributes <a>'text/width'</a> and
+ <a>'text/height'</a>:
+ <dl>
+
+ <dt><a>'text/width'</a> only</dt>
+ <dd>
+ For horizontal text, specifies a width for a
+ "rectangular" <a>content area</a> of infinite height.
+
+ For left-to-right text, the initial <a>current text
+ position</a> is at the left of the rectangle. For
+ right-to-left text it is at the right of the rectangle.
+
+ For vertical text, it is ignored.
+ </dd>
+
+ <dt><a>'text/height'</a> only</dt>
+ <dd>
+ For vertical text specifies, a height for a
+ "rectangular" <a>content area</a> of infinite width. The
+ initial <a>current text position</a> is at the top of the
+ rectangle.
+
+ For horizontal text, it is ignored.
+ </dd>
+
+ <dt><a>'text/height'</a> and <a>'text/width'</a></dt>
+ <dd>
+ For both horizontal and vertical text, specifies a height and
+ with for a "rectangular" <a>content area</a>.
+
+ <p class="issue">
+ This is really, really ugly due to the normal positioning of
+ the initial current text position. We could avoid the issue
+ of shifting x and y (e.g. using baseline='text-before-edge')
+ by not allowing this option. It is trivial to define a
+ rectangluar box content area using
+ shape-inside="rectangle(x,y,width,height)" as shown in
+ the example in the <a>'shape-inside'</a> section.
+ </p>
+ </dd>
+ </dl>
+ In all cases, the initial <a>current text position</a> is taken
Received on Wednesday, 9 October 2013 19:46:55 UTC