--- a/master/text.html Mon Jul 29 15:55:11 2013 -0500
+++ b/master/text.html Fri Aug 02 14:50:58 2013 +0200
@@ -63,88 +63,105 @@
<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 class="note">
+ Rules for text layout in SVG 1.1 are mostly defined within the
+ SVG 1.1 specification. In SVG 2, most of the rules are defined
+ in CSS specifications. In practice the end layout is the same.
+ The move to using CSS specifications allows the possiblility
+ 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 capability 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>
@@ -380,285 +397,4312 @@
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>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.
+ </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
+ 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
+ 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
+ expand/compress the text string to fit within a length of
+ <a>'textLength'</a>.
+ </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.
+ </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.
+ </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>
+ not specified. See
+ the <a href="text.html#TextLayoutAuto">Auto-wrapped text</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>
+ not specified. See
+ the <a href="text.html#TextLayoutAuto">Auto-wrapped text</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
+
+ (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>
+ </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>.
+ </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.
+ </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>
+ represents the supplemental rotation for the glyphs that
+ 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>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
+ 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
+ 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
+ expand/compress the text string to fit within a length of
+ <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>
+ </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 the <a>current text position</a> 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 wrapping is indicated 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 layed 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>
+ 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 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:
+
+ <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>
+
+ <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>
+
+ </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 the different methods SVG
+ defines for text layout. The following section introduces layout
+ rules common to all text layout methods. Following that, are
+ sections that give explicite layout rules for each of the possible
+ layout methods.
+ </p>
+
+ <p>
+ The text-layout methods defined by SVG are:
+ </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 multiline,
+ <tspan x="20" y="75">pre-formatted text.</tspan>
+ </text>
+
+</svg>
+]]></pre>
+
+ <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 explicitely provided as SVG does not have an
+ automatic <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="TextLayoutDirections">Text layout - Directions</h2>
+
+ <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 rules and properties that
+ apply to more than one layout method such as 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).
+ <span class="issue">Make more generic.</span>
+ </p>
+
+<h3 id="BasicLayoutMetrics">Layout Orientations</h3>
+
+ <p class="issue">
+ Do we align with
+ <a href="http://www.w3.org/TR/css3-writing-modes/">CSS Writing
+ Modes Module Level 3</a>? This spec has a different structure,
+ putting 'direction' and 'unicode-bidi' before 'writing-mode'.
+ </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., not 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>initial coordinate system</a>, the reference orientation is
+ up.) For <a href="text.html#TextLayoutPath">text on a path</a>,
+ the reference orientation is determined at each character's
+ position along the path. It is 90 degrees counter-clockwise
+ relative to the path direction for horizontal text and 180 degrees
+ relative to the path direction for vertical text.
+ </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 class="issue">Insert figure.</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>
+
+<h4 id="InlineProgressionDirection">The inline-progression-direction: the <span class="property">'writing-mode'</span> property</h4>
+
+ <div class="issue">
+ <p>
+ Do we align with CSS Writing Modes Module Level 3? In CSS3,
+ inline progression direction is separated from block progression
+ direction. The CSS Writing Modes Module redefines
+ 'writing-mode'. Note: SVG does not have tb-lr required
+ for Mongolian.
+ </p>
+ <ul>
+ <li>SVG 1.1: lr-tb | rl-tb | tb-rl | lr | rl | tb</li>
+ <li>CSS Writing Modes: horizontal-tb | vertical-rl | vertical-lr</li>
+ </ul>
+ <p>
+ See: <a href="http://www.w3.org/Style/CSS/Tracker/issues/183">CSS Issue-183</a>
+ </p>
+ </div>
+
+ <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="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>'direction'</a> and <a>'unicode-bidi'</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 class="issue">
+ Is the PNG image above correct? Shouldn't the period be on the
+ other side?
+ </p>
+
+ <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>'text-anchor'</a> property is determined by the
+ value of the <a>'direction'</a> property. For example, given
+ a <a>'text'</a> element with a <a>'text-anchor'</a> value
+ of <span class="prop-value">"end"</span>, for a <a>'direction'</a>
+ value of <span class="prop-value">"ltr"</span>, the text will
+ extend to the left of the position of the <a>'text'</a>
+ element's <a>'text/x'</a> attribute value, while for
+ <a>'direction'</a> value of <span class="prop-value">"rtl"</span>,
+ the text will extend to the right of the position of the
+ <a>'text'</a> element's <a>'text/x'</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>'tref'</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>'glyph-orientation-horizontal'</a> or
+ <a>'glyph-orientation-vertical'</a> will subdivide the independent
+ blocks of text further. After processing the Unicode bidirectional
+ algorithm and properties <a>'direction'</a> and
+ <a>'unicode-bidi'</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>'tspan/dx'</a>,
+ <a>'tspan/dy'</a>, and <a>'tspan/rotate'</a> attributes on the
+ <a>'tspan'</a> and <a>'tref'</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>
+
+<h4 id="BaseDirection">The <span class="property">'direction'</span> property</h4>
+
+ <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 class="note">
+ 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>
+
+<h4 id="SettingDirection">The <span class="property">'unicode-bidi'</span> property</h4>
+
+ <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>
+
+<h3 id="GlyphOrientation">Glyph orientation within a text run</h3>
+
+ <p class="issue">
+ CSS Writing Modes Module Level 3 replaces
+ 'glyph-orientation-vertical' with
+ <a href="http://www.w3.org/TR/css3-writing-modes/#text-orientation">'text-orientation'</a>
+ but does not provide a replacement for 'glyph-orientation
+ horizontal'. There is, however, a value 'use-glyph-orientation',
+ only valid for SVG, which directs an implementation to use the
+ values of 'glyph-orientation-veritical' and
+ 'glyph-orientation-horizontal'. Note that this value is marked
+ as <em>at risk</em>.
+ </p>
+
+ <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>
+
+<h4 id="GlyphOrientationVertical">The <span class="property">'glypn-orientation-vertical'</span> property</h4>
+
+ <p class="issue">
+ Reference CSS3 text? CSS3 has additional values: upright, inline.
+ </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>
+ <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>
+ </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>
+
+ <div class="note">
+ <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>
+ 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.
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ </dd>
+
+ <dt><span class="prop-value"><a><angle></a></span></dt>
+ <dt><span class="prop-value"><a><number></a></span></dt>
+ <dd>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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>.
+ </p>
+ </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>
+
+ <!-- Redo these images as one? -->
+ <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>
+
+<h4 id="GlyphOrientationVertical">The <span class="property">'glypn-orientation-horizontal'</span> property</h4>
+
+ <p class="issue">Reference CSS3 text? CSS3 has additional values: auto, inline.</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>
+ </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>
+
+<h2 id="TextLayoutPositioning">Text layout - Positioning</h2>
+
+ <p>
+ The section covers the general rules for positiong glyphs. In SVG,
+ the first step in positioning a glyph is to find its inline
+ position which is determined by the <a>current text
+ position</a>. Next, the glyph is aligned relative to a particular
+ <a href="text.html#BaselineAlignmentProperties">baseline</a> and
+ possibly rotated. Once a glyph is positioned, the <a>current
+ text position</a> is advanced and the next glyph is placed.
+ </p>
+
+<h3 id="CurrentTextPosition">Current text position</h3>
+
+ <p class="issue">
+ Align with <a href="http://dev.w3.org/csswg/css-inline/">CSS-Inline</a>?
+ This might require redefining 'current text position' in terms of
+ inline boxes.
+ </p>
+
+ <p>
+ 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 for
+ pre-formatted and in some cases for auto-wrapped text. It is
+ determined by the start of the path for text on a path.
+ <span class="issue">FIX FOR AUTO-WRAPPED TEXT IN SHAPE</span>
+ </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:
+ <ul>
+ <li>The current
+ <a href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>.</li>
+ <li>Glyph-specific advance values corresponding to
+ the <a href="text.html#GlyphOrientation">glyph orientation</a> of
+ the glyph just rendered.</li>
+ <li>Kerning tables in the font.</li>
+ <li>The current values of various attributes and properties, such as
+ the <a href="text.html#SpacingProperties">spacing properties</a>.</li>
+ <li>For pre-formatted and text on a a path,
+ the <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.</li>
+ <li>New lines in pre-formatted or auto-wrapped text.</li>
+ </ul>
+ 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 example, in most
+ uses of pre-formatted 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 class="issue">
+ The distinction between absolute and relative position adjustments
+ seems mostly made to define text chunks. 'x' and 'y' attributes
+ are ignored for wrapped text and partially ignored for text on a
+ path. Does this impact text chunks? How are new lines (either
+ manual or auto) handled?
+ </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:
+
+ <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 for
+ pre-formatted text has an explicit
+ <span class='attr-name'>'x'</span> or
+ <span class='attr-name'>'y'</span> value,
+ or for text on a path has an explicit
+ <span class='attr-name'>'x'</span> value if horizontal or
+ <span class='attr-name'>'y'</span> value if vertical.</li>
+ </ul>
+ </p>
+
+ <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:
+
+ <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>
+
+ <p>
+ The following additional rules apply to ligature formation:
+
+ <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>
+
+ </p>
+
+<h3 id="WhiteSpace">White Space</h3>
+
+ <p class="note">
+ New in SVG 2. Added <a>'white-space'</a> to allow a more useful
+ way to control whitespace handling. Aligns SVG and HTML/CSS text
+ processing. <a>'xml:space'</a> deprecated in new content, retained
+ for backwards compatibility.
+ </p>
+
+ <h4 id="TextWhiteSpace">SVG 2 Preferred white space handling, the <a>'white-space'</a> property</h4>
+
+ <p>
+ Rendering of white space in SVG 2 is controlled by the <a>'white-space'</a>
+ property. This specifies two things:
+ <ul>
+ <li>whether and how white space inside the element is collapsed</li>
+ <li>whether lines may wrap at unforced soft wrap opportunities</li>
+ </ul>
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="WhiteSpaceProperty">white-space</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | pre | nowrap | pre-wrap | pre-line </td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>not defined for shorthand properties </td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>see individual properties </td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p class="note">
+ Values and their meanings are defined in
+ [<a href="http://dev.w3.org/csswg/css3-text/#white-space">CSS3
+ Text</a>].
+ </p>
+
+ <div class="example">
+ <p>
+ An example of using the <a>'white-space'</a>
+ value <span class="prop-value">pre-line</span>.
+ </p>
+
+ <pre><![CDATA[
+<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"
+ white-space="pre-line">千利奴流乎和加
+ 餘多連曽津祢那
+ 良牟有為能於久
+ 耶万計不己衣天
+ 阿佐伎喩女美之
+ 恵比毛勢須</text>
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-whitespace-vertical.svg"
+ alt="Japanese poem showing traditional line-breaking after every seven kanji."/>
+ <p class="caption">
+ Example of multiline vertical text with line breaks. The text
+ is from the Japanese poem <em>Iroha</em>. The lines are broken
+ at traditional places. <span class="issue">Example does not
+ render properly in Firefox.</span>
+ </p>
+ </div>
+ </div>
+
+
+<h4 id="LegacyXMLSpace">Legacy whitespace handling, the <a>'xml:space'</a> property</h4>
+
+ <p id="XMLSpaceAttribute">
+ For compatibility, SVG 2 also supports the XML attribute
+ <a>'xml:space'</a> to specify the handling of white space
+ characters within a given <a>'text'</a> element's character
+ data. New content should not use <a>'xml:space'</a> but
+ instead, use the <a>'white-space'</a> property.
+ </p>
+
+ <p>
+ Note that any child element of a <a>'text'</a> element may also
+ have an <a>'xml:space'</a> attribute which will apply to that
+ child element's text content. The SVG user agent has special
+ processing rules associated with this attribute as described
+ below. These are behaviors that occur subsequent to XML parsing
+ [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>]
+ and any construction of a DOM.
+ </p>
+
+ <p>
+ <a>'xml:space'</a> is an inheritable attribute which can have one of
+ two values:
+ </p>
+
+ <dl>
+ <dt><span class='attr-value'>'default'</span></dt>
+ <dd>
+ (The initial/default value for <a>'xml:space'</a>.) When
+ <span class='attr-value'>xml:space="default"</span>, the SVG
+ user agent will do the following using a copy of the original
+ character data content. First, it will remove all newline
+ characters. Then it will convert all tab characters into space
+ characters. Then, it will strip off all leading and trailing
+ space characters. Then, all contiguous space characters will be
+ consolidated.
+ </dd>
+
+ <dt><span class='attr-value'>'preserve'</span></dt>
+ <dd>
+ When <span class='attr-value'>xml:space="preserve"</span>, the
+ SVG user agent will do the following using a copy of the
+ original character data content. It will convert all newline and
+ tab characters into space characters. Then, it will draw all
+ space characters, including leading, trailing and multiple
+ contiguous space characters. Thus, when drawn with
+ <span class='attr-value'>xml:space="preserve"</span>, the string
+ <code>"a b"</code> (three spaces between "a"
+ and "b") will produce a larger separation between "a" and "b"
+ than <code>"a b"</code> (one space between "a" and "b").
+ </dd>
+ </dl>
+
+ <p>
+ The following example illustrates that line indentation can be
+ important when using
+ <span class='attr-value'>xml:space="default"</span>. The fragment
+ below show two pairs of similar <a>'text'</a> elements, with
+ both <a>'text'</a> elements using
+ <span class="attr-value">xml:space="default"</span>. For
+ these examples, there is no extra white space at the end of any of
+ the lines (i.e., the line break occurs immediately after the last
+ visible character).
+ </p>
+
+ <pre>
+[01] <text xml:space='default'>
+[02] WS example
+[03] indented lines
+[04] </text>
+[05] <text xml:space='preserve'>WS example indented lines</text>
+[06]
+[07] <text xml:space='default'>
+[08]WS example
+[09]non-indented lines
+[10] </text>
+[11] <text xml:space='preserve'>WS examplenon-indented lines</text>
+ </pre>
+
+ <p>
+ The first pair of <a>'text'</a> elements above show the
+ effect of indented character data. The attribute
+ <span class="attr-value">xml:space="default"</span> in the first
+ <a>'text'</a> element instructs the user agent to:
+
+ <ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [01], [02] and [03]),</li>
+ <li>strip out all leading space characters (i.e., strip out
+ space characters before "WS example" on line [02]),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [04]),</li>
+ <li>consolidate all intermediate space characters (i.e., the
+ space characters before "indented lines" on line [03]) into a
+ single space character.</li>
+ </ul>
+ </p>
+
+ <p>
+ The second pair of <a>'text'</a> elements above show the
+ effect of non-indented character data. The attribute
+ <span class="attr-value">xml:space="default"</span> in the third
+ <a>'text'</a> element instructs the user agent to:
+
+ <ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [07], [08] and [09]),</li>
+ <li>strip out all leading space characters (there are no
+ leading space characters in this example),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [10]),</li>
+ <li>consolidate all intermediate space characters into a
+ single space character (in this example, there are no
+ intermediate space characters).</li>
+ </ul>
+ </p>
+
+ <p>
+ Note that XML parsers are required to convert the standard
+ representations for a newline indicator (e.g., the literal
+ two-character sequence "#xD#xA" or the stand-alone literals #xD or
+ #xA) into the single character #xA before passing character data
+ to the application. Thus, each newline in SVG will be represented
+ by the single character #xA, no matter what representation for
+ newlines might have been used in the original resource. (See
+ <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-line-ends">XML
+ end-of-line handling</a>.)
+ </p>
+
+ <p>
+ Any features in the SVG language or the SVG DOM that are based
+ on character position number, such as the <a>'tspan/x'</a>,
+ <a>'tspan/y'</a>, <a>'tspan/dx'</a>, <a>'tspan/dy'</a> and
+ <a>'tspan/rotate'</a> attributes on the <a>'text'</a>, <a>'tspan'</a>,
+ <a>'tref'</a> and <a>'altGlyph'</a> elements, are based on
+ character position after applying the white space handling rules
+ described here. In particular,
+ if <span class='attr-value'>xml:space="default"</span>, it is
+ often the case that white space characters are removed as part of
+ processing. Character position numbers index into the text string
+ after the white space characters have been removed per the rules
+ in this section.
+ </p>
+
+ <p>
+ Note that a glyph corresponding to a whitespace character should
+ only be displayed as a visible but blank space, even if the glyph
+ itself happens to be non-blank.
+ See <a href="http://www.unicode.org/faq/unsup_char.html">display
+ of unsupported characters</a>
+ [<a href="refs.html#ref-UNICODE">UNICODE</a>].
+ </p>
+
+ <p>
+ The <a>'xml:space'</a> attribute is:
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ no.</span>
+ </p>
+
+<h4 id="DuplicateWhiteSpace">Duplicate whitespace directives</h4>
+
+ <p>
+ Older, SVG 1.1 content will use <a>'xml:space'</a>. New content,
+ and older content that is being reworked, will use
+ <a>'white-space'</a> and remove any existing
+ <a>'xml:space'</a>. However, user agents may come across content
+ which uses both methods on the same element. If
+ the <a>'white-space'</a> property is set on any element, then the
+ value of <a>'xml:space'</a> is ignored.
+ </p>
+
+<h4> Tab Character Size: the ‘tab-size’ property</h4>
+
+<h3 id='TextLineHeight'>Line spacing, the <span class="property">'line-height'</span> property</h3>
+
+ <p class="note">
+ New in SVG 2.
+
+ Added for manual- and auto-text wrapping. Aligns SVG and HTML/CSS
+ text processing.
+ </p>
+
+ <p>
+ SVG uses the <a>'line-height'</a> property to determine the amount
+ of leading space which is added between lines in multi-line text
+ (both horizontal and vertical). It is not applicable to text on a
+ path.
+ </p>
+
+ <p class="issue">
+ Is this correct for vertical text?
+ </p>
+
+ <table class="propdef" >
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="LineHeightProperty">line-height</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | <a><number></a> | <a><length></a>| <a><percentage></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>normal</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to the font size of the element itself</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>see individual properties </td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p class="note">
+ See the CSS2.1 specification for the definition of
+ <a href="http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a>.
+ [<a href="refs.html#ref-CSS21">CSS21</a>]
+ </p>
+ <p class="note">
+ See the CSS Line Layout Module 3 specification for the definition
+ of
+ <a href="http://dev.w3.org/csswg/css-inline/#InlineBoxHeight">'line-height'</a>.
+ [<a href="refs.html#ref-CSS3LINEBOX">CSS3LINEBOX</a>]
+ CSS 3 adds 'none' value.
+ </p>
+
+<h3>Spacing within lines</h3>
+
+ <p>
+ Two properties affect the space between characters and words:
+
+ <ul>
+ <li>
+ <a>'letter-spacing'</a> indicates an amount of space that is
+ to be added between text characters.
+ </li>
+
+ <li>
+ <a>'word-spacing'</a> indicates the spacing behavior between words.
+ </li>
+ </ul>
+ </p>
+
+ <p class='issue'>
+ Note that the <span class='property'>'kerning'</span> property
+ from SVG 1.1 has been removed in favor of using
+ <a>'letter-spacing'</a> to add or remove spacing between glyphs
+ and the <span class='property'>'font-kerning'</span> property to
+ disable kerning based on information from the font.
+ </p>
+
+ <p class='issue'>
+ We need to require <span class='property'>'font-kerning'</span>.
+ </p>
+
+<h4 id='TextLetterSpacing'>The <span class="property">'letter-spacing'</span> property</h4>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="LetterSpacingProperty">'letter-spacing'</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | <length></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>normal</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>'normal' or absolute length</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property specifies spacing behavior between text characters.
+ </p>
+
+ <p>
+ For SVG, if a <span class="prop-value"><length></span> is
+ provided without a unit identifier (e.g., an unqualified number
+ such as <span class="attr-value">128</span>), the SVG user agent
+ processes the <span class="prop-value"><length></span> as a
+ width value in the current user coordinate system.
+ </p>
+
+ <p>
+ If a <span class="prop-value"><length></span> is provided
+ with one of the <a href="coords.html#Units">unit identifiers</a>
+ (e.g., <span class="attr-value">.25em</span>
+ or <span class="attr-value">1%</span>), then the SVG user agent
+ converts the <span class="prop-value"><length></span> into a
+ corresponding value in the current user coordinate system by
+ applying the rules described
+ in <a href="coords.html#Units">Units</a>.
+ </p>
+
+ <p class="note">
+ Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-letter-spacing">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.4).
+ </p>
+
+<h4 id='TextWordSpacing'>The <span class="property">'word-spacing'</span> property</h4>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="WordSpacingProperty">word-spacing</dfn></td>
+ </tr>
+ <tr>
+ <td>Value:</td>
+ <td>normal | <length></td>
+ </tr>
+ <tr>
+ <td>Initial:</td>
+ <td>normal</td>
+ </tr>
+ <tr>
+ <td>Applies to:</td>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <td>Inherited:</td>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <td>Percentages:</td>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <td>Media:</td>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>for 'normal' the value '0'; otherwise the absolute length</td>
+ </tr>
+ <tr>
+ <td><a href="animate.html#Animatable">Animatable</a>:</td>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property specifies spacing behavior between words. For SVG,
+ if a <span class="prop-value"><length></span> is provided
+ without a unit identifier (e.g., an unqualified number such
+ as <span class="attr-value">128</span>), the SVG user agent
+ processes the <span class="prop-value"><length></span> as a
+ width value in the current user coordinate system.
+ </p>
+
+ <p>
+ If a <span class="prop-value"><length></span> is provided
+ with one of the <a href="coords.html#Units">unit identifiers</a>
+ (e.g., <span class="attr-value">.25em</span> or
+ <span class="attr-value">1%</span>), then the SVG user agent
+ converts the <span class="prop-value"><length></span> into a
+ corresponding value in the current user coordinate system by
+ applying the rules described in <a href="coords.html#Units">Units</a>.
+ </p>
+
+ <p class="note">
+ Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-word-spacing">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.4).
+ </p>
+
+<h3 id='TextAnchoringProperties'>Text alignment, the <a>'text-anchor'</a> property</h3>
+
+ <p>
+ The <a>'text-anchor'</a> property is used to align (start-,
+ middle- or end-alignment) a string of text relative to a given
+ point. It is not applicable to auto-wrapped text in
+ a <a>shape</a>, see instead <a>'text-align'</a>. For multi-line
+ text, the alignment takes place for each line.
+ </p>
+
+ <p><span class="issue">This is very confusing:</span>
+ The <a>'text-anchor'</a> property is applied to each individual
+ <a href="text.html#TextChunks">text chunk</a> within a
+ given <a>'text'</a> element. Each text chunk has an initial
+ current text position, which represents the point in the user
+ coordinate system resulting from (depending on context)
+ application of the <a>'text/x'</a> and <a>'text/y'</a> attributes
+ on the <a>'text'</a> element, any <a>'tspan/x'</a>
+ or <a>'tspan/y'</a> attribute values on a <a>'tspan'</a>,
+ <a>'tref'</a> or <a>'altGlyph'</a> element assigned explicitly to
+ the first rendered character in a text chunk, or determination of
+ the initial current text position for a <a>'textPath'</a> element.
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="TextAnchorProperty">text-anchor</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>start | middle | end</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>start</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ Values have the following meanings:
+ </p>
+
+ <dl>
+ <dt><span class="attr-value">start</span></dt>
+ <dd>
+ The rendered characters are aligned such that the start of the
+ resulting rendered text is at the initial current text position.
+ For an element with a <a>'direction'</a> property value
+ of <span class="prop-value">"ltr"</span> (typical for most
+ European languages), the left side of the text is rendered at
+ the initial text position. For an element with a
+ <a>'direction'</a> property value of
+ <span class="prop-value">"rtl"</span> (typical for Arabic and
+ Hebrew), the right side of the text is rendered at the initial
+ text position. For an element with a vertical primary text
+ direction (often typical for Asian text), the top side of the
+ text is rendered at the initial text position.
+ </dd>
+
+ <dt><span class="attr-value">middle</span></dt>
+ <dd>
+ The rendered characters are aligned such that the geometric
+ middle of the resulting rendered text is at the initial current
+ text position.
+ </dd>
+
+ <dt><span class="attr-value">end</span></dt>
+ <dd>
+ The rendered characters are aligned such that the end of the
+ resulting rendered text is at the initial current text position.
+ For an element with a <a>'direction'</a> property value
+ of <span class="prop-value">"ltr"</span> (typical for most
+ European languages), the right side of the text is rendered at
+ the initial text position. For an element with
+ a <a>'direction'</a> property value
+ of <span class="prop-value">"rtl"</span> (typical for Arabic and
+ Hebrew), the left side of the text is rendered at the initial
+ text position. For an element with a vertical primary text
+ direction (often typical for Asian text), the bottom of the text
+ is rendered at the initial text position.
+ </dd>
+ </dl>
+
+ <div class="example">
+ <p>An example of using <a>'text-anchor'</a> on multi-line text.</p>
+
+ <pre><![CDATA[
+<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 anchored to the middle.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-anchor-middle.svg"
+ alt="Image showing two lines of text centered via text-anchor."/>
+ <p class="caption">
+ Text anchoring is applied independently to each line of text.
+ </p>
+ </div>
+ </div>
+
+<h3 id="BaselineAlignmentProperties">Baseline alignment properties</h3>
+
+ <div class="annotation svg2-requirement">
+ <table>
+ <tr>
+ <th>SVG 2 Requirement:</th>
+ <td>Align with CSS for baseline alignment functionality.</td>
+ </tr>
+ <tr>
+ <th>Resolution:</th>
+ <td><a href="http://www.w3.org/2012/01/13-svg-irc#T03-24-06">SVG 2 will deprecate <span class="property">'baseline-shift'</span> and use <span class="property">'vertical-align'</span> instead.</a></td>
+ </tr>
+ <tr>
+ <th>Purpose:</th>
+ <td>To align with CSS.</td>
+ </tr>
+ <tr>
+ <th>Owner:</th>
+ <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3281">ACTION-3281</a>)</td>
+ </tr>
+ </table>
+ </div>
+
+ <p class="issue">
+ <a href="http://dev.w3.org/csswg/css-inline/#baseline-shift">'baseline-shift'</a>
+ is still in CSS Line Layout Module 3. It is important for aligning
+ subscripts and superscripts (Inkscape relies on it for this
+ purpose).
+ <a href="http://dev.w3.org/csswg/css-inline/#vertical-align">'vertical-align'</a>
+ is a shorthand for changing multiple properties at once,
+ including 'baseline-shift'.
+ </p>
+
+ <p>
+ An overview of baseline alignment and baseline tables can be
+ found above in <a href="text.html#FontsTablesBaselines">Fonts,
+ font tables and baselines</a>.
+ </p>
+
+ <p>
+ One of the characteristics of international text is that there are
+ different baselines (different alignment points) for glyphs in
+ different scripts. For example, in horizontal writing, ideographic
+ scripts, such as Han Ideographs, Katakana, Hiragana, and Hangul,
+ alignment occurs with a baseline near the bottoms of the glyphs;
+ alphabetic based scripts, such as Latin, Cyrillic, Hebrew, Arabic,
+ align a point that is the bottom of most glyphs, but some glyphs
+ descend below the baseline; and Indic based scripts are aligned at
+ a point that is near the top of the glyphs.
+ </p>
+
+ <p>
+ When different scripts are mixed on a line of text, an adjustment
+ must be made to ensure that the glyphs in the different scripts
+ are aligned correctly with one another. OpenType
+ [<a href="http://www.microsoft.com/typography/otspec/">OPENTYPE</a>]
+ fonts have a Baseline table (BASE)
+ [<a href="http://www.microsoft.com/typography/otspec/base.htm">OPENTYPE-BASETABLE</a>]
+ that specifies the offsets of the alternative baselines from the
+ current baseline.
+ </p>
+
+ <p>
+ SVG uses a similar baseline table model that assumes one script
+ (at one font-size) is the "dominant run" during processing of
+ a <a>'text'</a> element; that is, all other baselines are defined
+ in relation to this dominant run. The baseline of the script with
+ the dominant run is called the <dfn>dominant baseline</dfn>. So,
+ for example, if the dominant baseline is the alphabetic baseline,
+ there will be offsets in the baseline table for the alternate
+ baselines, such as the ideographic baseline and the Indic
+ baseline. There will also be an offset for the math baseline which
+ is used for some math fonts. Note that there are separate baseline
+ tables for horizontal and vertical writing-modes. The offsets in
+ these tables may be different for horizontal and vertical writing.
+ </p>
+
+ <p>
+ The baseline table established at the start of processing of
+ a <a>'text'</a> element is called the
+ <dfn>dominant baseline table</dfn>.
+ </p>
+
+ <p>
+ Because the value of the <a>'font-family'</a> property is a list
+ of fonts, to insure a consistent choice of baseline table we
+ define the <em>nominal font</em> in a font list as the first font
+ in the list for which a glyph is available. This is the first font
+ that could contain a glyph for each character encountered. (For
+ this definition, glyph data is assumed to be present if a font
+ substitution is made or if the font is synthesized.) This
+ definition insures a content independent determination of the font
+ and baseline table that is to be used.
+ </p>
+
+ <p>
+ The value of the <a>'font-size'</a> property on the <a>'text'</a>
+ element establishes the <dfn>dominant baseline table font size</dfn>.
+ </p>
+
+ <p>
+ The model assumes that each glyph has a 'alignment-baseline' value
+ which specifies the baseline with which the glyph is to be
+ aligned. (The 'alignment-baseline' is called the "Baseline Tag" in
+ the OpenType baseline table description.) The initial value of
+ the <a>'alignment-baseline'</a> property uses the baseline
+ identifier associated with the given glyph. Alternate values
+ for <a>'alignment-baseline'</a> can be useful for glyphs such as a
+ "*" which are ambiguous with respect to script membership.
+ </p>
+
+ <p>
+ The model assumes that the font from which the glyph is drawn also
+ has a baseline table, the <dfn>font baseline table</dfn>. This
+ baseline table has offsets in units-per-em from the (0,0) point to
+ each of the baselines the font knows about. In particular, it has
+ the offset from the glyph's (0,0) point to the baseline identified
+ by the 'alignment-baseline'.
+ </p>
+
+ <p>
+ The offset values in the baseline table are in "design units"
+ which means fractional units of the EM. Thus, the
+ current <a>'font-size'</a> is used to determine the actual offset
+ from the dominant baseline to the alternate baselines.
+ </p>
+
+ <p>
+ The glyph is aligned so that its baseline identified by its
+ 'alignment-baseline' is aligned with the baseline with the same
+ name from the dominant baseline table.
+ </p>
+
+ <p>
+ The offset from the dominant baseline of the parent to the
+ baseline identified by the 'alignment-baseline' is computed using
+ the dominant baseline table and dominant baseline table font
+ size. The font baseline table and font size applicable to the
+ glyph are used to compute the offset from the identified baseline
+ to the (0,0) point of the glyph. This second offset is subtracted
+ from the first offset to get the position of the (0,0) point in
+ the <a href="text.html#ShiftDirection">shift direction</a>. Both
+ offsets are computed by multiplying the baseline value from the
+ baseline table times the appropriate font size value.
+ </p>
+
+ <p>
+ If the 'alignment-baseline' identifies the dominant baseline, then
+ the first offset is zero and the glyph is aligned with the
+ dominant baseline; otherwise, the glyph is aligned with the chosen
+ alternate baseline.
+ </p>
+
+ <p>
+ The baseline-identifiers below are used in this
+ specification. Some of these are determined by baseline-tables
+ contained in a font
+ <a href="http://www.w3.org/TR/2006/REC-xsl11-20061205/#font-model">as
+ described in XSL</a> ([<a href="refs.html#ref-XSL">XSL</a>],
+ section 7.9.1). Others are computed from other font
+ characteristics as described below.
+ </p>
+
+ <dl>
+ <dt><b>alphabetic</b></dt>
+ <dd>
+ This identifies the baseline used by most alphabetic and
+ syllabic scripts. These include, but are not limited to, many
+ Western, Southern Indic, Southeast Asian (non-ideographic)
+ scripts.
+ </dd>
+ <dt><b>ideographic</b></dt>
+ <dd>
+ This identifies the baseline used by ideographic scripts. For
+ historical reasons, this baseline is at the bottom of the
+ ideographic EM box and not in the center of the ideographic EM
+ box. See the "central" baseline. The ideographic scripts include
+ Chinese, Japanese, Korean, and Vietnamese Chu Nom.
+ </dd>
+ <dt><b>hanging</b></dt>
+ <dd>
+ This identifies the baseline used by certain Indic
+ scripts. These scripts include Devanagari, Gurmukhi and Bengali.
+ </dd>
+ <dt><b>mathematical</b></dt>
+ <dd>
+ This identifies the baseline used by mathematical symbols.
+ </dd>
+ <dt><b>central</b></dt>
+ <dd>
+ This identifies a computed baseline that is at the center of the
+ EM box. This baseline lies halfway between the text-before-edge
+ and text-after-edge baselines.
+ <p class="note">
+ For ideographic fonts, this baseline is often used to
+ align the glyphs; it is an alternative to the ideographic
+ baseline.
+ </p>
+ </dd>
+ <dt><b>middle</b></dt>
+ <dd>
+ This identifies a baseline that is offset from the alphabetic
+ baseline in the <b>shift-direction</b> by 1/2 the value of the
+ x-height font characteristic. The position of this baseline may
+ be obtained from the font data or, for fonts that have a font
+ characteristic for "x-height", it may be computed using 1/2 the
+ "x-height". Lacking either of these pieces of information, the
+ position of this baseline may be approximated by the "central"
+ baseline.
+ </dd>
+ <dt><b>text-before-edge</b></dt>
+ <dd>
+ This identifies the before-edge of the EM box. The
+ position of this baseline may be specified in the
+ baseline-table or it may be calculated.
+ <p class="note">
+ The position of this baseline is normally around or at the top
+ of the ascenders, but it may not encompass all accents that
+ can appear above a glyph. For these fonts the value of the
+ "ascent" font characteristic is used. For ideographic fonts,
+ the position of this baseline is normally 1 EM in
+ the <b>shift-direction</b> from the "ideographic"
+ baseline. However, some ideographic fonts have a reduced width
+ in the inline-progression-direction to allow tighter
+ setting. When such a font, designed only for vertical
+ writing-modes, is used in a horizontal writing-mode, the
+ "text-before-edge" baseline may be less than 1 EM from the
+ text-after-edge.
+ </p>
+ </dd>
+ <dt><b>text-after-edge</b></dt>
+ <dd>
+ This identifies the after-edge of the EM box. The position of
+ this baseline may be specified in the baseline-table or it may
+ be calculated.
+ <p class="note">
+ For fonts with descenders, the position of this
+ baseline is normally around or at the bottom of the
+ descenders. For these fonts the value of the "descent"
+ font characteristic is used. For ideographic fonts, the
+ position of this baseline is normally at the
+ "ideographic" baseline.
+ </p>
+ </dd>
+ </dl>
+ <p>
+ There are, in addition, two computed baselines that are only
+ defined for line areas. Since SVG does not support the notion
+ of computations based on line areas, the two computed baselines
+ are mapped as follows:
+ </p>
+ <dl>
+ <dt><b>before-edge</b></dt>
+ <dd>For SVG, this is equivalent to <b>text-before-edge</b>.</dd>
+ <dt><b>after-edge</b></dt>
+ <dd>For SVG, this is equivalent to <b>text-after-edge</b>.</dd>
+ </dl>
+ <p>
+ There are also four baselines that are defined only for
+ horizontal writing-modes.
+ </p>
+ <dl>
+ <dt><b>top</b></dt>
+ <dd>
+ This baseline is the same as the "before-edge" baseline in a
+ horizontal writing-mode and is undefined in a vertical writing
+ mode.
+ </dd>
+ <dt id="TextTopBaselineDefinition"><b>text-top</b></dt>
+ <dd>
+ This baseline is the same as the "text-before-edge" baseline in a
+ horizontal writing-mode and is undefined in a vertical writing
+ mode.
+ </dd>
+ <dt><b>bottom</b></dt>
+ <dd>
+ This baseline is the same as the "after-edge" baseline in a
+ horizontal writing-mode and is undefined in a vertical writing
+ mode.
+ </dd>
+ <dt id="TextBottomBaselineDefinition"><b>text-bottom</b></dt>
+ <dd>
+ This baseline is the same as the "text-after-edge"
+ baseline in a horizontal writing-mode and is undefined in a
+ vertical writing mode.
+ </dd>
+ </dl>
+
+<h4 id='DominantBaselineProperty'>The <a>'dominant-baseline'</a> property</h4>
+
+ <p class="note">
+ See the CSS Line Layout Module 3 specification for the definition of
+ <a href="http://dev.w3.org/csswg/css-inline/#dominant-baseline-prop">'dominant-baseline'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="DominantBaselineProperty"><span class="propdef-title property">'dominant-baseline'</span></dt>
+ <dd>
+ <table class="propinfo" >
+ <tr>
+ <td><em>Value:</em> </td>
+ <td>auto | use-script | no-change | reset-size |
+ ideographic | alphabetic | hanging |
+ mathematical | central | middle | text-after-edge |
+ text-before-edge</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>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>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+ <p>
+ The "dominant-baseline" property is used to determine or
+ re-determine a scaled-baseline-table. A scaled-baseline-table is a
+ compound value with three components: a baseline-identifier for
+ the dominant-baseline, a baseline-table and a baseline-table
+ font-size. Some values of the property re-determine all three
+ values; other only re-establish the baseline-table font-size. When
+ the initial value, <span class='prop-value'>auto</span>, would
+ give an undesired result, this property can be used to explicitly
+ set the desire scaled-baseline-table.
+ </p>
+
+ <p>
+ Values for the property have the following meaning:
+ </p>
+
+ <dl>
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>
+ <p>
+ If this property occurs on a <a>'text'</a> element, then the
+ computed value depends on the value of the
+ <a>'writing-mode'</a> property. If the 'writing-mode' is
+ horizontal, then the value of the dominant-baseline component
+ is 'alphabetic', else if the 'writing-mode' is vertical, then
+ the value of the dominant-baseline component is 'central'.
+ </p>
+ <p>
+ If this property occurs on a <a>'tspan'</a>, <a>'tref'</a>,
+ <a>'altGlyph'</a> or <a>'textPath'</a> element, then the
+ dominant-baseline and the baseline-table components remain the
+ same as those of the parent <a>text content element</a>. If
+ the computed <a>'baseline-shift'</a> value actually shifts the
+ baseline, then the baseline-table font-size component is set
+ to the value of the <a>'font-size'</a> property on the element
+ on which the <a>'dominant-baseline'</a> property occurs,
+ otherwise the baseline-table font-size remains the same as
+ that of the element. If there is no parent <a>text content
+ element</a>, the scaled-baseline-table value is constructed as
+ above for <a>'text'</a> elements.
+ </p>
+ </dd>
+
+ <dt><span class="attr-value">use-script</span></dt>
+ <dd>
+ The dominant-baseline and the baseline-table components are set
+ by determining the predominant script of the character data
+ content. The <a>'writing-mode'</a>, whether horizontal or
+ vertical, is used to select the appropriate set of
+ baseline-tables and the dominant baseline is used to select the
+ baseline-table that corresponds to that baseline. The
+ baseline-table font-size component is set to the value of
+ the <a>'font-size'</a> property on the element on which
+ the <a>'dominant-baseline'</a> property occurs.
+ </dd>
+
+ <dt><span class="attr-value">no-change</span></dt>
+ <dd>
+ The dominant-baseline, the baseline-table, and the
+ baseline-table font-size remain the same as that of the
+ parent <a>text content element</a>.
+ </dd>
+
+ <dt><span class="attr-value">reset-size</span></dt>
+ <dd>
+ The dominant-baseline and the baseline-table remain the same,
+ but the baseline-table font-size is changed to the value of
+ the <a>'font-size'</a> property on this element. This re-scales
+ the baseline-table for the current <a>'font-size'</a>.
+ </dd>
+
+ <dt><span class="attr-value">ideographic</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set to be
+ 'ideographic', the derived baseline-table is constructed using
+ the 'ideographic' baseline-table in the nominal font, and the
+ baseline-table font-size is changed to the value of
+ the <a>'font-size'</a> property on this element.
+ </dd>
+
+ <dt><span class="attr-value">alphabetic</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set to be
+ 'alphabetic', the derived baseline-table is constructed using
+ the 'alphabetic' baseline-table in the nominal font, and the
+ baseline-table font-size is changed to the value of
+ the <a>'font-size'</a> property on this element.
+ </dd>
+
+ <dt><span class="attr-value">hanging</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set
+ to be 'hanging', the derived baseline-table is constructed
+ using the 'hanging' baseline-table in the nominal font, and
+ the baseline-table font-size is changed to the value of the
+ <a>'font-size'</a> property on this element.
+ </dd>
+
+ <dt><span class="attr-value">mathematical</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set to be
+ 'mathematical', the derived baseline-table is constructed using
+ the 'mathematical' baseline-table in the nominal font, and the
+ baseline-table font-size is changed to the value of
+ the <a>'font-size'</a> property on this element.
+ </dd>
+
+ <dt><span class="attr-value">central</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set to be
+ 'central'. The derived baseline-table is constructed from the
+ defined baselines in a baseline-table in the nominal font. That
+ font baseline-table is chosen using the following priority order
+ of baseline-table names: 'ideographic', 'alphabetic', 'hanging',
+ 'mathematical'. The baseline-table font-size is changed to the
+ value of the <a>'font-size'</a> property on this element.
+ </dd>
+
+ <dt><span class="attr-value">middle</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set to be
+ 'middle'. The derived baseline-table is constructed from the
+ defined baselines in a baseline-table in the nominal font. That
+ font baseline -table is chosen using the following priority
+ order of baseline-table names: 'alphabetic', 'ideographic',
+ 'hanging', 'mathematical'. The baseline-table font-size is
+ changed to the value of the <a>'font-size'</a> property on this
+ element.
+ </dd>
+
+ <dt><span class="attr-value">text-after-edge</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set
+ to be 'text-after-edge'. The derived baseline-table is
+ constructed from the defined baselines in a baseline-table in
+ the nominal font. The choice of which font baseline-table to
+ use from the baseline-tables in the nominal font is
+ implementation defined. The baseline-table font-size is
+ changed to the value of the <a>'font-size'</a> property on this
+ element.
+ <p class="note">
+ Using the following priority order of baseline-table names:
+ 'alphabetic', 'ideographic', 'hanging', 'mathematical' is
+ probably a reasonable strategy for determining which font
+ baseline-table to use.
+ </p>
+ </dd>
+
+ <dt><span class="attr-value">text-before-edge</span></dt>
+ <dd>
+ The baseline-identifier for the dominant-baseline is set
+ to be 'text-before-edge'. The derived baseline-table is
+ constructed from the defined baselines in a baseline-table in
+ the nominal font. The choice of which baseline-table to use
+ from the baseline-tables in the nominal font is
+ implementation defined. The baseline-table font-size is
+ changed to the value of the <a>'font-size'</a> property on this
+ element.
+ <p class="note">
+ Using the following priority order of baseline-table names:
+ 'alphabetic', 'ideographic', 'hanging', 'mathematical' is
+ probably a reasonable strategy for determining which font
+ baseline-table to use.
+ </p>
+ </dd>
+ </dl>
+
+ <p>
+ If there is no baseline table in the nominal font or if the
+ baseline table lacks an entry for the desired baseline, then the
+ user agent may use heuristics to determine the position of the
+ desired baseline.
+ </p>
+
+<h4 id='AlignmentBaselineProperty'>The <a>'alignment-baseline'</a> property</h4>
+
+ <p class="note">
+ See the CSS Line Layout Module 3 specification for the definition of
+ <a href="http://dev.w3.org/csswg/css-inline/#alignment-baseline">'alignment-baseline'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="AlignmentBaselineProperty"><span class="propdef-title property">'alignment-baseline'</span></dt>
+ <dd>
+ <table
+ class="propinfo" >
+ <tr>
+ <td><em>Value:</em> </td>
+ <td>auto | baseline | before-edge | text-before-edge
+ | middle | central | after-edge | text-after-edge |
+ ideographic | alphabetic | hanging | mathematical</td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em> </td>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <td><em>Applies to:</em> </td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</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>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+ <p>
+ This property specifies how an object is aligned with respect to
+ its parent. This property specifies which baseline of this element
+ is to be aligned with the corresponding baseline of the
+ parent. For example, this allows alphabetic baselines in Roman
+ text to stay aligned across font size changes. It defaults to the
+ baseline with the same name as the computed value of the
+ alignment-baseline property. That is, the position of
+ "ideographic" alignment-point in the
+ <b>block-progression-direction</b> is the position of the
+ "ideographic" baseline in the baseline-table of the object being
+ aligned.
+ </p>
+
+ <p>
+ Values have the following meanings:
+ </p>
+
+ <dl>
+ <dt><b>auto</b></dt>
+ <dd>The value is the dominant-baseline of the script to which
+ the character belongs - i.e., use the dominant-baseline of
+ the parent.</dd>
+
+ <dt><b>baseline</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the dominant-baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>before-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "before-edge" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>text-before-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "text-before-edge" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>middle</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "middle" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>central</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "central" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>after-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "after-edge" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>text-after-edge</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "text-after-edge" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>ideographic</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "ideographic" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>alphabetic</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "alphabetic" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>hanging</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "hanging" baseline of the parent <a>text content element</a>.</dd>
+
+ <dt><b>mathematical</b></dt>
+ <dd>The alignment-point of the object being aligned is
+ aligned with the "mathematical" baseline of the parent <a>text content element</a>.</dd>
+ </dl>
+
+<h4 id='BaselineShiftProperty'>The <a>'baseline-shift'</a> property</h4>
+
+ <p class="note">
+ See the CSS Line Layout Module 3 specification for the definition of
+ <a href="http://dev.w3.org/csswg/css-inline/#baseline-shift">'baseline-shift'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="BaselineShiftProperty"><span class="propdef-title property">'baseline-shift'</span></dt>
+ <dd>
+ <table class="propinfo">
+ <tr>
+ <td><em>Value:</em> </td>
+ <td>baseline | sub | super
+ | <a href="types.html#DataTypePercentage"><percentage></a>
+ | <a href="types.html#DataTypeLength"><length></a>
+ </td>
+ </tr>
+ <tr>
+ <td><em>Initial:</em> </td>
+ <td>baseline</td>
+ </tr>
+ <tr>
+ <td><em>Applies to:</em> </td>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ </tr>
+ <tr>
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><em>Percentages:</em> </td>
+ <td>refers to the "line-height" of the <a>'text'</a> element, which
+ in the case of SVG is defined to be equal to the <a>'font-size'</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>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+ <p>
+ The <a>'baseline-shift'</a> property allows repositioning of the
+ dominant-baseline relative to the dominant-baseline of the
+ parent <a>text content element</a>. The shifted object might be a
+ sub- or superscript. Within the shifted object, the whole
+ baseline-table is offset; not just a single baseline. The amount
+ of the shift is determined from information from the
+ parent <a>text content element</a>, the sub- or superscript offset
+ from the nominal font of the parent <a>text content element</a>,
+ percent of the "line-height" of the parent <a>text content
+ element</a> or an absolute value.
+ </p>
+
+ <p>
+ In SVG, the <a>'baseline-shift'</a> property represents a
+ supplemental adjustment to the baseline tables. The
+ <a>'baseline-shift'</a> property shifts the baseline tables for
+ each glyph to temporary new positions, for example to lift the
+ glyph into superscript or subscript position, but it does not
+ effect the current text position. When the current text position
+ is adjusted after rendering a glyph to take into account glyph
+ advance values, the adjustment happens as if there were no
+ baseline shift.
+ </p>
+
+ <p>
+ <a>'baseline-shift'</a> properties can nest. Each nested
+ <a>'baseline-shift'</a> is added to previous baseline shift
+ values.
+ </p>
+
+ <p>
+ Values for the property have the following meaning:
+ </p>
+
+ <dl>
+ <dt><strong>baseline</strong></dt>
+ <dd>
+ There is no baseline shift; the dominant-baseline remains in its
+ original position.
+ </dd>
+
+ <dt><strong>sub</strong></dt>
+ <dd>
+ The dominant-baseline is shifted to the default position for
+ subscripts. The offset to this position is determined using the
+ font data for the nominal font. Because in most fonts the
+ subscript position is normally given relative to the
+ "alphabetic" baseline, the user agent may compute the effective
+ position for subscripts for superscripts when some other
+ baseline is dominant. The suggested computation is to subtract
+ the difference between the position of the dominant baseline and
+ the position of the "alphabetic" baseline from the position of
+ the subscript. The resulting offset is determined by multiplying
+ the effective subscript position by the dominant baseline-table
+ font-size. If there is no applicable font data the user agent
+ may use heuristics to determine the offset.
+ </dd>
+
+ <dt><strong>super</strong></dt>
+ <dd>
+ The dominant-baseline is shifted to the default position for
+ superscripts. The offset to this position is determined using
+ the font data for the nominal font. Because in most fonts the
+ superscript position is normally given relative to the
+ "alphabetic" baseline, the user agent may compute the effective
+ position for superscripts when some other baseline is
+ dominant. The suggested computation is to subtract the
+ difference between the position of the dominant baseline and the
+ position of the "alphabetic" baseline from the position of the
+ superscript. The resulting offset is determined by multiplying
+ the effective superscript position by the dominant
+ baseline-table font-size. If there is no applicable font data
+ the user agent may use heuristics to determine the offset.
+ </dd>
+
+ <dt><strong><percentage></strong></dt>
+ <dd>
+ The computed value of the property is this percentage multiplied
+ by the computed "line-height" of the <a>'text'</a> element. The
+ dominant-baseline is shifted in the
+ <a href="text.html#ShiftDirection">shift direction</a> (positive
+ value) or opposite to the
+ <a href="text.html#ShiftDirection">shift direction</a>
+ (negative value) of the parent <a>text content element</a> by
+ the computed value. A value of "0%" is equivalent to
+ "baseline".
+ </dd>
+
+ <dt><strong><length></strong></dt>
+ <dd>
+ The dominant-baseline is shifted in the
+ <a href="text.html#ShiftDirection">shift direction</a> (positive
+ value) or opposite to the
+ <a href="text.html#ShiftDirection">shift direction</a> (negative
+ value) of the parent <a>text content element</a> by the
+ <length> value. A value of "0cm" is equivalent to
+ "baseline".
+ </dd>
+ </dl>
+
+<h2 id="TextLayoutPre">Pre-formatted text</h2>
+
+ <p class="note">
+ This option corresponds to normal SVG 1.1 text layout.
+ </p>
+
+ <p>
+ This is the default text layout method and is used in the absence
+ of a <a>content area</a> or a <a>'textPath'</a> element. In this
+ layout method, no automatic line breaking or word wrapping is
+ done. Nominally, the text is rendered as a single line. Multiple
+ lines of text can be obtained by precomputing line breaks and
+ using one of the following methods:
+
+ <ul>
+ <li>
+ Use a single <a>'text'</a> element with <a>'white-space'</a> set
+ to <span class="prop-value">pre</span>
+ or <span class="prop-value">pre-line</span>. Line spacing is set
+ by <a>'line-height'</a>.
+
+ <p class="note">New in SVG 2.</p>
+ <p class="issue">In Firefox. Needs to be fully specified.</p>
+ </li>
+
+ <li>
+ 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.
+ </li>
+
+ <li>
+ Use multiple <a>'text'</a> elements, one for each line of
+ text. (Not recommended as this prevents selection across multiple
+ lines of text -- see
+ <a href="text.html#TextSelection">Text selection and clipboard
+ operations</a>.)
+ </li>
+ </ul>
+ </p>
+
+<h3 id="TextLayoutPreMultiline">Multi-line text via 'white-space'</h3>
+
+ <p>
+ Multi-line pre-formatted text may be created by using the
+ <a>'white-space'</a> values <span class="prop-value">pre</span>
+ or <span class="prop-value">pre-line</span>. In these cases, a
+ line-feed or carriage return is preserved as a <a>forced line
+ break</a>. When a renderer encounters a <a>forced line break</a>,
+ the <a>current text
+ position</a> is set as follows:
+ <ul>
+ <li>
+ For horizontal text: <span class="val">x</span> is reset to
+ the initial <a>current
+ text position</a> while <span class="val">y</span> is
+ incremented by the computed value of the <a>'line-height'</a>
+ property.
+ </li>
+ <li>
+ For vertical text: <span class="val">y</span> is reset to the
+ initial value while <span class="val">x</span> is decremented
+ (for right-to-left block-progression-direction) or incremented
+ (for left-to-right block-progression-direction) by the computed
+ value of <a>'line-height'</a>.
+ <p class="issue">
+ SVG 1.1 only has right-to-left but CSS Writing
+ Modes Module Level 3 also has left-to-right. This is required
+ for Mongolian.
+ </p>
+ </li>
+ </ul>
+
+ </p>
+
+<h2 id="TextLayoutAuto">Auto-wrapped text</h2>
+
+ <p>
+ Text is automatically wrapped when a <a>content area</a> is
+ specified in the <a>'text'</a> element. The <a>content area</a>
+ defines the outermost container for wrapping text. A <a>wrapping
+ context</a> (set of exclusion areas) may also be given. The
+ actual <a>wrapping area</a> is defined by subtracting the
+ <a>wrapping context</a> from the <a>content area</a>. The
+ <a>wrapping context</a> may also be reduced by the value of the
+ <a>'shape-padding'</a> property. The effective area of an
+ exclusion may be enlarged by the value of the
+ <a>'shape-margin'</a> property.
+ </p>
+
+ <p class="note">
+ The flow of text inside a <a>wrapping area</a> mirrors that defined
+ by CSS. <span class="issue">List specs.</span>
+ </p>
+
+ <p>
+ In the case where the <a>content area</a> is defined by the by
+ the <a>'text/height'</a> or <a>'text/width'</a> attributes,
+ the <a>'tspan/x'</a> and <a>'tspan/y'</a> attributes on the
+ corresponding to the first rendered glyph define the
+ initial <a>current text position</a>. When the <a>content
+ area</a> is inside a <a>shape</a>, the initial <a>current text
+ position</a> is determined by <span class="issue">FIX ME, FIND
+ WHERE IN CSS THIS IS SPECED.</span>.
+ </p>
+
+ <p>
+ Except when used to determine the initial <a>current text
+ position</a>, all values <a>'tspan/x'</a> and <a>'tspan/y'</a>
+ are ignored on <a>'text'</a>, <a>'tspan'</a>, and <a>'tref'</a>
+ elements.
+ </p>
+
+ <p class="note">
+ The attributes <a>'text/x'</a> and <a>'text/y'</a> can provide a
+ natural fallback mechanism for SVG1.1 renderers for wrapped text.
+ <span class="issue">Provide an example (actually, all the example
+ SVG's displayed in this section do this).</span>.
+ </p>
+
+ <p class="issue">
+ How does shape-padding effect text when the content area is defined
+ by length or width. I am inclined to allow shape-padding only when
+ the content area is defined by an SVG shape.
+ </p>
+
+
+<h3 id="TextLayoutContentArea">Content Area</h3>
+
+ <p>
+ A <a>content area</a> 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
+ 'shape-inside' property that defines or references an
+ SVG <a>shape</a>.
+ </p>
+
+<h4 id='TextLayoutWidthHeight'>Via the 'width' and/or 'height' attributes</h4>
+
+ <p>
+ There are three possible ways to define a <a>content area</a> using the
+ <a>'text/width'</a> and <a>'text/height'</a> attributes:
+ <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 rectangle lies
+ between <a>'text/x'</a> and <a>'text/x'</a>
+ + <a>'text/width'</a>.
+
+ For right to left text, the rectangle lies
+ between <a>'text/x'</a> and <a>'text/x'</a>
+ − <a>'text/width'</a>.
+
+ 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
+ rectangle lies between <a>'text/y'</a> and <a>'text/y'</a>
+ + <a>'text/height'</a>.
+ 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>.
+ The rectangle lies between
+ <a>'text/x'</a> and <a>'text/x'</a> + <a>'text/width'</a>.
+ <a>'text/y'</a> and <a>'text/y'</a> + <a>'text/height'</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 <a>'shape-inside'</a> section.
+ </p>
+ </dd>
+ </dl>
+ In all cases, the initial <a>current text position</a> is taken
+ from the <a>'text/x'</a> and <a>'text/y'</a> attributes of
+ the <a>'text'</a> element.
+ </p>
+
+
+ <div class="example">
+ <p>An example of using <a>'text/width'</a> for wrapping horizontal text.</p>
+
+ <pre><![CDATA[
+<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 200 pixels.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-horizontal.svg"
+ alt="Image showing English text wrapped into two lines."/>
+ <p class="caption">
+ Horizontal text wrapping. The light-blue lines indicate the
+ limits of the <a>content area</a>. Note that the content
+ area is of infinite height. The red dot shows the initial
+ <a>current text
+ position</a>.
+ </p>
+ </div>
+ </div>
+
+ <div class="example">
+ <p>An example of using <a>'text/width'</a> for wrapping right to left horizontal text.</p>
+
+ <pre><![CDATA[
+<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"
+ font-family="PakType Naqsh"
+ font-size="20px" >هذا النص يلتف في 200 بكسل.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-horizontal-rl.svg"
+ alt="Image showing Arabic text wrapped into two lines."/>
+ <p class="caption">
+ Horizontal text wrapping for right to left text.
+ The light-blue lines indicate the
+ limits of the <a>content area</a>. Note that the content
+ area is of infinite height. The red dot shows the initial
+ <a>current text
+ position</a>.
+ </p>
+ </div>
+ <p class="issue">Check Arabic text.</p>
+ <p class="issue">None of the browsers render this SVG 1.1 figure
+ correctly. Only Batik seems to get it right.</p>
+ </div>
+
+ <div class="example">
+ <p>An example of using <a>'text/height'</a> for wrapping vertical text.</p>
+
+ <pre><![CDATA[
+<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" >テキストは１０文字後に折り返されます。</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-vertical.svg"
+ alt="Image showing vertical Japanese text wrapped into two columns."/>
+ <p class="caption">
+ Vertical text wrapping. The light-blue lines indicate the
+ limits of the <a>content area</a>. Note that the content
+ area is of infinite width. The red dot shows the initial
+ <a>current text
+ position</a>.
+ </p>
+ </div>
+ <p class="issue">This SVG image doesn't work in Firefox, even nightly.</p>
+ <p class="issue">Check translation.</p>
+ </div>
+
+<h4 id='TextShapeInside'>The <span class="property">'shape-inside'</span> property</h4>
+
+ <p>
+ The <a>'shape-inside'</a> property allows one to set the <a>content area</a>
+ to a <a>CSS basic shape</a> or to an SVG <a>shape</a>.
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ShapeInsideProperty">shape-inside</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>outside-shape | auto | <shape> | <uri></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>outside-shape</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'text'</a> elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>computed lengths for <shape>, the absolute URI for <uri>, otherwise as specified </td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes, see <a href="http://dev.w3.org/csswg/css-shapes/#basic-shape-interpolation">Interpolation of Basic Shapes</a></td>
+ </tr>
+ </table>
+
+ <dl>
+ <dt><span class="attr-value">outside-shape</span></dt>
+ <dd>
+ The shape is computed based on the computed value of the ‘shape-outside’ property.
+ <p class="issue">Check if the value "outside-shape" is useful.</p>
+ </dd>
+
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>
+ The shape is computed based on the content box of the element.
+ <p class="issue">Check if the value "auto" is useful. Would it
+ map to the viewBox?</p>
+ </dd>
+
+ <dt><span class="attr-value"><shape></span></dt>
+ <dd>
+ The shape is computed based on the values of one of
+ ‘rectangle’,‘ circle’, ‘ellipse’ or ‘polygon’. Percentage
+ values are resolved to the current <a>'viewBox'</a>.
+
+ <div class="example">
+ <p>
+ An example of using a CSS basic shape for wrapping horizontal text.
+ </p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewBox="0 0 300 100">
+
+ <text shape-inside="rectangle(50,10,200,80)"
+ font-family="sans-serif"
+ font-size="20px" >This text wraps in a rectangle.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-rectangle.svg"
+ alt="Image showing text wrapped inside a rectangle."/>
+ <p class="caption">
+ Horizontal text wrapping inside a CSS rectangle shape.
+ The light-blue lines indicate the limits of the
+ <a>content area</a>.
+ </p>
+ </div>
+ </div>
+
+ <div class="issue">
+ <p>
+ Shapes also defines 'inset-rectangle'. It might be
+ interesting to be able to write:
+
+ <pre><![CDATA[
+ <rect ...>
+ <text shape-inside="inset-rectangle(20px,10px,20px,10px)">...</text>
+ </rect>
+ ]]></pre>
+
+ where the insets are based on the rectangle geometry (or
+ the bounding-box before any transformation).
+ </p>
+ </div>
+ </dd>
+
+ <dt><span class="attr-value"><uri></span></dt>
+ <dd>
+ If the <uri> references an SVG <a>shape</a> element,
+ that element defines the shape. Otherwise, if the <uri>
+ references an image, the shape is extracted and computed based
+ on the alpha channel of the specified image. If the
+ <uri> does not reference an SVG shape element or an
+ image, the effect is as if the value ‘auto’ had been
+ specified.
+ <p class="issue">Check if we allow referencing an image. There
+ are security issues. If we allow it, then the
+ 'shape-image-threshold' property is also required.</p>
+
+ <div class="example">
+ <p>
+ An example of using a reference to an SVG <a>shape</a> for wrapping horizontal text.
+ </p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewBox="0 0 300 100">
+
+ <defs>
+ <rect id="wrap" x="50" y="10" width="200" height="80"/>
+ </defs>
+
+ <text shape-inside="url(#wrap)"
+ font-family="sans-serif"
+ font-size="20px" >This text wraps in a rectangle.</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-rectangle.svg"
+ alt="Image showing text wrapped inside a rectangle."/>
+ <p class="caption">
+ Horizontal text wrapping inside an SVG rectangle shape.
+ The light-blue lines indicate the limits of the
+ <a>content area</a>.
+ </p>
+ </div>
+ </div>
+ </dd>
+
+ </dl>
+
+
+ <p class="note">
+ See the CSS Shapes Module Level 2 for the definition of
+ <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/#shape-inside-property">'shape-inside'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+ <p class="issue">
+ 'shape-inside' was removed when the CSS Exclusions and Shapes
+ Module was split into separate Exclusions and Shapes modules. At
+ the Tokyo joint SVG/CSS F2F meeting, it was agreed that it would
+ reappear in CSS Shapes Module Level 2.
+ </p>
+
+<h4 id='TextShapeOutside'>The <span class="property">'shape-outside'</span> property</h4>
+
+ <p class="note">
+ See <a href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">CSS reference</a>.
+ </p>
+
+<h4 id='TextShapeMargin'>The <span class="property">'shape-margin'</span> property</h4>
+
+ <p>
+ The <a>'shape-margin'</a> property adds a margin to a
+ <a>'shape-outside'</a>. This defines a new shape where every
+ point is the specified distance from the shape-outside. This
+ property takes on positive values only.
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ShapeMarginProperty">shape-margin</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a href="types.html#DataTypeLengths"><length></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'text'</a> elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>the absolute length </td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <div class="example">
+ <p>An example of using <a>'shape-margin'</a></p>.
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="100" viewBox="0 0 300 100">
+
+ <circle id="circle" cx="150" cy="150" r="125" fill="none" stroke="black"/>
+ <text shape-outside="url(#circle)"
+ shape-margin="25"
+ font-family="DejaVu Sans"
+ font-size="18px"
+ text-align="justified"
+ line-height="110%">This is an example of
+ wrapped text in SVG 2! There should be a 25
+ pixel margin around the text. The text is
+ justified on both sides. It looks good!</text>
+
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-margin.svg"
+ alt="Image showing horizontal text wrapped inside a circle with a margin."/>
+ <p class="caption">
+ Horizontal text wrapping inside a circle with
+ a <a>'shape-margin'</a>. The outer black circle shows
+ the <a>content area</a>. The inner blue circle shows
+ the <a>wrapping area</a>.
+ </p>
+ </div>
+ <p class="issue">
+ How much more needs to be specified here? How is the current
+ text position determined? Etc.? Reference CSS Line Layout?
+ </p>
+ </div>
+
+ <p class="note">
+ See <a href="http://dev.w3.org/csswg/css-shapes/#shape-margin-property">CSS reference</a>.
+ </p>
+
+<h4 id='TextShapePadding'>The <span class="property">'shape-padding'</span> property</h4>
+
+ <p class="note">See
+ <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/#wrap-padding'/">CSS reference</a> (wrap-padding renamed to shape-padding).
+ </p>
+
+<h3>Alignment</h3>
+
+<h4 id='TextAlign'>Text alignment: the <span class="property">'text-align'</span> property</h4>
+
+ <p class="note">
+ See the CSS Text Module Level 3 specification for the definition
+ of <a href="http://dev.w3.org/csswg/css-text/#text-align">'text-align'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h4 id='TextAlignLast'>Last line alignment: the <span class="property">'text-align-last'</span> property</h4>
+
+ <p class="note">
+ See the CSS Text Module Level 3 specification for the definition
+ of <a href="http://dev.w3.org/csswg/css-text/#text-align-last">'text-align-last'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h3>Line Breaking</h3>
+
+<h4>Breaking Rules for Punctuation: the ‘line-break’ property</h4>
+<h4>Breaking Rules for Letters: the ‘word-break’ property</h4>
+<h4>Hyphenation Control: the ‘hyphens’ property</h4>
+<h4>Overflow Wrapping: the ‘word-wrap’/‘overflow-wrap’ property</h4>
+
+<h3>Edge Effects</h3>
+
+<h4>First Line Indentation: the ‘text-indent’ property</h4>
+<h4>Hanging Punctuation: the ‘hanging-punctuation’ property</h4>
+
+<h2 id="TextLayoutPath">Text on a path</h2>
+
+<edit:with element='textPath'>
+
+<p>In addition to text drawn in a straight line, SVG also includes the ability
+to place text so that it follows the path in a <a>'path'</a> element.
+To specify that a block of text is to be rendered along the shape of
+a <a>'path'</a>, include the given text within a <a>'textPath'</a> element which
+includes an <a>'xlink:href'</a> attribute with an <a>IRI reference</a> to
+a <a>'path'</a> element, or a <a>'d'</a> attribute that specifies the path data
+directly.</p>
+
+ <p>
+ Text on a path is conceptional like a single line
+ of <a href="text.html#TextLayoutPre">Pre-formatted</a> text that
+ is transformed to follow the path. Except as indicated, all the
+ properties that apply to pre-formatted text apply to text on a
+ path.
+ </p>
+
+<h3 id="TextPathElement">The <span class="element-name">'textPath'</span> element</h3>
+
+<edit:elementsummary name='textPath'/>
+
<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>
+ <td>Have a more precise explanation of text path stretch methods.</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>
+ <td><a href="http://www.w3.org/2011/11/17-svg-irc#T22-23-10">We will clarify <span class='attr-value'>method="stretch"</span> on <span class="element-name">>'textPath'</span> elements.</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
- 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
- achieve exact alignment, in visual rendering order after
- 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
- 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
- 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
- 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
- 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>
-
- <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>
- </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>
+ <td>Improve interoperability of the feature.</td>
</tr>
<tr>
<th>Owner:</th>
@@ -667,1442 +4711,553 @@
</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
- 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
- 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>
- 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>
- 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 />
- 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
+ <dt id="TextPathElementStartOffsetAttribute"><span
+ class="adef">startOffset</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
- achieve exact alignment, in visual rendering order after
- 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
- 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
- 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 />
+ <dd>An offset from the start of the path for the initial
+ current text position, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.<br />
+ If a <a
+ href="types.html#DataTypeLength"><length></a> other
+ than a percentage is given, then the <a>'startOffset'</a> represents a distance
+ along the path measured in the current user coordinate
+ system.<br />
+ If a percentage is given, then the <a>'startOffset'</a> represents a
+ percentage distance along the entire path. Thus, <span
+ class="attr-value">startOffset="0%"</span> indicates the
+ start point of the path and <span
+ class="attr-value">startOffset="100%"</span> indicates the
+ end point of the path.<br />
+ <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>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>
-<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
+ <dt><a id="TextPathElementMethodAttribute" ></a> <span
+ class="adef">method</span> = "<span
+ class="attr-value">align | stretch</span>"</dt>
+ <dd>Indicates the method by which text should be rendered
+ along the path.<br />
+ A value of <span class="attr-value">align</span> indicates
+ that the glyphs should be rendered using simple 2x3
+ transformations such that there is no stretching/warping of
+ the glyphs. Typically, supplemental rotation, scaling and
+ translation transformations are done for each glyph to be
+ rendered. As a result, with <span
+ class="attr-value">align</span>, fonts where the glyphs are
+ designed to be connected (e.g., cursive fonts), the
+ connections may not align properly when text is rendered
+ along a path.<br />
+ A value of <span class="attr-value">stretch</span>
+ indicates that the glyph outlines will be converted into
+ paths, and then all end points and control points will be
+ adjusted to be along the perpendicular vectors from the
+ path, thereby stretching and possibly warping the glyphs.
+ With this approach, connected glyphs, such as in cursive
+ scripts, will maintain their connections.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">align</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt><a id="TextPathElementSpacingAttribute"></a> <span
+ class="adef">spacing</span> = "<span
+ class="attr-value">auto | exact</span>"</dt>
+ <dd>Indicates how the user agent should determine the
+ spacing between glyphs that are to be rendered along a
+ path.<br />
+ A value of <span class="attr-value">exact</span> indicates
+ that the glyphs should be rendered exactly according to the
+ spacing rules as specified in <a
+ href="text.html#TextpathLayoutRules">Text on a path layout
+ rules</a>.<br />
+ A value of <span class="attr-value">auto</span> indicates
+ that the user agent should use text-on-a-path layout
+ algorithms to adjust the spacing between glyphs in order to
+ achieve visually appealing results.<br />
+ If the attribute is not specified, the effect is as if a
+ value of <span class="attr-value">exact</span> were
+ specified.<br />
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt id="TextPathElementDAttribute"><span
+ class="adef">d</span> =
+ "<a href="paths.html#PathData"><em>path data</em></a>"</dt>
+ <dd>The definition of the path onto which the glyphs will be rendered.
+ The handling of erroneous path data follows the behavior specified in
+ the <a href="implnote.html#PathElementImplementationNotes"><span
+ class="element-name">'path'</span> element implementation
+ notes</a>.<br/>
+ If both the <a>'d'</a> attribute and <a>'xlink:href'</a>
+ attributes are specified, it is as if the <a>'xlink:href'</a> attribute
+ were not specified for the purposes of rendering.
+ In the <a>SVGTextPathElement</a> interface both values will still be
+ reflected.
+ Furthermore, if a value for <a>'xlink:href'</a> is specified in markup
+ and path data is subsequently specified via the
+ <a>SVGAnimatedPathData::pathSegList</a> member of the
+ <a>SVGTextPathElement</a>, then this is equivalent to specifying the
+ <a>'d'</a> attribute—the <a>'xlink:href'</a> will be disregarded
+ for rendering and the path specified in the
+ <a>SVGAnimatedPathData::pathSegList</a> will be used instead.
+ <br/>
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span></dd>
+ <dt><a id="TextPathElementHrefAttribute"></a> <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 />
+ <dd>An <a href="linking.html#IRIReference">IRI
+ reference</a> to the <a>'path'</a> element onto which
+ the glyphs will be rendered. If <iri> is an invalid
+ reference (e.g., no such element exists, or the referenced
+ element is not a <a>'path'</a>), then the <a>'textPath'</a> element is
+ in error and its entire contents shall not be rendered by the user
+ agent.<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>
-
+<p>The path data coordinates within the referenced <a>'path'</a>
+element are assumed to be in the same coordinate system as the
+current <a>'text'</a> element, not in the coordinate system where
+the <a>'path'</a> element is defined. The <a>'transform'</a>
+attribute on the referenced <a>'path'</a> element represents a
+supplemental transformation relative to the current user coordinate
+system for the current <a>'text'</a> element, including any
+adjustments to the current user coordinate system due to a possible
+<a>'transform'</a> property on the current <a>'text'</a> element.
+For example, the following fragment of SVG content:</p>
+
+<pre>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <g <span
+style="font-weight:bold; color:red">transform="translate(25,25)"</span>>
+ <defs>
+ <path id="path1" <span
+style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
+ </defs>
+ </g>
+ <text <span
+style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
+ <textPath xlink:href="#path1">Text on a path1</textPath>
+ </text>
+</svg>
+</pre>
+
+<p>should have the same effect as the following:</p>
+
+<pre>
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+ <g <span
+style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
+ <defs>
+ <path id="path1" <span
+style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
+ </defs>
+ <text>
+ <textPath xlink:href="#path1">Text on a path1</textPath>
+ </text>
+ </g>
+</svg>
+</pre>
+
+<p>Note that the <code
+style="font-weight:bold; color:red">transform="translate(25,25)"</code>
+has no effect on the <a>'textPath'</a> element, whereas the
+<code
+style="font-weight:bold; color:blue">transform="rotate(45)"</code>
+applies to both the <a>'text'</a>
+and the use of the <a>'path'</a>
+element as the referenced shape for text on a path.</p>
+
+<p id="ExampleToap01"><span class="example-ref">Example toap01</span> provides a
+simple example of text on a path:</p>
+
+<edit:example href='images/text/toap01.svg' name='toap01' description="simple text on a path" image='yes' link='yes'/>
+
+<p id="ExampleToap02"><span class="example-ref">Example toap02</span> shows how <a>'tspan'</a> elements can be
+included within <a>'textPath'</a>
+elements to adjust styling attributes and adjust the current
+text position before rendering a particular glyph. The first
+occurrence of the word "up" is filled with the color red.
+Attribute <a>'tspan/dy'</a> is used to lift the word "up"
+from the baseline.</p>
+
+<edit:example href='images/text/toap02.svg' name='toap02' description="tspan within textPath" image='yes' link='yes'/>
+
+<p id="ExampleToap03"><span class="example-ref">Example toap03</span> demonstrates
+the use of the <a>'startOffset'</a>
+attribute on the <a>'textPath'</a>
+element to specify the start position of the text string as a
+particular position along the path. Notice that glyphs that
+fall off the end of the path are not rendered (see <a
+href="text.html#TextpathLayoutRules">text on a path layout
+rules</a>).</p>
+
+<edit:example href='images/text/toap03.svg' name='toap03' description="text on a path with startOffset attribute" image='yes' link='yes'/>
+
+<h3 id="TextpathLayoutRules">Text on a path layout rules</h3>
+
+<p>Conceptually, for text on a path the target path is
+stretched out into either a horizontal or vertical straight
+line segment. For horizontal text layout flows, the path is
+stretched out into a hypothetical horizontal line segment such
+that the start of the path is mapped to the left of the line
+segment. For vertical text layout flows, the path is stretched
+out into a hypothetical vertical line segment such that the
+start of the path is mapped to the top of the line segment. The
+standard <a href="text.html#TextLayout">text layout</a> rules
+are applied to the hypothetical straight line segment and the
+result is mapped back onto the target path. Vertical and
+bidirectional <a href="text.html#TextLayout">text layout</a>
+rules also apply to text on a path.</p>
+<p>The <a href="text.html#ReferenceOrientation">reference
+orientation</a> is determined individually for each glyph that
+is rendered along the path. For horizontal text layout flows,
+the reference orientation for a given glyph is the vector that
+starts at the intersection point on the path to which the glyph
+is attached and which points in the direction 90 degrees
+counter-clockwise from the angle of the curve at the
+intersection point. For vertical text layout flows, the
+reference orientation for a given glyph is the vector that
+starts at the intersection point on the path to which the glyph
+is attached and which points in the direction 180 degrees from
+the angle of the curve at the intersection point.</p>
+
+<p id="ExampleToap04"><span class="example-ref">Example toap04</span> will be used
+to illustrate the particular layout rules for text on a path
+that supplement the basic <a href="text.html#TextLayout">text
+layout</a> rules for straight line horizontal or vertical
+text.</p>
+
+<edit:example href='images/text/toap04.svg' name='toap04' description="text on a path layout rules" image='yes' link='yes'/>
+
+<p>The following picture does an initial zoom in on the first
+glyph in the <a>'text'</a> element.</p>
+<img alt="Image that shows text on a path"
+src="images/text/toap05.png" width="288" height="91" />
+
+<p>The small dot above shows the point at which the glyph is
+attached to the path. The box around the glyph shows the glyph
+is rotated such that its horizontal axis is parallel to the
+tangent of the curve at the point at which the glyph is
+attached to the path. The box also shows the glyph's
+<dfn id="CharWidth">charwidth</dfn> (i.e., the amount which
+the current text position advances horizontally when the glyph
+is drawn using horizontal text layout).</p>
+
+<p>The next picture zooms in further to demonstrate the
+detailed layout rules.</p>
+<img alt="Image that shows text on a path"
+src="images/text/toap06.png" width="288" height="176" />
+
+<p>For left-to-right horizontal text layout along a path (i.e.,
+when the glyph orientation is perpendicular to the <a
+href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
+the layout rules are as follows:</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>
+ <li>Determine the <dfn id="StartPointOnPath">startpoint-on-the-path</dfn> for the
+ first glyph using attribute <a>'startOffset'</a> and property
+ <a>'text-anchor'</a>. For <span class='prop-value'>text-anchor:start</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is <a>'startOffset'</a> distance along the
+ path from the start of the path, calculated using the user
+ agent's <a href="paths.html#DistanceAlongAPath">distance
+ along the path</a> algorithm. For <span class="prop-value">text-anchor:middle</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is [ <a>'startOffset'</a> minus half of the
+ total advance values for all of the glyphs in the <a>'textPath'</a> element ] distance
+ along the path from the start of the path, calculated using
+ the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. For <span class="prop-value">text-anchor:end</span>,
+ startpoint-on-the-path is the point on the path which
+ represents the point on the path which is [ <a>'startOffset'</a> minus the total
+ advance values for all of the glyphs in the <a>'textPath'</a> element ]. Before
+ rendering the first glyph, the horizontal component of the
+ startpoint-on-the-path is adjusted to take into account
+ various horizontal alignment text properties and attributes,
+ such as a <a>'tspan/dx'</a> attribute value on a <a>'tspan'</a> element. (In the
+ picture above, the startpoint-on-the-path is the leftmost dot
+ on the path.)</li>
+
+ <li>Determine the glyph's charwidth (i.e., the amount which
+ the current text position advances horizontally when the
+ glyph is drawn using horizontal text layout). (In the picture
+ above, the charwidth is the distance between the two dots at
+ the side of the box.)</li>
+
+ <li>Determine the point on the curve which is charwidth
+ distance along the path from the startpoint-on-the-path for
+ this glyph, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. This point is the <dfn id="EndPointOnPath">endpoint-on-the-path</dfn> for the
+ glyph. (In the picture above, the endpoint-on-the-path for
+ the glyph is the rightmost dot on the path.)</li>
+
+ <li>Determine the <dfn id="MidPointOnPath">midpoint-on-the-path</dfn>, which is
+ the point on the path which is "halfway" (user agents can
+ choose either a distance calculation or a parametric
+ calculation) between the startpoint-on-the-path and the
+ endpoint-on-the-path. (In the picture above, the
+ midpoint-on-the-path is shown as a white dot.)</li>
+
+ <li>Determine the <dfn id="GlyphMidline">glyph-midline</dfn>, which is the
+ vertical line in the glyph's coordinate system that goes
+ through the glyph's x-axis midpoint. (In the picture above,
+ the glyph-midline is shown as a dashed line.)</li>
+
+ <li>Position the glyph such that the glyph-midline passes
+ through the midpoint-on-the-path and is perpendicular to the
+ line through the startpoint-on-the-path and the
+ endpoint-on-the-path.</li>
+
+ <li>Align the glyph vertically relative to the
+ midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
+ specified values for attribute <a>'tspan/dy'</a> on a <a>'tspan'</a> element. In the
+ example above, the <a>'alignment-baseline'</a> property is
+ unspecified, so the initial value of <span class="prop-value">alignment-baseline:baseline</span>
+ will be used. There are no <a>'tspan'</a> elements; thus, the
+ baseline of the glyph is aligned to the
+ midpoint-on-the-path.</li>
+
+ <li>For each subsequent glyph, set a new
+ startpoint-on-the-path as the previous endpoint-on-the-path,
+ but with appropriate adjustments taking into account
+ horizontal kerning tables in the font and current values of
+ various attributes and properties, including <a
+ href="text.html#SpacingProperties">spacing properties</a> and
+ <a>'tspan'</a> elements with values
+ provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
+ calculated as distance adjustments along the path, calculated
+ using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.</li>
+
+ <li>Glyphs whose midpoint-on-the-path are off either end of
+ the path are not rendered.</li>
+
+ <li>Continue rendering glyphs until there are no more
+ glyphs.</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>
+<p>Comparable rules are used for top-to-bottom vertical text
+layout along a path (i.e., when the glyph orientation is
+parallel with the <a
+href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
+the layout rules are as follows:</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>
+ <li>Determine the startpoint-on-the-path using the same
+ method as for horizontal text layout along a path, except
+ that before rendering the first glyph, the horizontal
+ component of the startpoint-on-the-path is adjusted to take
+ into account various vertical alignment text properties and
+ attributes, such as a <a>'tspan/dy'</a> attribute value on a <a>'tspan'</a> element.</li>
+
+ <li>Determine the glyph's charheight (i.e., the amount which
+ the current text position advances vertically when the glyph
+ is drawn using vertical text layout).</li>
+
+ <li>Determine the point on the curve which is charheight
+ distance along the path from the startpoint-on-the-path for
+ this glyph, calculated using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. This point is the endpoint-on-the-path
+ for the glyph.</li>
+
+ <li>Determine the midpoint-on-the-path, which is the point on
+ the path which is "halfway" (user agents can choose either a
+ distance calculation or a parametric calculation) between the
+ startpoint-on-the-path and the endpoint-on-the-path.</li>
+
+ <li>Determine the glyph-midline, which is the horizontal line
+ in the glyph's coordinate system that goes through the
+ glyph's y-axis midpoint.</li>
+
+ <li>Position the glyph such that the glyph-midline passes
+ through the midpoint-on-the-path and is perpendicular to the
+ line through the startpoint-on-the-path and the
+ endpoint-on-the-path.</li>
+
+ <li>Align the glyph horizontally (where horizontal is
+ relative to the glyph's coordinate system) relative to the
+ midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
+ specified values for attribute <a>'tspan/dx'</a> on a <a>'tspan'</a> element.</li>
+
+ <li>For each subsequent glyph, set a new
+ startpoint-on-the-path as the previous endpoint-on-the-path,
+ but with appropriate adjustments taking into account vertical
+ kerning tables in the font and current values of various
+ attributes and properties, including <a
+ href="text.html#SpacingProperties">spacing properties</a> and
+ <a>'tspan'</a> elements with values
+ provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
+ calculated as distance adjustments along the path, calculated
+ using the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm.</li>
+
+ <li>Glyphs whose midpoint-on-the-path are off either end of
+ the path are not rendered.</li>
+
+ <li>Continue rendering glyphs until there are no more
+ glyphs.</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>
- <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>
- </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>
- </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>
- </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>
+<p>In the calculations above, if either the
+startpoint-on-the-path or the endpoint-on-the-path is off the
+end of the path, then extend the path beyond its end points
+with a straight line that is parallel to the tangent at the
+path at its end point so that the midpoint-on-the-path can
+still be calculated.</p>
+
+<p>When the <a
+href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
+is horizontal, then any <span class="attr-name">'x'</span> attributes on
+<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
+new absolute offsets along the path, thus providing explicit
+new values for startpoint-on-the-path. Any <span class="attr-name">'y'</span> attributes on
+<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements are
+ignored. When the <a
+href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
+is vertical, then any <span class="attr-name">'y'</span> attributes on
+<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
+new absolute offsets along the path, thus providing explicit
+new values for startpoint-on-the-path. Any <span class="attr-name">'x'</span>
+attributes on <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or
+<a>'altGlyph'</a> elements are ignored.</p>
+
+</edit:with>
<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[
+ <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>
+
+<h3 id='TextOverflowProcessing'>Text overflow processing:
+ the <span class="property">'text-overflow'</span> property</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 region 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
+ 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 region. In the case of wrapped text, the
+ region is the <a>wrapping area</a>. In the case of text on a path,
+ a region is determined by the path length. Pre-formatted text does
+ not create a region.
+ </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 region an ellipsis is
+ rendered such that it fits within the given region. 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 region, 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>
+
+ <p class="issue">Need updated example.</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>
@@ -2127,798 +5282,12 @@
</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-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>
</div>
-</div>
-
-</div>
-
-<h2 id='AlignmentProperties'>Alignment properties</h2>
-
-<h3 id='TextAlignmentProperties'>Text alignment properties</h3>
-
-<p>The <a>'text-anchor'</a> property is used to align (start-, middle- or
-end-alignment) a string of text relative to a given point.</p>
-
-<p>The <a>'text-anchor'</a> property is applied to each individual
-<a href="text.html#TextChunks">text chunk</a> within a given <a>'text'</a>
-element. Each text chunk has an initial current text position, which represents
-the point in the user coordinate system resulting from (depending on context)
-application of the <a>'text/x'</a> and <a>'text/y'</a> attributes on the <a>'text'</a>
-element, any <a>'tspan/x'</a> or <a>'tspan/y'</a> attribute values on a <a>'tspan'</a>,
-<a>'tref'</a> or <a>'altGlyph'</a> element assigned explicitly to the first
-rendered character in a text chunk, or determination of the initial current
-text position for a <a>'textPath'</a> element.</p>
-
-<table class="propdef">
- <tr>
- <th>Name:</th>
- <td><dfn id="TextAnchorProperty">text-anchor</dfn></td>
- </tr>
- <tr>
- <th>Value:</th>
- <td>start | middle | end</td>
- </tr>
- <tr>
- <th>Initial:</th>
- <td>start</td>
- </tr>
- <tr>
- <th>Applies to:</th>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <th>Inherited:</th>
- <td>yes</td>
- </tr>
- <tr>
- <th>Percentages:</th>
- <td>N/A</td>
- </tr>
- <tr>
- <th>Media:</th>
- <td>visual</td>
- </tr>
- <tr>
- <th>Computed value:</th>
- <td>as specified</td>
- </tr>
- <tr>
- <th><a>Animatable</a>:</th>
- <td>yes</td>
- </tr>
-</table>
-
-<p>Values have the following meanings:</p>
-
-<dl>
- <dt><span class="attr-value">start</span></dt>
- <dd>The rendered characters are aligned such that the start
- of the resulting rendered text is at the initial current text position.
- For an element with a
- <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
- property value of <span class="prop-value">"ltr"</span>
- (typical for most European languages),
- the left side of the text is rendered at the initial text
- position. For an element with a
- <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
- property value of <span class="prop-value">"rtl"</span>
- (typical for Arabic and Hebrew),
- the right side of the text is rendered at the initial text
- position. For an element with a vertical primary text
- direction (often typical for Asian text),
- the top side of the text is rendered at the initial text position.
- </dd>
-
- <dt><span class="attr-value">middle</span></dt>
- <dd>The rendered characters are aligned such that the geometric middle
- of the resulting rendered text is at the initial current text position.</dd>
-
- <dt><span class="attr-value">end</span></dt>
- <dd>The rendered characters are aligned such that the end of
- the resulting rendered text is at the initial current text position.
- For an element with a
- <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
- property value of <span class="prop-value">"ltr"</span>
- (typical for most European languages),
- the right side of the text is rendered at the initial text
- position. For an element with a
- <a href="text.html#DirectionProperty"><span class="attr-name">'direction'</span></a>
- property value of <span class="prop-value">"rtl"</span>
- (typical for Arabic and Hebrew),
- the left side of the text is rendered at the initial text
- position. For an element with a vertical primary text
- direction (often typical for Asian text),
- the bottom of the text is rendered at the initial text position.
- </dd>
-</dl>
-
-<h3 id="BaselineAlignmentProperties">Baseline alignment properties</h3>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Align with CSS for baseline alignment functionality.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2012/01/13-svg-irc#T03-24-06">SVG 2 will deprecate <span class="property">'baseline-shift'</span> and use <span class="property">'vertical-align'</span> instead.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To align with CSS.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3281">ACTION-3281</a>)</td>
- </tr>
- </table>
-</div>
-
-<p>An overview of baseline alignment and baseline tables can be
-found above in <a href="text.html#FontsTablesBaselines">Fonts,
-font tables and baselines</a>.</p>
-
-<p>One of the characteristics of international text is that
-there are different baselines (different alignment points) for
-glyphs in different scripts. For example, in horizontal
-writing, ideographic scripts, such as Han Ideographs, Katakana,
-Hiragana, and Hangul, alignment occurs with a baseline near the
-bottoms of the glyphs; alphabetic based scripts, such as Latin,
-Cyrillic, Hebrew, Arabic, align a point that is the bottom of
-most glyphs, but some glyphs descend below the baseline; and
-Indic based scripts are aligned at a point that is near the top
-of the glyphs.</p>
-
-<p>When different scripts are mixed on a line of text, an
-adjustment must be made to ensure that the glyphs in the
-different scripts are aligned correctly with one another.
-OpenType [<a
-href="http://www.microsoft.com/typography/otspec/">OPENTYPE</a>]
-fonts have a Baseline table (BASE) [<a
-href="http://www.microsoft.com/typography/otspec/base.htm">OPENTYPE-BASETABLE</a>]
-that specifies the offsets of the alternative baselines from
-the current baseline.</p>
-
-<p>SVG uses a similar baseline table model that assumes one
-script (at one font-size) is the "dominant run" during
-processing of a <a>'text'</a> element; that is, all
-other baselines are defined in relation to this dominant run.
-The baseline of the script with the dominant run is called the
-<dfn>dominant baseline</dfn>. So, for
-example, if the dominant baseline is the alphabetic baseline,
-there will be offsets in the baseline table for the alternate
-baselines, such as the ideographic baseline and the Indic
-baseline. There will also be an offset for the math baseline
-which is used for some math fonts. Note that there are separate
-baseline tables for horizontal and vertical writing-modes. The
-offsets in these tables may be different for horizontal and
-vertical writing.</p>
-
-<p>The baseline table established at the start of processing of
-a <a>'text'</a> element is called the
-<dfn>dominant baseline table</dfn>.</p>
-
-<p>Because the value of the <a>'font-family'</a> property is a list
-of fonts, to insure a consistent choice of baseline table we
-define the <em>nominal font</em> in a font list as the first
-font in the list for which a glyph is available. This is the
-first font that could contain a glyph for each character
-encountered. (For this definition, glyph data is assumed to be
-present if a font substitution is made or if the font is
-synthesized.) This definition insures a content independent
-determination of the font and baseline table that is to be
-used.</p>
-
-<p>The value of the <a>'font-size'</a> property on the <a>'text'</a> element establishes the
-<dfn>dominant baseline table font size</dfn>.</p>
-<p>The model assumes that each glyph has a 'alignment-baseline'
-value which specifies the baseline with which the glyph is to
-be aligned. (The 'alignment-baseline' is called the "Baseline
-Tag" in the OpenType baseline table description.) The initial
-value of the <a
-href="text.html#AlignmentBaselineProperty"><span
-class="property">'alignment-baseline'</span></a> property uses
-the baseline identifier associated with the given glyph.
-Alternate values for <a
-href="text.html#AlignmentBaselineProperty"><span
-class="property">'alignment-baseline'</span></a> can be useful
-for glyphs such as a "*" which are ambiguous with respect to
-script membership.</p>
-
-<p>The model assumes that the font from which the glyph is
-drawn also has a baseline table, the
-<dfn>font baseline table</dfn>. This baseline
-table has offsets in units-per-em from the (0,0) point to each
-of the baselines the font knows about. In particular, it has
-the offset from the glyph's (0,0) point to the baseline
-identified by the 'alignment-baseline'.</p>
-
-<p>The offset values in the baseline table are in "design
-units" which means fractional units of the EM.
-Thus, the current <a>'font-size'</a> is used to determine
-the actual offset from the dominant baseline to the alternate
-baselines.</p>
-
-<p>The glyph is aligned so that its baseline identified by its
-'alignment-baseline' is aligned with the baseline with the same
-name from the dominant baseline table.</p>
-
-<p>The offset from the dominant baseline of the parent to the
-baseline identified by the 'alignment-baseline' is computed
-using the dominant baseline table and dominant baseline table
-font size. The font baseline table and font size applicable to
-the glyph are used to compute the offset from the identified
-baseline to the (0,0) point of the glyph. This second offset is
-subtracted from the first offset to get the position of the
-(0,0) point in the <a href="text.html#ShiftDirection">shift
-direction</a>. Both offsets are computed by multiplying the
-baseline value from the baseline table times the appropriate
-font size value.</p>
-
-<p>If the 'alignment-baseline' identifies the dominant
-baseline, then the first offset is zero and the glyph is
-aligned with the dominant baseline; otherwise, the glyph is
-aligned with the chosen alternate baseline.</p>
-
-<p>The baseline-identifiers below are used in this
-specification. Some of these are determined by baseline-tables
-contained in a font
-<a href="http://www.w3.org/TR/2006/REC-xsl11-20061205/#font-model">as described in XSL</a>
-([<a href="refs.html#ref-XSL">XSL</a>], section 7.9.1). Others
-are computed from other font characteristics as described
-below.</p>
-
-<dl>
- <dt><b>alphabetic</b></dt>
- <dd>
- <p>This identifies the baseline used by most alphabetic and
- syllabic scripts. These include, but are not limited to,
- many Western, Southern Indic, Southeast Asian
- (non-ideographic) scripts.</p>
- </dd>
- <dt><b>ideographic</b></dt>
- <dd>
- <p>This identifies the baseline used by ideographic
- scripts. For historical reasons, this baseline is at the
- bottom of the ideographic EM box and not in the center of
- the ideographic EM box. See the "central" baseline. The
- ideographic scripts include Chinese, Japanese, Korean, and
- Vietnamese Chu Nom.</p>
- </dd>
- <dt><b>hanging</b></dt>
- <dd>
- <p>This identifies the baseline used by certain Indic
- scripts. These scripts include Devanagari, Gurmukhi and
- Bengali.</p>
- </dd>
- <dt><b>mathematical</b></dt>
- <dd>
- <p>This identifies the baseline used by mathematical
- symbols.</p>
- </dd>
- <dt><b>central</b></dt>
- <dd>
- <p>This identifies a computed baseline that is at the
- center of the EM box. This baseline lies halfway between
- the text-before-edge and text-after-edge baselines.</p>
- <blockquote>
- <b>NOTE:</b>
- <p>For ideographic fonts, this baseline is often used to
- align the glyphs; it is an alternative to the ideographic
- baseline.</p>
- </blockquote>
- </dd>
- <dt><b>middle</b></dt>
- <dd>
- <p>This identifies a baseline that is offset from the
- alphabetic baseline in the <b>shift-direction</b> by 1/2
- the value of the x-height font characteristic. The position
- of this baseline may be obtained from the font data or, for
- fonts that have a font characteristic for "x-height", it
- may be computed using 1/2 the "x-height". Lacking either of
- these pieces of information, the position of this baseline
- may be approximated by the "central" baseline.</p>
- </dd>
- <dt><b>text-before-edge</b></dt>
- <dd>
- <p>This identifies the before-edge of the EM box. The
- position of this baseline may be specified in the
- baseline-table or it may be calculated.</p>
- <blockquote>
- <b>NOTE:</b>
- <p>The position of this baseline is normally around or at
- the top of the ascenders, but it may not encompass all
- accents that can appear above a glyph. For these fonts
- the value of the "ascent" font characteristic is used.
- For ideographic fonts, the position of this baseline is
- normally 1 EM in the <b>shift-direction</b> from the
- "ideographic" baseline. However, some ideographic fonts
- have a reduced width in the inline-progression-direction
- to allow tighter setting. When such a font, designed only
- for vertical writing-modes, is used in a horizontal
- writing-mode, the "text-before-edge" baseline may be less
- than 1 EM from the text-after-edge.</p>
- </blockquote>
- </dd>
- <dt><b>text-after-edge</b></dt>
- <dd>
- <p>This identifies the after-edge of the EM box. The
- position of this baseline may be specified in the
- baseline-table or it may be calculated.</p>
- <blockquote>
- <b>NOTE:</b>
- <p>For fonts with descenders, the position of this
- baseline is normally around or at the bottom of the
- descenders. For these fonts the value of the "descent"
- font characteristic is used. For ideographic fonts, the
- position of this baseline is normally at the
- "ideographic" baseline.</p>
- </blockquote>
- </dd>
-</dl>
-<p>There are, in addition, two computed baselines that are only
-defined for line areas. Since SVG does not support the notion
-of computations based on line areas, the two computed baselines
-are mapped as follows:</p>
-<dl>
- <dt><b>before-edge</b></dt>
- <dd>For SVG, this is equivalent to
- <b>text-before-edge</b>.</dd>
- <dt><b>after-edge</b></dt>
- <dd>For SVG, this is equivalent to
- <b>text-after-edge</b>.</dd>
-</dl>
-<p>There are also four baselines that are defined only for
-horizontal writing-modes.</p>
-<dl>
- <dt><b>top</b></dt>
- <dd>
- <p>This baseline is the same as the "before-edge" baseline
- in a horizontal writing-mode and is undefined in a vertical
- writing mode.</p>
- </dd>
- <dt id="TextTopBaselineDefinition"><b>text-top</b></dt>
- <dd>
- <p>This baseline is the same as the "text-before-edge"
- baseline in a horizontal writing-mode and is undefined in a
- vertical writing mode.</p>
- </dd>
- <dt><b>bottom</b></dt>
- <dd>
- <p>This baseline is the same as the "after-edge" baseline
- in a horizontal writing-mode and is undefined in a vertical
- writing mode.</p>
- </dd>
- <dt id="TextBottomBaselineDefinition"><b>text-bottom</b></dt>
- <dd>
- <p>This baseline is the same as the "text-after-edge"
- baseline in a horizontal writing-mode and is undefined in a
- vertical writing mode.</p>
- </dd>
-</dl>
-<p>The baseline-alignment properties follow.</p>
-
- <div class="propdef">
- <dl>
- <dt id="DominantBaselineProperty"><span class="propdef-title property">'dominant-baseline'</span></dt>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td>auto | use-script | no-change | reset-size |
- ideographic | alphabetic | hanging |
- mathematical | central | middle | text-after-edge |
- text-before-edge</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>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>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>The "dominant-baseline" property is used to determine or
-re-determine a scaled-baseline-table. A scaled-baseline-table
-is a compound value with three components: a
-baseline-identifier for the dominant-baseline, a baseline-table
-and a baseline-table font-size. Some values of the property
-re-determine all three values; other only re-establish the
-baseline-table font-size. When the initial value, <span class='prop-value'>auto</span>, would
-give an undesired result, this property can be used to
-explicitly set the desire scaled-baseline-table.</p>
-<p>Values for the property have the following meaning:</p>
-
-<dl>
- <dt><span class="attr-value">auto</span></dt>
- <dd>
- <p>If this property occurs on a <a>'text'</a> element, then the
- computed value depends on the value of the <a>'writing-mode'</a> property. If
- the 'writing-mode' is horizontal, then the value of the
- dominant-baseline component is 'alphabetic', else if the
- 'writing-mode' is vertical, then the value of the
- dominant-baseline component is 'central'.</p>
- <p>If this property occurs on a <a>'tspan'</a>, <a>'tref'</a>,
- <a>'altGlyph'</a> or <a>'textPath'</a> element, then
- the dominant-baseline and the baseline-table components
- remain the same as those of the parent <a>text content element</a>. If the computed <a>'baseline-shift'</a> value
- actually shifts the baseline, then the baseline-table
- font-size component is set to the value of the <a>'font-size'</a> property on the
- element on which the <a>'dominant-baseline'</a> property
- occurs, otherwise the baseline-table font-size remains the
- same as that of the element. If there is no parent <a>text content element</a>, the scaled-baseline-table value is constructed
- as above for <a>'text'</a> elements.</p>
- </dd>
-
- <dt><span class="attr-value">use-script</span></dt>
- <dd>The dominant-baseline and the baseline-table components
- are set by determining the predominant script of the
- character data content. The <a>'writing-mode'</a>, whether
- horizontal or vertical, is used to select the appropriate set
- of baseline-tables and the dominant baseline is used to
- select the baseline-table that corresponds to that baseline.
- The baseline-table font-size component is set to the value of
- the <a>'font-size'</a> property on the
- element on which the <a>'dominant-baseline'</a> property
- occurs.</dd>
-
- <dt><span class="attr-value">no-change</span></dt>
- <dd>The dominant-baseline, the baseline-table, and the
- baseline-table font-size remain the same as that of the
- parent <a>text content element</a>.</dd>
-
- <dt><span class="attr-value">reset-size</span></dt>
- <dd>The dominant-baseline and the baseline-table remain the
- same, but the baseline-table font-size is changed to the
- value of the <a>'font-size'</a> property on this
- element. This re-scales the baseline-table for the current <a>'font-size'</a>.</dd>
-
- <dt><span class="attr-value">ideographic</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'ideographic', the derived baseline-table is
- constructed using the 'ideographic' baseline-table in the
- nominal font, and the baseline-table font-size is changed to
- the value of the <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">alphabetic</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'alphabetic', the derived baseline-table is constructed
- using the 'alphabetic' baseline-table in the nominal font,
- and the baseline-table font-size is changed to the value of
- the <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">hanging</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'hanging', the derived baseline-table is constructed
- using the 'hanging' baseline-table in the nominal font, and
- the baseline-table font-size is changed to the value of the
- <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">mathematical</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'mathematical', the derived baseline-table is
- constructed using the 'mathematical' baseline-table in the
- nominal font, and the baseline-table font-size is changed to
- the value of the <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">central</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'central'. The derived baseline-table is constructed
- from the defined baselines in a baseline-table in the nominal
- font. That font baseline-table is chosen using the following
- priority order of baseline-table names: 'ideographic',
- 'alphabetic', 'hanging', 'mathematical'. The baseline-table
- font-size is changed to the value of the <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">middle</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'middle'. The derived baseline-table is constructed
- from the defined baselines in a baseline-table in the nominal
- font. That font baseline -table is chosen using the following
- priority order of baseline-table names: 'alphabetic',
- 'ideographic', 'hanging', 'mathematical'. The baseline-table
- font-size is changed to the value of the <a>'font-size'</a> property on this
- element.</dd>
-
- <dt><span class="attr-value">text-after-edge</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'text-after-edge'. The derived baseline-table is
- constructed from the defined baselines in a baseline-table in
- the nominal font. The choice of which font baseline-table to
- use from the baseline-tables in the nominal font is
- implementation defined. The baseline-table font-size is
- changed to the value of the <a>'font-size'</a> property on this
- element.<br />
- <br />
- NOTE: using the following priority order of baseline-table
- names: 'alphabetic', 'ideographic', 'hanging', 'mathematical'
- is probably a reasonable strategy for determining which font
- baseline-table to use.</dd>
-
- <dt><span class="attr-value">text-before-edge</span></dt>
- <dd>The baseline-identifier for the dominant-baseline is set
- to be 'text-before-edge'. The derived baseline-table is
- constructed from the defined baselines in a baseline-table in
- the nominal font. The choice of which baseline-table to use
- from the baseline-tables in the nominal font is
- implementation defined. The baseline-table font-size is
- changed to the value of the <a>'font-size'</a> property on this
- element.<br />
- <br />
- NOTE: Using the following priority order of baseline-table
- names: 'alphabetic', 'ideographic', 'hanging', 'mathematical'
- is probably a reasonable strategy for determining which font
- baseline-table to use.</dd>
-</dl>
-
-<p>If there is no baseline table in the nominal font or if the
-baseline table lacks an entry for the desired baseline, then
-the user agent may use heuristics to determine the position of
-the desired baseline.</p>
-
- <div class="propdef">
- <dl>
- <dt id="AlignmentBaselineProperty"><span class="propdef-title property">'alignment-baseline'</span></dt>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td>auto | baseline | before-edge | text-before-edge
- | middle | central | after-edge | text-after-edge |
- ideographic | alphabetic | hanging | mathematical</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>auto</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</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>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>This property specifies how an object is aligned with
-respect to its parent. This property specifies which baseline
-of this element is to be aligned with the corresponding
-baseline of the parent. For example, this allows alphabetic
-baselines in Roman text to stay aligned across font size
-changes. It defaults to the baseline with the same name as the
-computed value of the alignment-baseline property. That is, the
-position of "ideographic" alignment-point in the
-<b>block-progression-direction</b> is the position of the
-"ideographic" baseline in the baseline-table of the object
-being aligned.</p>
-
-<p>Values have the following meanings:</p>
-
-<dl>
- <dt><b>auto</b></dt>
- <dd>The value is the dominant-baseline of the script to which
- the character belongs - i.e., use the dominant-baseline of
- the parent.</dd>
-
- <dt><b>baseline</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the dominant-baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>before-edge</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "before-edge" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>text-before-edge</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "text-before-edge" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>middle</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "middle" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>central</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "central" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>after-edge</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "after-edge" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>text-after-edge</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "text-after-edge" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>ideographic</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "ideographic" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>alphabetic</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "alphabetic" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>hanging</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "hanging" baseline of the parent <a>text content element</a>.</dd>
-
- <dt><b>mathematical</b></dt>
- <dd>The alignment-point of the object being aligned is
- aligned with the "mathematical" baseline of the parent <a>text content element</a>.</dd>
-</dl>
-
- <div class="propdef">
- <dl>
- <dt id="BaselineShiftProperty"><span class="propdef-title property">'baseline-shift'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>baseline | sub | super | <a
- href="types.html#DataTypePercentage"><percentage></a>
- | <a
- href="types.html#DataTypeLength"><length></a></td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>baseline</td>
- </tr>
- <tr>
- <td><em>Applies to:</em> </td>
- <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
- </tr>
- <tr>
- <td><em>Inherited:</em> </td>
- <td>no</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>refers to the "line-height" of the <a>'text'</a> element, which
- in the case of SVG is defined to be equal to the <a>'font-size'</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>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>The <a>'baseline-shift'</a> property
-allows repositioning of the dominant-baseline relative to the
-dominant-baseline of the parent <a>text content element</a>. The shifted object might be a sub- or superscript.
-Within the shifted object, the whole baseline-table is offset;
-not just a single baseline. The amount of the shift is
-determined from information from the parent <a>text content element</a>, the sub- or superscript offset from the nominal
-font of the parent <a>text content element</a>, percent of the "line-height" of the parent <a>text content element</a> or an absolute value.</p>
-
-<p>In SVG, the <a>'baseline-shift'</a>
-property represents a supplemental adjustment to the baseline
-tables. The <a>'baseline-shift'</a>
-property shifts the baseline tables for each glyph to temporary
-new positions, for example to lift the glyph into superscript
-or subscript position, but it does not effect the current text
-position. When the current text position is adjusted after
-rendering a glyph to take into account glyph advance values,
-the adjustment happens as if there were no baseline shift.</p>
-
-<p><a>'baseline-shift'</a> properties
-can nest. Each nested <a>'baseline-shift'</a> is added to previous
-baseline shift values.</p>
-
-<p>Values for the property have the following meaning:</p>
-
-<dl>
- <dt><strong>baseline</strong></dt>
- <dd>There is no baseline shift; the dominant-baseline remains
- in its original position.</dd>
-
- <dt><strong>sub</strong></dt>
- <dd>The dominant-baseline is shifted to the default position
- for subscripts. The offset to this position is determined
- using the font data for the nominal font. Because in most
- fonts the subscript position is normally given relative to
- the "alphabetic" baseline, the user agent may compute the
- effective position for subscripts for superscripts when some
- other baseline is dominant. The suggested computation is to
- subtract the difference between the position of the dominant
- baseline and the position of the "alphabetic" baseline from
- the position of the subscript. The resulting offset is
- determined by multiplying the effective subscript position by
- the dominant baseline-table font-size. If there is no
- applicable font data the user agent may use heuristics to
- determine the offset.</dd>
-
- <dt><strong>super</strong></dt>
- <dd>The dominant-baseline is shifted to the default position
- for superscripts. The offset to this position is determined
- using the font data for the nominal font. Because in most
- fonts the superscript position is normally given relative to
- the "alphabetic" baseline, the user agent may compute the
- effective position for superscripts when some other baseline
- is dominant. The suggested computation is to subtract the
- difference between the position of the dominant baseline and
- the position of the "alphabetic" baseline from the position
- of the superscript. The resulting offset is determined by
- multiplying the effective superscript position by the
- dominant baseline-table font-size. If there is no applicable
- font data the user agent may use heuristics to determine the
- offset.</dd>
-
- <dt><strong><percentage></strong></dt>
- <dd>The computed value of the property is this percentage
- multiplied by the computed "line-height" of the <a>'text'</a> element. The
- dominant-baseline is shifted in the <a
- href="text.html#ShiftDirection">shift direction</a> (positive
- value) or opposite to the <a
- href="text.html#ShiftDirection">shift direction</a> (negative
- value) of the parent <a>text content element</a> by the computed value. A value of "0%" is
- equivalent to "baseline".</dd>
-
- <dt><strong><length></strong></dt>
- <dd>The dominant-baseline is shifted in the <a
- href="text.html#ShiftDirection">shift direction</a> (positive
- value) or opposite to the <a
- href="text.html#ShiftDirection">shift direction</a> (negative
- value) of the parent <a>text content element</a> by the <length> value. A value of "0cm" is
- equivalent to "baseline".</dd>
-</dl>
<h2 id="FontPropertiesUsedBySVG">Font selection properties</h2>
@@ -3356,154 +5725,10 @@
<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font">normative definition of the property</a>
is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.8).</p>
-<h2 id="SpacingProperties">Spacing properties</h2>
-
-<p>Two properties affect the space between characters and words:</p>
-
-<ul>
- <li><a>'letter-spacing'</a> indicates an
- amount of space that is to be added between text characters.</li>
-
- <li><a>'word-spacing'</a> indicates the
- spacing behavior between words.</li>
-</ul>
-
-<p class='issue'>Note that the <span class='property'>'kerning'</span> property
-from SVG 1.1 has been removed in favor of using <a>'letter-spacing'</a> to add or remove spacing
-between glyphs and the <span class='property'>'font-kerning'</span> property to
-disable kerning based on information from the font.</p>
-
-<p class='issue'>We need to require <span class='property'>'font-kerning'</span>.</p>
-
- <div class="propdef">
- <dl>
- <dt id="LetterSpacingProperty"><span class="propdef-title property">'letter-spacing'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | <length></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>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>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>This property specifies spacing behavior between text characters.</p>
-
-<p>For SVG, if a <span class="prop-value"><length></span>
-is provided without a unit identifier (e.g., an unqualified
-number such as <span class="attr-value">128</span>), the SVG
-user agent processes the <span
-class="prop-value"><length></span> as a width value in
-the current user coordinate system.</p>
-
-<p>If a <span class="prop-value"><length></span> is
-provided with one of the <a
-href="coords.html#Units">unit identifiers</a> (e.g.,
-<span class="attr-value">.25em</span> or <span
-class="attr-value">1%</span>), then the SVG user agent converts
-the <span class="prop-value"><length></span> into a
-corresponding value in the current user coordinate system by
-applying the rules described in <a
-href="coords.html#Units">Units</a>.</p>
-
-<p>Except for any additional information provided in this
-specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-letter-spacing">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.4).</p>
-
- <div class="propdef">
- <dl>
- <dt id="WordSpacingProperty"><span class="propdef-title property">'word-spacing'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | <length></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>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>yes</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>This property specifies spacing behavior between words. For
-SVG, if a <span class="prop-value"><length></span> is
-provided without a unit identifier (e.g., an unqualified number
-such as <span class="attr-value">128</span>), the SVG user
-agent processes the <span
-class="prop-value"><length></span> as a width value in
-the current user coordinate system.</p>
-
-<p>If a <span class="prop-value"><length></span> is
-provided with one of the <a
-href="coords.html#Units">unit identifiers</a> (e.g.,
-<span class="attr-value">.25em</span> or <span
-class="attr-value">1%</span>), then the SVG user agent converts
-the <span class="prop-value"><length></span> into a
-corresponding value in the current user coordinate system by
-applying the rules described in <a
-href="coords.html#Units">Units</a>.</p>
-
-<p>Except for any additional information provided in this
-specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-word-spacing">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.4).</p>
-
<h2 id="TextDecorationProperties">Text decoration</h2>
+ <p class="issue">Do we align with CSS Text Decoration Module Level 3?</p>
+
<div class="propdef">
<dl>
<dt id="TextDecorationProperty"><span class="propdef-title property">'text-decoration'</span></dt>
@@ -3616,476 +5841,6 @@
<edit:example href='images/text/textdecoration01.svg' name='textdecoration01' description="behavior of 'text-decoration' property" image='yes' link='yes'/>
-<h2 id="TextOnAPath">Text on a path</h2>
-
-<edit:with element='textPath'>
-
-<p>In addition to text drawn in a straight line, SVG also includes the ability
-to place text along the shape of a <a>'path'</a> element.
-To specify that a block of text is to be rendered along the shape of
-a <a>'path'</a>, include the given text within a <a>'textPath'</a> element which
-includes an <a>'xlink:href'</a> attribute with an <a>IRI reference</a> to
-a <a>'path'</a> element, or a <a>'d'</a> attribute that specifies the path data
-directly.</p>
-
-<h3 id="TextPathElement">The <span class="element-name">'textPath'</span> element</h3>
-
-<edit:elementsummary name='textPath'/>
-
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Have a more precise explanation of text path stretch methods.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2011/11/17-svg-irc#T22-23-10">We will clarify <span class='attr-value'>method="stretch"</span> on <span class="element-name">>'textPath'</span> elements.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>Improve interoperability of the feature.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Cameron (no action)</td>
- </tr>
- </table>
-</div>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="TextPathElementStartOffsetAttribute"><span
- class="adef">startOffset</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>An offset from the start of the path for the initial
- current text position, calculated using the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm.<br />
- If a <a
- href="types.html#DataTypeLength"><length></a> other
- than a percentage is given, then the <a>'startOffset'</a> represents a distance
- along the path measured in the current user coordinate
- system.<br />
- If a percentage is given, then the <a>'startOffset'</a> represents a
- percentage distance along the entire path. Thus, <span
- class="attr-value">startOffset="0%"</span> indicates the
- start point of the path and <span
- class="attr-value">startOffset="100%"</span> indicates the
- end point of the path.<br />
- <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><a id="TextPathElementMethodAttribute" ></a> <span
- class="adef">method</span> = "<span
- class="attr-value">align | stretch</span>"</dt>
- <dd>Indicates the method by which text should be rendered
- along the path.<br />
- A value of <span class="attr-value">align</span> indicates
- that the glyphs should be rendered using simple 2x3
- transformations such that there is no stretching/warping of
- the glyphs. Typically, supplemental rotation, scaling and
- translation transformations are done for each glyph to be
- rendered. As a result, with <span
- class="attr-value">align</span>, fonts where the glyphs are
- designed to be connected (e.g., cursive fonts), the
- connections may not align properly when text is rendered
- along a path.<br />
- A value of <span class="attr-value">stretch</span>
- indicates that the glyph outlines will be converted into
- paths, and then all end points and control points will be
- adjusted to be along the perpendicular vectors from the
- path, thereby stretching and possibly warping the glyphs.
- With this approach, connected glyphs, such as in cursive
- scripts, will maintain their connections.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class="attr-value">align</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt><a id="TextPathElementSpacingAttribute"></a> <span
- class="adef">spacing</span> = "<span
- class="attr-value">auto | exact</span>"</dt>
- <dd>Indicates how the user agent should determine the
- spacing between glyphs that are to be rendered along a
- path.<br />
- A value of <span class="attr-value">exact</span> indicates
- that the glyphs should be rendered exactly according to the
- spacing rules as specified in <a
- href="text.html#TextpathLayoutRules">Text on a path layout
- rules</a>.<br />
- A value of <span class="attr-value">auto</span> indicates
- that the user agent should use text-on-a-path layout
- algorithms to adjust the spacing between glyphs in order to
- achieve visually appealing results.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class="attr-value">exact</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="TextPathElementDAttribute"><span
- class="adef">d</span> =
- "<a href="paths.html#PathData"><em>path data</em></a>"</dt>
- <dd>The definition of the path onto which the glyphs will be rendered.
- The handling of erroneous path data follows the behavior specified in
- the <a href="implnote.html#PathElementImplementationNotes"><span
- class="element-name">'path'</span> element implementation
- notes</a>.<br/>
- If both the <a>'d'</a> attribute and <a>'xlink:href'</a>
- attributes are specified, it is as if the <a>'xlink:href'</a> attribute
- were not specified for the purposes of rendering.
- In the <a>SVGTextPathElement</a> interface both values will still be
- reflected.
- Furthermore, if a value for <a>'xlink:href'</a> is specified in markup
- and path data is subsequently specified via the
- <a>SVGAnimatedPathData::pathSegList</a> member of the
- <a>SVGTextPathElement</a>, then this is equivalent to specifying the
- <a>'d'</a> attribute—the <a>'xlink:href'</a> will be disregarded
- for rendering and the path specified in the
- <a>SVGAnimatedPathData::pathSegList</a> will be used instead.
- <br/>
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt><a id="TextPathElementHrefAttribute"></a> <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 the <a>'path'</a> element onto which
- the glyphs will be rendered. If <iri> is an invalid
- reference (e.g., no such element exists, or the referenced
- element is not a <a>'path'</a>), then the <a>'textPath'</a> element is
- in error and its entire contents shall not be rendered by the user
- agent.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- </dl>
- </div>
-
-<p>The path data coordinates within the referenced <a>'path'</a>
-element are assumed to be in the same coordinate system as the
-current <a>'text'</a> element, not in the coordinate system where
-the <a>'path'</a> element is defined. The <a>'transform'</a>
-attribute on the referenced <a>'path'</a> element represents a
-supplemental transformation relative to the current user coordinate
-system for the current <a>'text'</a> element, including any
-adjustments to the current user coordinate system due to a possible
-<a>'transform'</a> property on the current <a>'text'</a> element.
-For example, the following fragment of SVG content:</p>
-
-<pre>
-<svg xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
- <g <span
-style="font-weight:bold; color:red">transform="translate(25,25)"</span>>
- <defs>
- <path id="path1" <span
-style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
- </defs>
- </g>
- <text <span
-style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
- <textPath xlink:href="#path1">Text along path1</textPath>
- </text>
-</svg>
-</pre>
-
-<p>should have the same effect as the following:</p>
-
-<pre>
-<svg xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
- <g <span
-style="font-weight:bold; color:blue">transform="rotate(45)"</span>>
- <defs>
- <path id="path1" <span
-style="font-weight:bold; color:green">transform="scale(2)"</span> d="..." fill="none" stroke="red"/>
- </defs>
- <text>
- <textPath xlink:href="#path1">Text along path1</textPath>
- </text>
- </g>
-</svg>
-</pre>
-
-<p>Note that the <code
-style="font-weight:bold; color:red">transform="translate(25,25)"</code>
-has no effect on the <a>'textPath'</a> element, whereas the
-<code
-style="font-weight:bold; color:blue">transform="rotate(45)"</code>
-applies to both the <a>'text'</a>
-and the use of the <a>'path'</a>
-element as the referenced shape for text on a path.</p>
-
-<p id="ExampleToap01"><span class="example-ref">Example toap01</span> provides a
-simple example of text on a path:</p>
-
-<edit:example href='images/text/toap01.svg' name='toap01' description="simple text on a path" image='yes' link='yes'/>
-
-<p id="ExampleToap02"><span class="example-ref">Example toap02</span> shows how <a>'tspan'</a> elements can be
-included within <a>'textPath'</a>
-elements to adjust styling attributes and adjust the current
-text position before rendering a particular glyph. The first
-occurrence of the word "up" is filled with the color red.
-Attribute <a>'tspan/dy'</a> is used to lift the word "up"
-from the baseline.</p>
-
-<edit:example href='images/text/toap02.svg' name='toap02' description="tspan within textPath" image='yes' link='yes'/>
-
-<p id="ExampleToap03"><span class="example-ref">Example toap03</span> demonstrates
-the use of the <a>'startOffset'</a>
-attribute on the <a>'textPath'</a>
-element to specify the start position of the text string as a
-particular position along the path. Notice that glyphs that
-fall off the end of the path are not rendered (see <a
-href="text.html#TextpathLayoutRules">text on a path layout
-rules</a>).</p>
-
-<edit:example href='images/text/toap03.svg' name='toap03' description="text on a path with startOffset attribute" image='yes' link='yes'/>
-
-<h3 id="TextpathLayoutRules">Text on a path layout rules</h3>
-
-<p>Conceptually, for text on a path the target path is
-stretched out into either a horizontal or vertical straight
-line segment. For horizontal text layout flows, the path is
-stretched out into a hypothetical horizontal line segment such
-that the start of the path is mapped to the left of the line
-segment. For vertical text layout flows, the path is stretched
-out into a hypothetical vertical line segment such that the
-start of the path is mapped to the top of the line segment. The
-standard <a href="text.html#TextLayout">text layout</a> rules
-are applied to the hypothetical straight line segment and the
-result is mapped back onto the target path. Vertical and
-bidirectional <a href="text.html#TextLayout">text layout</a>
-rules also apply to text on a path.</p>
-<p>The <a href="text.html#ReferenceOrientation">reference
-orientation</a> is determined individually for each glyph that
-is rendered along the path. For horizontal text layout flows,
-the reference orientation for a given glyph is the vector that
-starts at the intersection point on the path to which the glyph
-is attached and which points in the direction 90 degrees
-counter-clockwise from the angle of the curve at the
-intersection point. For vertical text layout flows, the
-reference orientation for a given glyph is the vector that
-starts at the intersection point on the path to which the glyph
-is attached and which points in the direction 180 degrees from
-the angle of the curve at the intersection point.</p>
-
-<p id="ExampleToap04"><span class="example-ref">Example toap04</span> will be used
-to illustrate the particular layout rules for text on a path
-that supplement the basic <a href="text.html#TextLayout">text
-layout</a> rules for straight line horizontal or vertical
-text.</p>
-
-<edit:example href='images/text/toap04.svg' name='toap04' description="text on a path layout rules" image='yes' link='yes'/>
-
-<p>The following picture does an initial zoom in on the first
-glyph in the <a>'text'</a> element.</p>
-<img alt="Image that shows text on a path"
-src="images/text/toap05.png" width="288" height="91" />
-
-<p>The small dot above shows the point at which the glyph is
-attached to the path. The box around the glyph shows the glyph
-is rotated such that its horizontal axis is parallel to the
-tangent of the curve at the point at which the glyph is
-attached to the path. The box also shows the glyph's
-<dfn id="CharWidth">charwidth</dfn> (i.e., the amount which
-the current text position advances horizontally when the glyph
-is drawn using horizontal text layout).</p>
-
-<p>The next picture zooms in further to demonstrate the
-detailed layout rules.</p>
-<img alt="Image that shows text on a path"
-src="images/text/toap06.png" width="288" height="176" />
-
-<p>For left-to-right horizontal text layout along a path (i.e.,
-when the glyph orientation is perpendicular to the <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
-the layout rules are as follows:</p>
-<ul>
- <li>Determine the <dfn id="StartPointOnPath">startpoint-on-the-path</dfn> for the
- first glyph using attribute <a>'startOffset'</a> and property
- <a>'text-anchor'</a>. For <span class='prop-value'>text-anchor:start</span>,
- startpoint-on-the-path is the point on the path which
- represents the point on the path which is <a>'startOffset'</a> distance along the
- path from the start of the path, calculated using the user
- agent's <a href="paths.html#DistanceAlongAPath">distance
- along the path</a> algorithm. For <span class="prop-value">text-anchor:middle</span>,
- startpoint-on-the-path is the point on the path which
- represents the point on the path which is [ <a>'startOffset'</a> minus half of the
- total advance values for all of the glyphs in the <a>'textPath'</a> element ] distance
- along the path from the start of the path, calculated using
- the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm. For <span class="prop-value">text-anchor:end</span>,
- startpoint-on-the-path is the point on the path which
- represents the point on the path which is [ <a>'startOffset'</a> minus the total
- advance values for all of the glyphs in the <a>'textPath'</a> element ]. Before
- rendering the first glyph, the horizontal component of the
- startpoint-on-the-path is adjusted to take into account
- various horizontal alignment text properties and attributes,
- such as a <a>'tspan/dx'</a> attribute value on a <a>'tspan'</a> element. (In the
- picture above, the startpoint-on-the-path is the leftmost dot
- on the path.)</li>
-
- <li>Determine the glyph's charwidth (i.e., the amount which
- the current text position advances horizontally when the
- glyph is drawn using horizontal text layout). (In the picture
- above, the charwidth is the distance between the two dots at
- the side of the box.)</li>
-
- <li>Determine the point on the curve which is charwidth
- distance along the path from the startpoint-on-the-path for
- this glyph, calculated using the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm. This point is the <dfn id="EndPointOnPath">endpoint-on-the-path</dfn> for the
- glyph. (In the picture above, the endpoint-on-the-path for
- the glyph is the rightmost dot on the path.)</li>
-
- <li>Determine the <dfn id="MidPointOnPath">midpoint-on-the-path</dfn>, which is
- the point on the path which is "halfway" (user agents can
- choose either a distance calculation or a parametric
- calculation) between the startpoint-on-the-path and the
- endpoint-on-the-path. (In the picture above, the
- midpoint-on-the-path is shown as a white dot.)</li>
-
- <li>Determine the <dfn id="GlyphMidline">glyph-midline</dfn>, which is the
- vertical line in the glyph's coordinate system that goes
- through the glyph's x-axis midpoint. (In the picture above,
- the glyph-midline is shown as a dashed line.)</li>
-
- <li>Position the glyph such that the glyph-midline passes
- through the midpoint-on-the-path and is perpendicular to the
- line through the startpoint-on-the-path and the
- endpoint-on-the-path.</li>
-
- <li>Align the glyph vertically relative to the
- midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
- specified values for attribute <a>'tspan/dy'</a> on a <a>'tspan'</a> element. In the
- example above, the <a>'alignment-baseline'</a> property is
- unspecified, so the initial value of <span class="prop-value">alignment-baseline:baseline</span>
- will be used. There are no <a>'tspan'</a> elements; thus, the
- baseline of the glyph is aligned to the
- midpoint-on-the-path.</li>
-
- <li>For each subsequent glyph, set a new
- startpoint-on-the-path as the previous endpoint-on-the-path,
- but with appropriate adjustments taking into account
- horizontal kerning tables in the font and current values of
- various attributes and properties, including <a
- href="text.html#SpacingProperties">spacing properties</a> and
- <a>'tspan'</a> elements with values
- provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
- calculated as distance adjustments along the path, calculated
- using the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm.</li>
-
- <li>Glyphs whose midpoint-on-the-path are off either end of
- the path are not rendered.</li>
-
- <li>Continue rendering glyphs until there are no more
- glyphs.</li>
-</ul>
-
-<p>Comparable rules are used for top-to-bottom vertical text
-layout along a path (i.e., when the glyph orientation is
-parallel with the <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>),
-the layout rules are as follows:</p>
-
-<ul>
- <li>Determine the startpoint-on-the-path using the same
- method as for horizontal text layout along a path, except
- that before rendering the first glyph, the horizontal
- component of the startpoint-on-the-path is adjusted to take
- into account various vertical alignment text properties and
- attributes, such as a <a>'tspan/dy'</a> attribute value on a <a>'tspan'</a> element.</li>
-
- <li>Determine the glyph's charheight (i.e., the amount which
- the current text position advances vertically when the glyph
- is drawn using vertical text layout).</li>
-
- <li>Determine the point on the curve which is charheight
- distance along the path from the startpoint-on-the-path for
- this glyph, calculated using the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm. This point is the endpoint-on-the-path
- for the glyph.</li>
-
- <li>Determine the midpoint-on-the-path, which is the point on
- the path which is "halfway" (user agents can choose either a
- distance calculation or a parametric calculation) between the
- startpoint-on-the-path and the endpoint-on-the-path.</li>
-
- <li>Determine the glyph-midline, which is the horizontal line
- in the glyph's coordinate system that goes through the
- glyph's y-axis midpoint.</li>
-
- <li>Position the glyph such that the glyph-midline passes
- through the midpoint-on-the-path and is perpendicular to the
- line through the startpoint-on-the-path and the
- endpoint-on-the-path.</li>
-
- <li>Align the glyph horizontally (where horizontal is
- relative to the glyph's coordinate system) relative to the
- midpoint-on-the-path based on property <a>'alignment-baseline'</a> and any
- specified values for attribute <a>'tspan/dx'</a> on a <a>'tspan'</a> element.</li>
-
- <li>For each subsequent glyph, set a new
- startpoint-on-the-path as the previous endpoint-on-the-path,
- but with appropriate adjustments taking into account vertical
- kerning tables in the font and current values of various
- attributes and properties, including <a
- href="text.html#SpacingProperties">spacing properties</a> and
- <a>'tspan'</a> elements with values
- provided for attributes <a>'tspan/dx'</a> and <a>'tspan/dy'</a>. All adjustments are
- calculated as distance adjustments along the path, calculated
- using the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm.</li>
-
- <li>Glyphs whose midpoint-on-the-path are off either end of
- the path are not rendered.</li>
-
- <li>Continue rendering glyphs until there are no more
- glyphs.</li>
-</ul>
-
-<p>In the calculations above, if either the
-startpoint-on-the-path or the endpoint-on-the-path is off the
-end of the path, then extend the path beyond its end points
-with a straight line that is parallel to the tangent at the
-path at its end point so that the midpoint-on-the-path can
-still be calculated.</p>
-
-<p>When the <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
-is horizontal, then any <span class="attr-name">'x'</span> attributes on
-<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
-new absolute offsets along the path, thus providing explicit
-new values for startpoint-on-the-path. Any <span class="attr-name">'y'</span> attributes on
-<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements are
-ignored. When the <a
-href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>
-is vertical, then any <span class="attr-name">'y'</span> attributes on
-<a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or <a>'altGlyph'</a> elements represent
-new absolute offsets along the path, thus providing explicit
-new values for startpoint-on-the-path. Any <span class="attr-name">'x'</span>
-attributes on <a>'text'</a>, <a>'tspan'</a>, <a>'tref'</a> or
-<a>'altGlyph'</a> elements are ignored.</p>
-
-</edit:with>
-
<h2 id="AlternateGlyphs">Alternate glyphs</h2>
<p>There are situations such as ligatures, special-purpose fonts (e.g.,
@@ -4171,7 +5926,7 @@
element or any ancestor <a>'text'</a> or <a>'tspan'</a> elements for the
first Unicode character within the <a>'altGlyph'</a> element sets a new
absolute X coordinate for the <a
- href="text.html#CurrentTextPosition">current text
+ >current text
position</a> before rendering the first alternate
glyph.<br />
<span class="anim-target"><a
@@ -4202,7 +5957,7 @@
any ancestor <a>'text'</a> or <a>'tspan'</a> elements for the
first Unicode character within the <a>'altGlyph'</a> element sets a new
relative X coordinate for the <a
- href="text.html#CurrentTextPosition">current text
+ >current text
position</a> before rendering the first alternate
glyph.<br />
<span class="anim-target"><a
@@ -4419,206 +6174,6 @@
</edit:with>
-<div class="ready-for-wider-review">
-<h2 id="WhiteSpace">White space handling</h2>
-
-<p class="note">New in SVG 2.
-Added <a>'white-space'</a> to allow a more useful way to control whitespace handling.
-Aligns SVG and HTML/CSS text processing. <a>'xml:space'</a> deprecated in new content, retained for backwards compatibility.
-</p>
-
-<h3 id="NewWhiteSpaceProperty">SVG 2 Preferred white space handling</h3>
-
-<p id="white-spaceProperty">Rendering of white space in SVG 2 is controlled by the <a>'white-space'</a>
-property. This specifies two things:</p>
-<ul>
- <li>whether and how white space inside the element is collapsed</li>
- <li>whether lines may wrap at unforced soft wrap opportunities</li>
-</ul>
-
-
-<table class="propdef">
- <tr>
- <th>Name:</th>
- <td><dfn id="WhiteSpaceProperty">white-space</dfn></td>
- </tr>
- <tr>
- <th>Value:</th>
- <td>normal | pre | nowrap | pre-wrap | pre-line </td>
- </tr>
- <tr>
- <th>Initial:</th>
- <td>not defined for shorthand properties </td>
- </tr>
- <tr>
- <th>Applies to:</th>
- <td><a>text content elements</a></td>
- </tr>
- <tr>
- <th>Inherited:</th>
- <td>yes</td>
- </tr>
- <tr>
- <th>Percentages:</th>
- <td>N/A</td>
- </tr>
- <tr>
- <th>Media:</th>
- <td>visual</td>
- </tr>
- <tr>
- <th>Computed value:</th>
- <td>see individual properties </td>
- </tr>
- <tr>
- <th><a>Animatable</a>:</th>
- <td>yes</td>
- </tr>
-</table>
-
-<p>Values and their meanings are defined in [<a href="http://dev.w3.org/csswg/css3-text/#white-space">CSS3 Text</a>].</p>
-
-<h3 id="LegacyXMLSpace">Legacy whitespace handling</h3>
-
-<p id="XMLSpaceAttribute">For compatibility, SVG 2 also supports the XML attribute
-<a>'xml:space'</a> to specify the handling of white space characters
-within a given <a>'text'</a> element's character data. New content should not use
-<a>'xml:space'</a> but instead, use the <a>'white-space'</a> property.</p>
-
-<p>Note that any child element of a <a>'text'</a> element may also
-have an <a>'xml:space'</a> attribute which will apply to that
-child element's text content.
-The SVG user agent has special processing rules associated with this attribute
-as described below. These are behaviors that occur subsequent to
-XML parsing [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>]
-and any construction of a DOM.</p>
-
-<p><a>'xml:space'</a> is an inheritable attribute which can have one of
-two values:</p>
-
-<dl>
- <dt><span class='attr-value'>'default'</span></dt>
- <dd>(The initial/default value for <a>'xml:space'</a>.) When
- <span class='attr-value'>xml:space="default"</span>, the SVG user
- agent will do the following using a copy of the original character
- data content. First, it will remove all newline characters. Then
- it will convert all tab characters into space characters. Then, it
- will strip off all leading and trailing space characters. Then, all
- contiguous space characters will be consolidated.</dd>
-
- <dt><span class='attr-value'>'preserve'</span></dt>
- <dd>When <span class='attr-value'>xml:space="preserve"</span>,
- the SVG user agent will do the following using a copy of the
- original character data content. It will convert all newline
- and tab characters into space characters. Then, it will draw
- all space characters, including leading, trailing and multiple
- contiguous space characters. Thus, when drawn with
- <span class='attr-value'>xml:space="preserve"</span>, the string
- <code>"a b"</code> (three spaces between "a" and
- "b") will produce a larger separation between "a" and "b" than
- <code>"a b"</code> (one space between "a" and "b").</dd>
-</dl>
-
-<p>The following example illustrates that line
-indentation can be important when using
-<span class='attr-value'>xml:space="default"</span>. The fragment below
-show two pairs of similar <a>'text'</a> elements, with both <a>'text'</a>
-elements using <span class="attr-value">xml:space="default"</span>. For
-these examples, there is no extra white space at the end of any of the
-lines (i.e., the line break occurs immediately after the last visible
-character).</p>
-
-<pre>
-[01] <text xml:space='default'>
-[02] WS example
-[03] indented lines
-[04] </text>
-[05] <text xml:space='preserve'>WS example indented lines</text>
-[06]
-[07] <text xml:space='default'>
-[08]WS example
-[09]non-indented lines
-[10] </text>
-[11] <text xml:space='preserve'>WS examplenon-indented lines</text>
-</pre>
-
-<p>The first pair of <a>'text'</a> elements above show the
-effect of indented character data. The attribute
-<span class="attr-value">xml:space="default"</span> in the first
-<a>'text'</a> element instructs the user agent to:</p>
-
-<ul>
- <li>convert all tabs (if any) to space characters,</li>
- <li>strip out all line breaks (i.e., strip out the line
- breaks at the end of lines [01], [02] and [03]),</li>
- <li>strip out all leading space characters (i.e., strip out
- space characters before "WS example" on line [02]),</li>
- <li>strip out all trailing space characters (i.e., strip out
- space characters before "</text>" on line [04]),</li>
- <li>consolidate all intermediate space characters (i.e., the
- space characters before "indented lines" on line [03]) into a
- single space character.</li>
-</ul>
-
-<p>The second pair of <a>'text'</a> elements above show the
-effect of non-indented character data. The attribute
-<span class="attr-value">xml:space="default"</span> in the third
-<a>'text'</a> element instructs the user agent to:</p>
-
-<ul>
- <li>convert all tabs (if any) to space characters,</li>
- <li>strip out all line breaks (i.e., strip out the line
- breaks at the end of lines [07], [08] and [09]),</li>
- <li>strip out all leading space characters (there are no
- leading space characters in this example),</li>
- <li>strip out all trailing space characters (i.e., strip out
- space characters before "</text>" on line [10]),</li>
- <li>consolidate all intermediate space characters into a
- single space character (in this example, there are no
- intermediate space characters).</li>
-</ul>
-
-<p>Note that XML parsers are required to convert the standard
-representations for a newline indicator (e.g., the literal
-two-character sequence "#xD#xA" or the stand-alone literals #xD
-or #xA) into the single character #xA before passing character
-data to the application. Thus, each newline in SVG will be
-represented by the single character #xA, no matter what
-representation for newlines might have been used in the
-original resource. (See
-<a href="http://www.w3.org/TR/2008/REC-xml-20081126/#sec-line-ends">XML end-of-line handling</a>.)</p>
-
-<p>Any features in the SVG language or the SVG DOM that are based
-on character position number, such as the <a>'tspan/x'</a>,
-<a>'tspan/y'</a>, <a>'tspan/dx'</a>, <a>'tspan/dy'</a> and
-<a>'tspan/rotate'</a> attributes on the <a>'text'</a>, <a>'tspan'</a>,
-<a>'tref'</a> and <a>'altGlyph'</a> elements, are based on character
-position after applying the white space handling rules described here.
-In particular, if <span class='attr-value'>xml:space="default"</span>,
-it is often the case that white space characters are removed as part
-of processing. Character position numbers index into the text string
-after the white space characters have been removed per the rules in this
-section.</p>
-
-<p>Note that a glyph corresponding to a whitespace character should only be
-displayed as a visible but blank space, even if the glyph itself happens to be
-non-blank. See <a href="http://www.unicode.org/faq/unsup_char.html">display of
-unsupported characters</a> [<a href="refs.html#ref-UNICODE">UNICODE</a>].</p>
-
-<p>The <a>'xml:space'</a> attribute is:</p>
-<p> <span class="anim-target"><a
-href="animate.html#Animatable">Animatable</a>: no.</span></p>
-
-<h3 id="DuplicateWhiteSpace">Duplicate whitespace directives</h3>
-
-<p>Older, SVG 1.1 content will use <a>'xml:space'</a>. New content, and older
-content that is being reworked, will use <a>'white-space'</a> and remove any existing
-<a>'xml:space'</a>. However, user agents may come across content which uses
-both methods on the same element. If the <a>'white-space'</a> property is set on
-any element, then the value of <a>'xml:space'</a> is ignored.</p>
-
-</div>
-
<h2 id="TextSelection">Text selection and clipboard operations</h2>
<p><a href="conform.html#ConformingSVGViewers">Conforming SVG