--- a/master/definitions.xml Tue Oct 08 12:49:38 2013 +0200
+++ b/master/definitions.xml Wed Oct 09 21:28:03 2013 +0200
@@ -14,7 +14,7 @@
href='linking.html#AElement'
contentmodel='textoranyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='aria, navigation, conditional processing, core, graphical event, presentation, style, xlink'
interfaces='SVGAElement'>
<attribute name='xlink:href' href='linking.html#AElementXLinkHrefAttribute' animatable='yes'/>
@@ -115,6 +115,19 @@
</element>
<element
+ name='color-profile'
+ href='color.html#ColorProfileElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ attributecategories='core, xlink'
+ interfaces='SVGColorProfileElement'>
+ <attribute name='local' href='color.html#ColorProfileElementLocalAttribute'/>
+ <attribute name='name' href='color.html#ColorProfileElementNameAttribute'/>
+ <attribute name='rendering-intent' href='color.html#ColorProfileElementRenderingIntentAttribute'/>
+ <attribute name='xlink:href' href='color.html#ColorProfileElementHrefAttribute'/>
+ </element>
+
+ <element
name='cursor'
href='interact.html#CursorElement'
contentmodel='anyof'
@@ -131,7 +144,7 @@
href='struct.html#DefsElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='core, graphical event, presentation, style'
interfaces='SVGDefsElement'/>
<element
@@ -273,7 +286,7 @@
href='struct.html#GElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='aria, navigation, conditional processing, core, graphical event, presentation, style'
interfaces='SVGGElement'/>
@@ -282,7 +295,7 @@
href='fonts.html#GlyphElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='core, style, presentation'
attributes='d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y'
interfaces='SVGGlyphElement'>
@@ -398,7 +411,7 @@
href='painting.html#MarkerElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='core, presentation, style'
attributes='viewBox, preserveAspectRatio'
interfaces='SVGMarkerElement'>
@@ -459,7 +472,7 @@
href='fonts.html#MissingGlyphElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='core, style, presentation'
attributes='d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y'
interfaces='SVGMissingGlyphElement'/>
@@ -491,7 +504,7 @@
href='pservers.html#PatternElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='core, presentation, style, xlink'
attributes='viewBox, preserveAspectRatio'
interfaces='SVGPatternElement'>
@@ -621,7 +634,7 @@
href='struct.html#SVGElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='aria, navigation, conditional processing, core, document event, graphical event, presentation, style'
attributes='viewBox, preserveAspectRatio, zoomAndPan'
interfaces='SVGSVGElement'>
@@ -650,7 +663,7 @@
href='struct.html#SymbolElement'
contentmodel='anyof'
elementcategories='animation, descriptive, shape, structural, paint server'
- elements='a, clipPath, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
+ elements='a, clipPath, color-profile, cursor, filter, font, font-face, foreignObject, image, marker, mask, script, style, switch, view, text, altGlyphDef'
attributecategories='aria, navigation, core, graphical event, presentation, style'
attributes='preserveAspectRatio, viewBox'
interfaces='SVGSymbolElement'>
@@ -808,8 +821,8 @@
<!-- <attribute name='width' elements='text' href='text.html#TextElementWidthAttribute' animatable='yes'/> -->
<!-- xlink:show and xlink:actuate for all elements supporting the XLink attributes, except a -->
- <attribute name='xlink:show' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, filter, feImage, font-face-uri, cursor, pattern, hatch, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkShowAttribute'/>
- <attribute name='xlink:actuate' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, filter, feImage, font-face-uri, cursor, pattern, hatch, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkActuateAttribute'/>
+ <attribute name='xlink:show' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, hatch, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkShowAttribute'/>
+ <attribute name='xlink:actuate' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, hatch, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkActuateAttribute'/>
<!-- attribute common to all animation elements -->
<attribute name='xlink:href' elements='animate, animateColor, animateMotion, animateTransform, set' href='animate.html#HrefAttribute'/>
@@ -893,7 +906,7 @@
<attributecategory
name='presentation'
href='intro.html#TermPresentationAttribute'
- presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, letter-spacing, lighting-color, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-align, text-anchor, text-decoration, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode'/>
+ presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
<attributecategory
name='document event'
@@ -1004,6 +1017,7 @@
<property name='font-weight' href='text.html#FontWeightProperty'/>
<property name='glyph-orientation-horizontal' href='text.html#GlyphOrientationHorizontalProperty'/>
<property name='glyph-orientation-vertical' href='text.html#GlyphOrientationVerticalProperty'/>
+ <property name='hanging-punctuation' href='painting.html#HangingPunctuationProperty'/>
<property name='image-rendering' href='painting.html#ImageRenderingProperty'/>
<property name='letter-spacing' href='text.html#LetterSpacingProperty'/>
<property name='marker' href='painting.html#MarkerProperty'/>
@@ -1030,8 +1044,6 @@
<property name='stroke-miterlimit' href='painting.html#StrokeMiterlimitProperty'/>
<property name='stroke-opacity' href='painting.html#StrokeOpacityProperty'/>
<property name='stroke-width' href='painting.html#StrokeWidthProperty'/>
- <property name='text-align' href='text.html#TextAlignProperty'/>
- <property name='text-align-last' href='text.html#TextAlignLastProperty'/>
<property name='text-anchor' href='text.html#TextAnchorProperty'/>
<property name='text-decoration' href='text.html#TextDecorationProperty'/>
<property name='text-rendering' href='painting.html#TextRenderingProperty'/>
@@ -1045,14 +1057,25 @@
<property name='display' href='painting.html#VisibilityControl'/>
<property name='opacity' href='masking.html#ObjectAndGroupOpacityProperties'/>
- <property name='line-height' href='text.html#TextLineHeight'/>
- <property name='shape-inside' href='text.html#TextShapeInside'/>
- <property name='shape-margin' href='text.html#TextShapeMargin'/>
- <property name='shape-outside' href='text.html#TextShapeOutside'/>
- <property name='shape-padding' href='text.html#TextShapePadding'/>
- <property name='text-overflow' href='text.html#TextOverflowProcessing'/>
<property name='visibility' href='painting.html#VisibilityControl'/>
- <property name='white-space' href='http://dev.w3.org/csswg/css3-text/#white-space'/>
+
+ <!-- ... text properties defined elsewhere -->
+ <property name='hyphens' href='text.html#HyphensProperty'/>
+ <property name='line-height' href='text.html#TextLineHeight'/>
+ <property name='overflow-wrap' href='text.html#OverflowWrapProperty'/>
+ <property name='line-break' href='text.html#LineBreakProperty'/>
+ <property name='shape-inside' href='text.html#TextShapeInside'/>
+ <property name='shape-margin' href='text.html#TextShapeMargin'/>
+ <property name='shape-outside' href='text.html#TextShapeOutside'/>
+ <property name='shape-padding' href='text.html#TextShapePadding'/>
+ <property name='tab-size' href='text.html#TabSizeProperty'/>
+ <property name='text-align' href='text.html#TextAlignProperty'/>
+ <property name='text-align-last' href='text.html#TextAlignLastProperty'/>
+ <property name='text-indent' href='text.html#TextIndentProperty'/>
+ <property name='text-overflow' href='text.html#TextOverflowProcessing'/>
+ <property name='white-space' href='text.html#WhiteSpaceProperty'/>
+ <property name='word-break' href='text.html#WordBreakProperty'/>
+ <property name='word-wrap' href='text.html#WordWrapProperty'/>
<!-- ... interfaces ..................................................... -->
@@ -1365,7 +1388,7 @@
<term name='vertex markers' href='painting.html#TermVertexMarker'/>
<!-- ... defined in text.html ... -->
- <term name='current text position' href='text.html#CurrentTextPostion'/>
+ <term name='current text position' href='text.html#CurrentTextPosition'/>
<!-- === defined in other specifications ================================ -->
@@ -1401,9 +1424,9 @@
<term name='SyntaxError' href='http://www.w3.org/TR/2012/WD-dom-20120405/#syntaxerror'/>
<!-- ... Wrapped text ................................................ -->
- <term name='content area' href='http://www.w3.org/TR/css3-exclusions/#content-area'/>
- <term name='wrapping context' href='http://www.w3.org/TR/css3-exclusions/#wrapping-context'/>
- <term name='wrapping area' href='http://www.w3.org/TR/css3-exclusions/#wrapping-area'/>
+ <term name='content area' href='text.html#TextLayoutContentArea'/>
+ <term name='wrapping context' href='text.html#TextLayoutWrappingArea'/>
+ <term name='wrapping area' href='text.html#TextLayoutWrappingArea'/>
<term name='CSS basic shape' href='http://dev.w3.org/csswg/css-shapes/#basic-shapes-from-svg-syntax'/>
<term name="forced line break" href="http://dev.w3.org/csswg/css-text/#forced-line-break"/>
--- a/master/text.html Tue Oct 08 12:49:38 2013 +0200
+++ b/master/text.html Wed Oct 09 21:28:03 2013 +0200
@@ -113,15 +113,30 @@
</ul>
</p>
+ <p>
+ The section <a href="text.html#TextLayout">Text layout</a> gives an
+ introduction to text layout. It is followed by sections covering
+ <a href="text.html#TextLayoutContentArea">content areas</a>,
+ <a href="text.html#TextLayoutDirections">writing directions</a> and
+ <a href="text.html#TextLayoutPositioning">general glyph
+ positioning</a>. The specialized layout rules corresponding to
+ text that is
+ <a href="text.html#TextLayoutPre">pre-formatted</a>,
+ <a href="text.html#TextLayoutWrapped">auto-wrapped</a>, and
+ <a href="text.html#TextLayoutPath">on a path</a>
+ are then addressed in individual sections.
+ </p>
+
<p class="note">
- Rules for text layout in SVG 1.1 are mostly defined within the
- SVG 1.1 specification. 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.
+ Rules for text layout in SVG 1.1 are mostly defined within the SVG
+ 1.1 specification. The rules mirror to a large extent those found
+ in CSS. In SVG 2, the dependence on CSS is more explicit. In
+ practice the end layout is the same. The change to directly
+ relying on CSS specifications simplifies the SVG specification
+ while making it more obvious that rendering agents can use the
+ same code to both render text in HTML and in SVG. It also allows
+ the easy extension of SVG text layout to include things like
+ automatic text wrapping.
</p>
<p>
@@ -165,279 +180,298 @@
<h2 id="CharactersAndGlyphs">Characters and their corresponding glyphs</h2>
-<p>In XML [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>], textual content
-is defined in terms of a sequence of XML characters,
-where each character is defined by a particular Unicode code point
-[<a href="refs.html#ref-UNICODE">UNICODE</a>].
-Fonts, on the other hand, consist of a collection of
-<a>glyphs</a> and other associated information, such as
-<a href="text.html#FontsTablesBaselines">font tables</a>. A glyph is a
-presentable form of one or more characters (or a part of a character in some
-cases). Each glyph consists of some sort of identifier (in some cases a string,
-in other cases a number) along with drawing instructions for rendering that
-particular glyph.</p>
-
-<p>In many cases, there is a one-to-one mapping of Unicode
-characters (i.e., Unicode code points) to glyphs in a font. For
-example, it is common for a font designed for Latin languages
-(where the term <em>Latin</em> is used for European languages
-such as English with alphabets similar to and/or derivative to
-the Latin language) to contain a single glyph for each of the
-standard ASCII characters (i.e., A-to-Z, a-to-z, 0-to-9, plus
-the various punctuation characters found in ASCII). Thus, in
-most situations, the string "XML", which consists of three
-Unicode characters, would be rendered by the three glyphs
-corresponding to "X", "M" and "L", respectively.</p>
-
-<p>In various other cases, however, there is not a strict
-one-to-one mapping of Unicode characters to glyphs. Some of the
-circumstances when the mapping is not one-to-one:</p>
-
-<ul>
- <li>Ligatures - For best looking typesetting, it is often
- desirable that particular sequences of characters are
- rendered as a single glyph. An example is the word "office".
- Many fonts will define an "ffi" ligature. When the word
- "office" is rendered, sometimes the user agent will render
- the glyph for the "ffi" ligature instead of rendering
- distinct glyphs (i.e., "f", "f" and "i") for each of the
- three characters. Thus, for ligatures, multiple Unicode
- characters map to a single glyph. (Note that for proper
- rendering of some languages, ligatures are required for
- certain character combinations.)</li>
-
- <li>Composite characters - In various situations, commonly
- used adornments such as diacritical marks will be stored once
- in a font as a particular glyph and then composed with one or
- more other glyphs to result in the desired character. For
- example, it is possible that a font engine might render the
- <span class="code-fragment">é</span> character by
- first rendering the glyph for <span
- class="code-fragment">e</span> and then rendering the glyph
- for <span class="code-fragment">´</span> (the accent
- mark) such that the accent mark will appear over the <span
- class="code-fragment">e</span>. In this situation, a single
- Unicode character maps to multiple glyphs.</li>
-
- <li>Glyph substitution - Some typography systems examine the
- nature of the textual content and utilize different glyphs in
- different circumstances. For example, in Arabic, the same
- Unicode character might render as any of four different
- glyphs, depending on such factors as whether the character
- appears at the start, the end or the middle of a sequence of
- cursively joined characters. Different glyphs might be used
- for a punctuation character depending on
- inline-progression-direction (e.g., horizontal vs. vertical).
- In these situations, a single Unicode character might map to
- one of several alternative glyphs.</li>
-
- <li>In some languages, particular sequences of characters
- will be converted into multiple glyphs such that parts of a
- particular character are in one glyph and the remainder of
- that character is in another glyph.</li>
-
- <li>Alternative glyph specification - SVG contains a facility
- for the author to explicitly specify that a particular
- sequence of Unicode characters is to be rendered using a
- particular glyph. (See <a
- href="text.html#AlternateGlyphs">Alternate glyphs</a>.) When
- this facility is used, multiple Unicode characters map to a
- single glyph.</li>
-</ul>
-
-<p>In many situations, the algorithms for mapping from
-characters to glyphs are system-dependent, resulting in the
-possibility that the rendering of text might be (usually
-slightly) different when viewed in different user environments.
-If the author of SVG content requires precise selection of
-fonts and glyphs, then the recommendation is that the necessary
-fonts (potentially subsetted to include only the glyphs needed
-for the given document) be available either as <a
-href="fonts.html#SVGFontsOverview">SVG fonts</a> embedded within the
-SVG content or as <a
-href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#introduction">downloadable fonts</a>
-([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 1)
-posted at the same Web location as the SVG content.</p>
-
-<p>Throughout this chapter, the term <em>character</em> shall be equivalent to the
-definition of a character in XML [<a
-href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>].</p>
+ <p>
+ In XML
+ [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>],
+ textual content is defined in terms of a sequence of XML
+ characters, where each character is defined by a particular
+ Unicode code point [<a href="refs.html#ref-UNICODE">UNICODE</a>].
+ Fonts, on the other hand, consist of a collection of
+ <a>glyphs</a> and other associated information, such as
+ <a href="text.html#FontsTablesBaselines">font tables</a>. A glyph is a
+ presentable form of one or more characters (or a part of a character
+ in some cases). Each glyph consists of some sort of identifier (in
+ some cases a string, in other cases a number) along with drawing
+ instructions for rendering that particular glyph.
+ </p>
+
+ <p>
+ In many cases, there is a one-to-one mapping of Unicode characters
+ (i.e., Unicode code points) to glyphs in a font. For example, it
+ is common for a font designed for Latin languages (where the
+ term <em>Latin</em> is used for European languages such as English
+ with alphabets similar to and/or derivative to the Latin language)
+ to contain a single glyph for each of the standard ASCII
+ characters (i.e., A-to-Z, a-to-z, 0-to-9, plus the various
+ punctuation characters found in ASCII). Thus, in most situations,
+ the string "XML", which consists of three Unicode characters,
+ would be rendered by the three glyphs corresponding to "X", "M"
+ and "L", respectively.
+ </p>
+
+ <p>
+ In various other cases, however, there is not a strict one-to-one
+ mapping of Unicode characters to glyphs. Some of the circumstances
+ when the mapping is not one-to-one:
+ </p>
+
+ <ul>
+ <li>
+ Ligatures – For best looking typesetting, it is often desirable
+ that particular sequences of characters are rendered as a single
+ glyph. An example is the word "office". Many fonts will define
+ an "ffi" ligature. When the word "office" is rendered, sometimes
+ the user agent will render the glyph for the "ffi" ligature
+ instead of rendering distinct glyphs (i.e., "f", "f" and "i")
+ for each of the three characters. Thus, for ligatures, multiple
+ Unicode characters map to a single glyph. (Note that for proper
+ rendering of some languages, ligatures are required for certain
+ character combinations.)
+ </li>
+
+ <li>
+ Composite characters – In various situations, commonly used
+ adornments such as diacritical marks will be stored once in a
+ font as a particular glyph and then composed with one or more
+ other glyphs to result in the desired character. For example, it
+ is possible that a font engine might render the
+ <span class="code-fragment">é</span> character by first
+ rendering the glyph for <span class="code-fragment">e</span> and
+ then rendering the glyph for
+ <span class="code-fragment">´</span> (the accent mark)
+ such that the accent mark will appear over
+ the <span class="code-fragment">e</span>. In this situation, a
+ single Unicode character maps to multiple glyphs.
+ </li>
+
+ <li>
+ Glyph substitution – Some typography systems examine the nature
+ of the textual content and utilize different glyphs in different
+ circumstances. For example, in Arabic, the same Unicode
+ character might render as any of four different glyphs,
+ depending on such factors as whether the character appears at
+ the start, the end or the middle of a sequence of cursively
+ joined characters. Different glyphs might be used for a
+ punctuation character depending on inline-progression-direction
+ (e.g., horizontal vs. vertical). In these situations, a single
+ Unicode character might map to one of several alternative
+ glyphs.
+ </li>
+
+ <li>
+ In some languages, particular sequences of characters will be
+ converted into multiple glyphs such that parts of a particular
+ character are in one glyph and the remainder of that character
+ is in another glyph.
+ </li>
+
+ <li>
+ Alternative glyph specification – SVG contains a facility for
+ the author to explicitly specify that a particular sequence of
+ Unicode characters is to be rendered using a particular
+ glyph. (See <a href="text.html#AlternateGlyphs">Alternate
+ glyphs</a>.) When this facility is used, multiple Unicode
+ characters map to a single glyph.
+ </li>
+ </ul>
+
+ <p>
+ In many situations, the algorithms for mapping from characters to
+ glyphs are system-dependent, resulting in the possibility that the
+ rendering of text might be (usually slightly) different when
+ viewed in different user environments. If the author of SVG
+ content requires precise selection of fonts and glyphs, then the
+ recommendation is that the necessary fonts (potentially subsetted
+ to include only the glyphs needed for the given document) be
+ available either as <a href="fonts.html#SVGFontsOverview">SVG
+ fonts</a> embedded within the SVG content or as
+ <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#introduction">downloadable
+ fonts</a> ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>],
+ section 1) posted at the same Web location as the SVG content.
+ </p>
+
+ <p>
+ Throughout this chapter, the term <em>character</em> shall be
+ equivalent to the definition of a character in XML
+ [<a href="http://www.w3.org/TR/2008/REC-xml-20081126/">XML10</a>].
+ </p>
<h2 id="FontsTablesBaselines">Fonts, font tables and baselines</h2>
-<div class="annotation svg2-requirement">
- <table>
- <tr>
- <th>SVG 2 Requirement:</th>
- <td>Support text aligned to different baselines.</td>
- </tr>
- <tr>
- <th>Resolution:</th>
- <td><a href="http://www.w3.org/2012/03/15-svg-irc#T21-07-21">SVG 2 will support glyphs being aligned to different baselines, perhaps by using existing or improved CSS properties.</a></td>
- </tr>
- <tr>
- <th>Purpose:</th>
- <td>To allow glyphs in horizontal text to have different vertical alignments for stylistic effects.</td>
- </tr>
- <tr>
- <th>Owner:</th>
- <td>Chris (no action)</td>
- </tr>
- </table>
-</div>
-
-<p>A font consists of a collection of glyphs together with the
-information (the font tables) necessary to use those glyphs to
-present characters on some medium. The combination of the
-collection of glyphs and the font tables is called the <em>font
-data</em>. The font tables include the information necessary to
-map characters to glyphs, to determine the size of glyph areas
-and to position the glyph area. Each font table consists of one
-or more font characteristics, such as the font-weight and
-font-style.</p>
-
-<p>The geometric font characteristics are expressed in a
-coordinate system based on the EM box. (The EM is a relative
-measure of the height of the glyphs in the font.)
-The box 1 EM high and 1 EM wide is called the
-<em>design space</em>. This space is given a geometric
-coordinates by sub-dividing the EM into a number of <em>units
-per em</em>.</p>
-
-<p>Note: Units per em is a font characteristic. A typical value
-for units per em is 1000 or 2048.</p>
-
-<p>The coordinate space of the EM box is called the <em>design
-space coordinate system</em>. For scalable fonts, the curves
-and lines that are used to draw a glyph are represented using
-this coordinate system.</p>
-
-<p>Note: Most often, the (0,0) point in this coordinate system
-is positioned on the left edge of the EM box, but not at the
-bottom left corner. The Y coordinate of the bottom of a roman
-capital letter is usually zero. And the descenders on lowercase
-roman letters have negative coordinate values.</p>
-
-<p>SVG assumes that the font tables will provide at least three
-font characteristics: an ascent, a descent and a set of
-baseline-tables. The ascent is the distance to the top of the
-EM box from the (0,0) point of the font; the descent is the
-distance to the bottom of the EM box from the (0.0) point of
-the font. The baseline-table is explained below.</p>
-
-<p>Note: Within an OpenType font, for horizontal writing-modes,
-the ascent and descent are given by the sTypoAscender and
-sTypoDescender entries in the OS/2 table. For vertical
-writing-modes, the descent (the distance, in this case from the
-(0,0) point to the left edge of the glyph) is normally zero
-because the (0,0) point is on the left edge. The ascent for
-vertical writing-modes is either 1 em or is specified by the
-ideographic top baseline value in the OpenType Base table for
-vertical writing-modes.</p>
-
-<p>In horizontal writing-modes, the glyphs of a given script
-are positioned so that a particular point on each glyph, the
-<em><a
-href="text.html#AlignmentPoint">alignment-point</a></em>, is
-aligned with the alignment-points of the other glyphs in that
-script. The glyphs of different scripts, for example, Western,
-Northern Indic and Far-Eastern scripts, are typically aligned
-at different points on the glyph. For example, Western glyphs
-are aligned on the bottoms of the capital letters, northern
-indic glyphs are aligned at the top of a horizontal stroke near
-the top of the glyphs and far-eastern glyphs are aligned either
-at the bottom or center of the glyph. Within a script and
-within a line of text having a single font-size, the sequence
-of alignment-points defines, in the inline-
-progression-direction, a geometric line called a
-<em>baseline</em>. Western and most other alphabetic and
-syllabic glyphs are aligned to an "alphabetic" baseline, the
-northern indic glyphs are aligned to a "hanging" baseline and
-the far-eastern glyphs are aligned to an "ideographic"
-baseline.</p>
-
-<p>A <em>baseline-table</em> specifies the position of one or
-more baselines in the design space coordinate system. The
-function of the baseline table is to facilitate the alignment
-of different scripts with respect to each other when they are
-mixed on the same text line. Because the desired relative
-alignments may depend on which script is dominant in a line (or
-block), there may be a different baseline table for each
-script. In addition, different alignment positions are needed
-for horizontal and vertical writing modes. Therefore, the font
-may have a set of baseline tables: typically, one or more for
-horizontal writing-modes and zero or more for vertical
-writing-modes.</p>
-
-<p>Note: Some fonts may not have values for the baseline
-tables. Heuristics are suggested for approximating the baseline
-tables when a given font does not supply baseline tables.</p>
-
-<p>SVG further assumes that for each glyph in the font data for
-a font, there are two width values, two alignment-baselines and
-two alignment-points, one each for horizontal writing-modes and
-the other for vertical writing-modes. (Even though it is
-specified as a width, for vertical writing-modes the width is
-used in the vertical direction.) The script to which a glyph
-belongs determines an alignment-baseline to which the glyph is
-to be aligned. The <a
-href="text.html#InlineProgressionDirection">inline-progression-direction</a>
-position of the alignment-point is on the start-edge of the
-glyph.</p>
-
-<p>Properties related to baselines are described below under <a
-href="text.html#BaselineAlignmentProperties">Baseline alignment
-properties</a>.</p>
-
-<p>In addition to the font characteristics required above, a
-font may also supply substitution and positioning tables that
-can be used by a formatter to re-order, combine and position a
-sequence of glyphs to make one or more composite glyphs. The
-combination may be as simple as a ligature, or as complex as an
-indic syllable which combines, usually with some re-ordering,
-multiple consonants and vowel glyphs.</p>
-
-<div class="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>
+ <td>Support text aligned to different baselines.</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/2012/03/15-svg-irc#T21-07-21">SVG 2 will support glyphs being aligned to different baselines, perhaps by using existing or improved CSS properties.</a></td>
</tr>
<tr>
<th>Purpose:</th>
- <td>To allow manipualtion of text as a path.</td>
+ <td>To allow glyphs in horizontal text to have different vertical alignments for stylistic effects.</td>
</tr>
<tr>
<th>Owner:</th>
- <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3076">ACTION-3076</a>)</td>
+ <td>Chris (no action)</td>
</tr>
</table>
</div>
+ <p>
+ A font consists of a collection of glyphs together with the
+ information (the font tables) necessary to use those glyphs to
+ present characters on some medium. The combination of the
+ collection of glyphs and the font tables is called the <em>font
+ data</em>. The font tables include the information necessary to
+ map characters to glyphs, to determine the size of glyph areas and
+ to position the glyph area. Each font table consists of one or
+ more font characteristics, such as the font-weight and
+ font-style.
+ </p>
+
+ <p>
+ The geometric font characteristics are expressed in a coordinate
+ system based on the EM box. (The EM is a relative measure of the
+ height of the glyphs in the font.) The box 1 EM high and 1 EM
+ wide is called the <em>design space</em>. This space is given a
+ geometric coordinates by sub-dividing the EM into a number
+ of <em>units per em</em>.
+ </p>
+
+ <p class="note">
+ Units per em is a font characteristic. A typical value
+ for units per em is 1000 or 2048.
+ </p>
+
+ <p>
+ The coordinate space of the EM box is called the <em>design space
+ coordinate system</em>. For scalable fonts, the curves and lines
+ that are used to draw a glyph are represented using this
+ coordinate system.
+ </p>
+
+ <p class="note">
+ Most often, the (0,0) point in this coordinate system is
+ positioned on the left edge of the EM box, but not at the bottom
+ left corner. The Y coordinate of the bottom of a roman capital
+ letter is usually zero. And the descenders on lowercase roman
+ letters have negative coordinate values.
+ </p>
+ <p class="issue">Insert figure.</p>
+
+ <p>
+ SVG assumes that the font tables will provide at least three font
+ characteristics: an ascent, a descent and a set of
+ baseline-tables. The ascent is the distance to the top of the EM
+ box from the (0,0) point of the font; the descent is the distance
+ to the bottom of the EM box from the (0.0) point of the font. The
+ baseline-table is explained below.
+ </p>
+
+ <p class="note">
+ Within an OpenType font, for horizontal writing-modes,
+ the ascent and descent are given by the sTypoAscender and
+ sTypoDescender entries in the OS/2 table. For vertical writing-modes,
+ the descent (the distance, in this case from the (0,0) point to the
+ left edge of the glyph) is normally zero because the (0,0) point is on
+ the left edge. The ascent for vertical writing-modes is either 1 em or
+ is specified by the ideographic top baseline value in the OpenType
+ Base table for vertical writing-modes.
+ </p>
+
+ <p>
+ In horizontal writing-modes, the glyphs of a given script
+ are positioned so that a particular point on each glyph, the
+ <em><a href="text.html#AlignmentPoint">alignment-point</a></em>,
+ is aligned with the alignment-points of the other glyphs in that
+ script. The glyphs of different scripts, for example, Western,
+ Northern Indic and Far-Eastern scripts, are typically aligned at
+ different points on the glyph. For example, Western glyphs are
+ aligned on the bottoms of the capital letters, northern indic
+ glyphs are aligned at the top of a horizontal stroke near the top
+ of the glyphs and far-eastern glyphs are aligned either at the
+ bottom or center of the glyph. Within a script and within a line
+ of text having a single font-size, the sequence of
+ alignment-points defines, in the inline- progression-direction, a
+ geometric line called a <em>baseline</em>. Western and most other
+ alphabetic and syllabic glyphs are aligned to an "alphabetic"
+ baseline, the northern indic glyphs are aligned to a "hanging"
+ baseline and the far-eastern glyphs are aligned to an
+ "ideographic" baseline.
+ </p>
+ <p class="issue">Insert figure.</p>
+
+ <p>
+ A <em>baseline-table</em> specifies the position of one or more
+ baselines in the design space coordinate system. The function of
+ the baseline table is to facilitate the alignment of different
+ scripts with respect to each other when they are mixed on the same
+ text line. Because the desired relative alignments may depend on
+ which script is dominant in a line (or block), there may be a
+ different baseline table for each script. In addition, different
+ alignment positions are needed for horizontal and vertical writing
+ modes. Therefore, the font may have a set of baseline tables:
+ typically, one or more for horizontal writing-modes and zero or
+ more for vertical writing-modes.
+ </p>
+
+ <p class="note">
+ Some fonts may not have values for the baseline tables. Heuristics
+ are suggested for approximating the baseline tables when a given
+ font does not supply baseline tables.
+ </p>
+
+ <p>
+ SVG further assumes that for each glyph in the font data for a
+ font, there are two width values, two alignment-baselines and two
+ alignment-points, one each for horizontal writing-modes and the
+ other for vertical writing-modes. (Even though it is specified as
+ a width, for vertical writing-modes the width is used in the
+ vertical direction.) The script to which a glyph belongs
+ determines an alignment-baseline to which the glyph is to be
+ aligned. The
+ <a href="text.html#InlineProgressionDirection">inline-progression-direction</a>
+ position of the alignment-point is on the start-edge of the glyph.
+ </p>
+
+ <p>
+ Properties related to baselines are described below under
+ <a href="text.html#BaselineAlignmentProperties">Baseline alignment
+ properties</a>.
+ </p>
+
+ <p>
+ In addition to the font characteristics required above, a font may
+ also supply substitution and positioning tables that can be used
+ by a formatter to re-order, combine and position a sequence of
+ glyphs to make one or more composite glyphs. The combination may
+ be as simple as a ligature, or as complex as an indic syllable
+ which combines, usually with some re-ordering, multiple consonants
+ and vowel glyphs.
+ </p>
+
+ <div class="issue">
+ <p>
+ The discussion of vertical text (CJK and Mongolian) is
+ lacking. Here are some notes:
+ <ul>
+ <li>Some Japanese opentype fonts have different glyphs for horizontal and vertical text.</li>
+ <li>Kanji is set in a box 1 zenkaku width x 1 zenkaku width.</li>
+ <li>Kanji baseline divides box into 88:12 ratio.</li>
+ <li>Japanese/Latin mixed, 1 zenkaku should be slightly smaller than 1 em (ex. 10pt: 3.25mm vs 3.51mm).</li>
+ <li>See: <a href="http://ajt.ktug.org/2008/0201okumura.pdf">pTEX and Japanese Typesetting</a>.</li>
+ <li>Vertical kana can have ligatures!</li>
+ <li>At least one proportional (horizontal and vertical) Japanese font exists.</li>
+ <li>See: <a href="http://www.imug.org/presentations/imug-lunde-09162010.pdf">Kazuraki: Adobe Systems' Groundbreaking New Japanese Typeface</a>.</li>
+ </ul>
+ </p>
+ </div>
+
+
+<h2 id="TextElement">The <span class="element-name">'text'</span> element</h2>
+
<edit:with element='text'>
<p>
@@ -542,12 +576,11 @@
</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>
@@ -561,15 +594,13 @@
</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>
@@ -584,12 +615,11 @@
</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>
@@ -606,12 +636,11 @@
</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>
@@ -628,12 +657,11 @@
</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>
@@ -664,6 +692,10 @@
expand/compress the text string to fit within a length of
<a>'textLength'</a>.
</p>
+ <p class="note">
+ This property is not intended for use to obtain effects such
+ as shrinking or expanding text.
+ </p>
<p>
A negative value is an error
(see <a href="implnote.html#ErrorProcessing">Error
@@ -677,12 +709,11 @@
</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>
@@ -695,11 +726,9 @@
</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">
@@ -745,8 +774,8 @@
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>
+ is not also specified. See
+ the <a href="text.html#TextLayoutContentArea">Content Area</a>
section.
</p>
@@ -767,8 +796,8 @@
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>
+ is not also specified. See
+ the <a href="text.html#TextLayoutContentArea">Content Area</a>
section.
</p>
@@ -792,7 +821,7 @@
<edit:example href='images/text/text01.svg' name='test01' description="'Hello, out there' in blue" image='yes' link='yes'/>
-</edit:with>
+ </edit:with>
<h2 id="TSpanElement">The <span class="element-name">'tspan'</span> element</h2>
@@ -894,12 +923,11 @@
</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>
@@ -913,12 +941,11 @@
</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>
@@ -985,12 +1012,11 @@
</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>
@@ -1004,12 +1030,11 @@
</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>
@@ -1067,12 +1092,11 @@
</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>
@@ -1129,12 +1153,11 @@
</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>
@@ -1146,17 +1169,17 @@
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
+ adjustments, such as moving a section of text to a new location to
+ achieve the visual effect of a new line of text (compatable with
+ SVG 1.1). Note that the <a>'x'</a> and <a>'y'</a> attributes are
+ ignored for auto-wrapped text (except for the initial <a>current
+ text position</a> when the <a>content area</a> is specified by
a <a>'text/width'</a> or <a>'text/height'</a> attribute).
</p>
<p class="issue">
Are 'dx', 'dy', and 'rotate' also ignored
for auto-wrapped text? Or are they added adjustments after
- the text is layed out?
+ the text is laid out?
</p>
<p>
In situations where micro-level positioning adjustment are
@@ -1182,7 +1205,7 @@
<ul>
<li>
- When a single XML character maps to a single glyph - In this
+ 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
@@ -1192,7 +1215,7 @@
<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
+ 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)
@@ -1208,7 +1231,7 @@
<li>
When multiple XML characters map to a single glyph (e.g., when a
- ligature is used) - Suppose that the
+ 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
@@ -1233,7 +1256,7 @@
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,
+ – 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
@@ -1265,7 +1288,7 @@
<li>
Relationship to
<a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
- - As described below in the discussion on
+ – 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
@@ -1326,7 +1349,7 @@
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'/>
+ <edit:example href='images/text/tspan03.svg' name='tspan03' description="using tspan's x and y attributes for multi-line text and precise glyph positioning" image='yes' link='yes'/>
<p>
<span class="example-ref">Example tspan04</span> uses the
@@ -1384,7 +1407,8 @@
</ul>
</p>
- <p>Rotation of the orange text inside the "child1" <a>'tspan'</a>element:
+ <p>
+ Rotation of the orange text inside the "child1" <a>'tspan'</a>element:
<ul>
<li>
@@ -1418,7 +1442,8 @@
</ul>
</p>
- <p>Rotation of the yellow text inside the "child2" <a>'tspan'</a>element:
+ <p>
+ Rotation of the yellow text inside the "child2" <a>'tspan'</a>element:
<ul>
<li>
@@ -1514,11 +1539,9 @@
</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>
@@ -1558,7 +1581,7 @@
</edit:with>
-<h2 id="TextLayout">Text layout - Introduction</h2>
+<h2 id="TextLayout">Text layout – Introduction</h2>
<div class="annotation svg2-requirement">
<table>
@@ -1582,15 +1605,36 @@
</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:
+ This section gives a short overview of SVG text layout. It is
+ followed by sections that cover different aspects of text layout
+ in more detail.
+ </p>
+
+ <p>
+ Text is first laid out inside a <a>content area</a>.
+ The <a>content area</a> may be explictly declared by setting the
+ <a>'text/width'</a> attribute (for horizontal text) or the
+ <a>'text/height'</a> attribute (for vertical text), or by setting
+ the <a>'shape-inside'</a> property that defines or references an
+ SVG <a>shape</a>. If a <a>content area</a> is not declared, it
+ defaults to a rectangle of infinite width and height. The rules
+ for text layout within the <a>content area</a> are the same as for
+ text layout in a
+ <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">CSS
+ content area</a> except as noted in this chapter.
+ </p>
+
+ <p>
+ After the initial text layout, SVG transforms are applied. These
+ transforms may shift and/or rotate parts of or all of the
+ text. The rules for which transforms are allowed depend on if
+ the <a>content area</a> was explictly declared or not. If not
+ explicitly declared, the rules define the layout of
+ <em>pre-formatted</em> text. If declared, the rules define the
+ layout of <em>auto-wrapped</em> text. In addition, a
+ <a>'textPath'</a> element can convert a single line of
+ <em>pre-formatted</em> text to <em>text on a path</em>.
+ Examples of the different types of text follow:
</p>
<dl>
@@ -1608,7 +1652,7 @@
<text x="20" y="45"
font-family="sans-serif"
font-size="24" >
- Example of multiline,
+ Example of multi-line,
<tspan x="20" y="75">pre-formatted text.</tspan>
</text>
@@ -1690,20 +1734,19 @@
<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
+ rectangle or other shape by specifying a <a>content area</a>. The
+ design of SVG wrapped text is motivated by the desire that SVG
+ text wrapping be as compatible as possible with text wrapping in
+ CSS inorder that renderers that support CSS text wrapping can
+ implement SVG text wrapping easily (but without requiring non-HTML
+ compatable SVG renderers to implement HTML). There are several
+ differences between SVG and CSS text wrapping. The most important
+ is that in SVG, a <a>content area</a> must be explicitly provided
+ as SVG does not have an automatic finite (or semi-finite)
+ <a>content area</a> (provided in CSS by the box model). Another
+ difference is that SVG does not have the <p></p> and
+ <br/> elements which create line breaks. Instead, SVG relies
+ on the <span class="prop-value">pre</span> and
<span class="prop-value">pre-line</span> values of
<a>'white-space'</a> to provide line breaks. SVG wrapped text also
allows a content-creation tool to provide a natural fallback for
@@ -1724,7 +1767,615 @@
<p class="issue">Define semantics of foriegnObject.</p>
-<h2 id="TextLayoutDirections">Text layout - Directions</h2>
+<h2 id="TextLayoutContentArea">Text layout – Content Area</h2>
+
+ <p>
+ A <dfn>content area</dfn> is defined by specifying in
+ a <a>'text'</a> element either a <a>'text/width'</a> attribute
+ (for horizontal text), a <a>'text/height'</a> attribute (for
+ vertical text), or a <a>'shape-inside'</a> property that defines
+ or references an SVG <a>shape</a>. If no <a>content area</a> is
+ provided, the <a>content area</a> defaults to a rectangle of
+ infinite width and height (see the
+ <a href="text.html#TextLayoutPre">pre-formatted text</a> section).
+ </p>
+
+ <p class="note">
+ An SVG <a>content area</a> corresponds to the <em>content
+ area</em> defined in the
+ <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions">CSS
+ box model</a> and in
+ <a href="http://www.w3.org/TR/css3-exclusions/#content-area">CSS
+ Exclusions</a>.
+ </p>
+
+ <p id="TextLayoutWrappingArea">
+ Wrapped text is laid out in a <dfn>wrapping area</dfn>. The
+ <a>wrapping area</a> is normally the same as the <a>content
+ area</a>. It is possible to exclude part of the <a>content
+ area</a> by defining a <dfn>wrapping context</dfn> using
+ the <a>'shape-outside'</a> property. The <a>wrapping area</a> then
+ is defined by subtracting the <a>wrapping context</a> from
+ the <a>content area</a>. When the <a>content area</a> is defined
+ using the <a>'shape-inside'</a> property, the <a>wrapping area</a>
+ can be reduced by the value of the <a>'shape-padding'</a>
+ property.
+ </p>
+
+ <p class="note">
+ The terms <em>wrapping area</em> and <em>wrapping context</em> are
+ defined in
+ <a href="http://www.w3.org/TR/css3-exclusions/#wrapping-context">CSS
+ Exclusions</a>.
+ </p>
+
+
+<h3 id='TextLayoutWidthHeight'>The 'width' and/or 'height' attributes</h3>
+
+ <p>
+ There are three possible ways to define a <a>content area</a> using the
+ <a>'text'</a> element attributes <a>'text/width'</a> and
+ <a>'text/height'</a>:
+ <dl>
+
+ <dt><a>'text/width'</a> only</dt>
+ <dd>
+ For horizontal text, specifies a width for a
+ "rectangular" <a>content area</a> of infinite height.
+
+ For left-to-right text, the initial <a>current text
+ position</a> is at the left of the rectangle. For
+ right-to-left text it is at the right of the rectangle.
+
+ For vertical text, it is ignored.
+ </dd>
+
+ <dt><a>'text/height'</a> only</dt>
+ <dd>
+ For vertical text specifies, a height for a
+ "rectangular" <a>content area</a> of infinite width. The
+ initial <a>current text position</a> is at the top of the
+ rectangle.
+
+ For horizontal text, it is ignored.
+ </dd>
+
+ <dt><a>'text/height'</a> and <a>'text/width'</a></dt>
+ <dd>
+ For both horizontal and vertical text, specifies a height and
+ with for a "rectangular" <a>content area</a>.
+
+ <p class="issue">
+ This is really, really ugly due to the normal positioning of
+ the initial current text position. We could avoid the issue
+ of shifting x and y (e.g. using baseline='text-before-edge')
+ by not allowing this option. It is trivial to define a
+ rectangluar box content area using
+ shape-inside="rectangle(x,y,width,height)" as shown in
+ the example in the <a>'shape-inside'</a> section.
+ </p>
+ </dd>
+ </dl>
+ In all cases, the initial <a>current text position</a> is taken
+ 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>
+
+<h3 id='TextShapeInside'>The <span class="property">'shape-inside'</span> property</h3>
+
+ <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>
+ <p class="note">
+ In CSS/HTML <a>'shape-inside'</a> applies to block-level elements
+ and absolute and percentage values are defined relative to the
+ block-level element.
+
+ In SVG absolute and percentage values are defined relative to the
+ current <a>user coordinate system</a> and the <a>'viewBox'</a>.
+ </p>
+ <p class="issue">
+ The values 'outside-shape' and 'auto' are probably not useful in SVG.
+ A new value of 'none' is probably needed for SVG. This would indicate
+ that the text should be rendered using a 'width' and/or 'height' attribute,
+ or absent those attributes, as pre-formatted text.
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ShapeInsideProperty">shape-inside</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>none | <basic-shape> | <uri></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</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">This value is probably not 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">This value is probably not useful.</p>
+ </dd>
+
+ <dt><span class="attr-value"><basic-shape></span></dt>
+ <dd>
+ The shape is computed based on the values of one of
+ ‘rectangle’,‘ circle’, ‘ellipse’ or ‘polygon’.
+
+ <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">
+ Except as noted, 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>
+
+<h3 id='TextShapeOutside'>The <span class="property">'shape-outside'</span> property</h3>
+
+ <p>
+ The <a>'shape-outside'</a> property allows one to exclude part of
+ the <a>content area</a> from the <a>wrapping area</a>. The
+ exclusion can be a <a>CSS basic shape</a> or to an
+ SVG <a>shape</a>.
+ </p>
+ <p class="note">
+ In CSS/HTML <a>'shape-outside'</a> applies to floats and
+ absolute and percentage values are defined relative to the
+ float.
+
+ In SVG absolute and percentage values are defined relative to the
+ current <a>user coordinate system</a> and the <a>'viewBox'</a>.
+
+ <span class="issue">We could use the content area.</span>
+ </p>
+ <p class="issue">
+ The value 'auto' is probably not useful in SVG.
+ A new value of 'none' is probably needed in which case
+ the property is ignored.
+ </p>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ShapeOutsideProperty">shape-outside</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>none | <basic-shape> | <uri></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</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 <basic-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"><basic-shape></span></dt>
+ <dd>
+ The shape is computed based on the values of one of
+ ‘rectangle’,‘ circle’, ‘ellipse’ or ‘polygon’.
+ </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>
+ </dd>
+
+ </dl>
+
+ <div class="example">
+ <p>
+ An example of using <a>'shape-outside'</a>.
+ </p>.
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="450" height="300" viewBox="0 0 450 300">
+
+ <rect id="rect1" x="25" y="25" width="225" height="175" fill="white" stroke="black"/>
+ <rect id="rect2" x="200" y="125" width="225" height="150" fill="white" stroke="black"/>
+
+ <text shape-inside="url(#rect1)"
+ shape-outside="url(#rect2)"
+ shape-padding="25"
+ shape-margin="25"
+ font-family="DejaVu Sans"
+ font-size="12px"
+ text-align="justified"
+ line-height="110%">Lorem ipsum ...</text>
+ <text shape-inside="url(#rect2)"
+ shape-padding="25"
+ font-family="DejaVu Sans"
+ font-size="12px"
+ text-align="justified"
+ line-height="110%">Lorem ipsum ...</text>
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/text/text-wrap-complex.png"
+ alt="Image showing horizontal text wrapped inside two overlapping rectangles."/>
+ <p class="caption">
+ Horizontal text wrapping inside two overlapping rectangles
+ using <a>'shape-outside'</a> as well as
+ <a>'shape-inside'</a>, <a>'shape-padding'</a> and
+ <a>'shape-margin'</a>. The black rectangles show
+ the <a>content area</a>s. The inner blue lines show
+ the <a>wrapping area</a>s.
+ </p>
+ </div>
+ </div>
+
+ <p class="note">
+ Except as noted, see the CSS Shapes Module Level 1 for the definition of
+ <a href="http://dev.w3.org/csswg/css-shapes/#shape-outside-property">'shape-outside'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h3 id='TextShapeMargin'>The <span class="property">'shape-margin'</span> property</h3>
+
+ <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>
+
+ <p class="note">
+ Except as noted, see the CSS Shapes Module Level 1 for the definition of
+ See <a href="http://dev.w3.org/csswg/css-shapes/#shape-margin-property">'shape-margin'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h3 id='TextShapePadding'>The <span class="property">'shape-padding'</span> property</h3>
+
+ <p>
+ The <a>'shape-padding'</a> property can be used to offset the
+ inline flow content wrapping on the inside of elements. Offsets
+ created by the ‘wrap-padding’ property are offset from the content
+ area of the element. This property takes on positive values only.
+ </p>
+
+ <div class="example">
+ <p>An example of using <a>'shape-padding'</a></p>.
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="300" height="300" viewBox="0 0 300 300">
+
+ <circle id="circle" cx="150" cy="150" r="125" fill="none" stroke="black"/>
+ <text shape-inside="url(#circle)"
+ shape-padding="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 25
+ pixel pixel 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-shape-padding.png"
+ alt="Image showing horizontal text wrapped inside a circle with a padding."/>
+ <p class="caption">
+ Horizontal text wrapping inside a circle with
+ a <a>'shape-padding'</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">This image is a PNG. Figure out how to make a good SVG.</p>
+ </div>
+
+ <p class="note">
+ Except as noted, see the CSS Shapes Module Level 2 for the definition of
+ <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/#wrap-padding-property">'shape-padding'</a>
+ (wrap-padding renamed to shape-padding).
+ </p>
+
+<h2 id="TextLayoutDirections">Text layout – Directions</h2>
<div class="annotation svg2-requirement">
<table>
@@ -1749,23 +2400,26 @@
</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>
+ This section describes the text layout rules that govern direction
+ of text flow inside a <a>content area</a> in order to support
+ 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).
+ </p>
+
+ <p class="issue">
+ We cannot simply reference CSS 2 as it doesn't include the
+ <a>'writing-mode'</a> property. The
+ <a href="http://www.w3.org/TR/css3-writing-modes/">CSS Writing
+ Modes Module Level 3</a> spec does include <a>'writing-mode'</a>
+ but its definition is a bit different from SVG 1.1. The spec also
+ has a different structure, putting 'direction' and 'unicode-bidi'
+ before 'writing-mode'.
+ </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
@@ -1779,6 +2433,9 @@
relative to the path direction for horizontal text and 180 degrees
relative to the path direction for vertical text.
</p>
+ <p class="issue">In the model that text-on-a-path is text that is
+ first layed out according to CSS and then warped along a path, we
+ can get rid of the distinction made above.</p>
<p id="InlineProgressionDirection">
Based on the reference orientation and the value for
@@ -1852,44 +2509,44 @@
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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="WritingModeProperty">writing-mode</dfn></td>
+ </tr>
+ <tr>
+ <td>Value:</td>
+ <td>lr-tb | rl-tb | tb-rl | lr | rl | tb</td>
+ </tr>
+ <tr>
+ <td>Initial:</td>
+ <td>lr-tb</td>
+ </tr>
+ <tr>
+ <td>Applies to:</td>
+ <td><a>'text'</a> elements</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>no</td>
+ </tr>
+ </table>
<dl>
<dt><span class="attr-value">lr-tb | lr</span></dt>
@@ -2030,44 +2687,44 @@
<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="DirectionProperty">direction</dfn></td>
+ </tr>
+ <tr>
+ <td>Value:</td>
+ <td>ltr | rtl</td>
+ </tr>
+ <tr>
+ <td>Initial:</td>
+ <td>ltr</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>no</td>
+ </tr>
+ </table>
<p>
This property specifies the base writing direction of text and the
@@ -2103,46 +2760,46 @@
<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="UnicodeBidiProperty">unicode-bidi</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | embed | bidi-override</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>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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>no</td>
+ </tr>
+ </table>
+
+ <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-unicode-bidi">normative
@@ -2188,44 +2845,44 @@
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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="GlyphOrientationVerticalProperty">glyph-orientation-vertical</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>auto | <a><angle></a> | <a><number></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>no</td>
+ </tr>
+ </table>
<dl>
<dt><span class="prop-value">auto</span></dt>
@@ -2383,45 +3040,44 @@
<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="GlyphOrientationHorizontalProperty">glyph-orientation-horizontal</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><angle></a> | <a><number></a></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>0deg</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>no</td>
+ </tr>
+ </table>
<dl>
<dt><span class="prop-value"><a><angle></a></span></dt>
@@ -2460,33 +3116,37 @@
to the vertical metrics of the glyph.
</p>
-<h2 id="TextLayoutPositioning">Text layout - Positioning</h2>
-
+<h2 id="TextLayoutPositioning">Text layout – Positioning</h2>
+
+ <p class="issue">
+ Current text position is referred to throughout the document
+ (almost 100 times!).
+ The idea of current text position needs to be reconciled with
+ CSS inline boxes. See:
+ <a href="http://dev.w3.org/csswg/css-inline/">CSS-Inline</a> as
+ well as with the idea that text is laid out first using CSS rules
+ and then tranformed, if necessary, with SVG rules.
+ </p>
+
<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>
+ <a href="text.html#BaselineAlignmentProperties">baseline</a>.
+ 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.
+ pre-formatted and in some cases for auto-wrapped text.
<span class="issue">FIX FOR AUTO-WRAPPED TEXT IN SHAPE</span>
</p>
@@ -2504,12 +3164,8 @@
<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>
+ <!-- Removed in SVG2: <li>For pre-formatted and text on a a path, the ‘x’, ‘y’, ‘dx’, and ‘dy’ attributes on ‘text’, ‘tspan’, ‘tref’, or ‘altGlyph’ elements.</li>-->
+ <li>New lines in pre-formatted or auto-wrapped text.<!-- Added in SVG2--></li>
</ul>
If a glyph does not provide explicit advance values corresponding
to the current <a href="text.html#GlyphOrientation">glyph
@@ -2569,6 +3225,9 @@
</p>
<p id="TextChunks">
+ Once all the glyphs in a <a>'text'</a> element are laid out
+ according to the above rules, the position of the glyphs maybe
+ adjusted according to SVG specific rules.
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
@@ -2738,10 +3397,10 @@
<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
+ Example of multi-line 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>
+ render properly in Firefox. It is SVG 1.1 text. Bad Firefox.</span>
</p>
</div>
</div>
@@ -2922,14 +3581,20 @@
value of <a>'xml:space'</a> is ignored.
</p>
-<h4> Tab Character Size: the ‘tab-size’ property</h4>
+<h4 id="TabSizeProperty">Tab character size: the <span class="property">‘tab-size’</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/#tab-size">'tab-size'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
<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
+ Added for multi-line pre-formatted and auto-wrapped text. Aligns SVG and HTML/CSS
text processing.
</p>
@@ -2993,10 +3658,10 @@
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>
+ <span class="issue">CSS 3 adds the value 'none'.</span>
+ </p>
+
+<h3 id="SpacingProperties">Spacing within lines</h3>
<p>
Two properties affect the space between characters and words:
@@ -3105,27 +3770,27 @@
<td><dfn id="WordSpacingProperty">word-spacing</dfn></td>
</tr>
<tr>
- <td>Value:</td>
+ <th>Value:</th>
<td>normal | <length></td>
</tr>
<tr>
- <td>Initial:</td>
+ <th>Initial:</th>
<td>normal</td>
</tr>
<tr>
- <td>Applies to:</td>
+ <th>Applies to:</th>
<td><a>text content elements</a></td>
</tr>
<tr>
- <td>Inherited:</td>
+ <th>Inherited:</th>
<td>yes</td>
</tr>
<tr>
- <td>Percentages:</td>
+ <th>Percentages:</th>
<td>N/A</td>
</tr>
<tr>
- <td>Media:</td>
+ <th>Media:</th>
<td>visual</td>
</tr>
<tr>
@@ -3133,7 +3798,7 @@
<td>for 'normal' the value '0'; otherwise the absolute length</td>
</tr>
<tr>
- <td><a href="animate.html#Animatable">Animatable</a>:</td>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
<td>yes</td>
</tr>
</table>
@@ -3165,140 +3830,6 @@
([<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">
@@ -3595,46 +4126,47 @@
[<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="DominantBaselineProperty">dominant-baseline</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>auto | use-script | no-change | reset-size |
+ ideographic | alphabetic | hanging |
+ mathematical | central | middle | text-after-edge |
+ text-before-edge</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
<p>
The "dominant-baseline" property is used to determine or
@@ -3818,47 +4350,46 @@
[<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="AlignmentBaselineProperty">alignment-baseline</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>auto | baseline | before-edge | text-before-edge
+ | middle | central | after-edge | text-after-edge |
+ ideographic | alphabetic | hanging | mathematical</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
<p>
This property specifies how an object is aligned with respect to
@@ -3881,7 +4412,7 @@
<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 character belongs – i.e., use the dominant-baseline of
the parent.</dd>
<dt><b>baseline</b></dt>
@@ -3937,47 +4468,48 @@
[<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>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="BaselineShiftProperty">baseline-shift</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>baseline | sub | super
+ | <a href="types.html#DataTypePercentage"><percentage></a>
+ | <a href="types.html#DataTypeLength"><length></a>
+ </td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>baseline</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>'tspan'</a>, <a>'tref'</a>, <a>'altGlyph'</a>, <a>'textPath'</a> elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <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>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
<p>
The <a>'baseline-shift'</a> property allows repositioning of the
@@ -4083,16 +4615,18 @@
<h2 id="TextLayoutPre">Pre-formatted text</h2>
<p class="note">
- This option corresponds to normal SVG 1.1 text layout.
+ This option corresponds to basic 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:
+ of an explicitly defined <a>content area</a>. It is also used as a
+ first step in laying out <em>text on a path</em> (with slightly
+ modified rules). In this layout method, no automatic line breaking
+ or word wrapping is done. Nominally, the text is rendered as a
+ single line inside a rectangular <a>content area</a> of infinite
+ width and height. Multiple lines of text can be obtained by
+ precomputing line breaks and using one of the following methods:
<ul>
<li>
@@ -4123,6 +4657,13 @@
</ul>
</p>
+ <p class="note">
+ The following properties do not apply to <em>pre-formatted</em> text:
+ <a>'text-align'</a>, <a>'text-align-last'</a>, <a>'line-break'</a>,
+ <a>'word-break'</a>, <a>'hyphens'</a>, <a>'word-wrap'</a>,
+ and <a>'overflow-wrap'</a>.
+ </p>
+
<h3 id="TextLayoutPreMultiline">Multi-line text via 'white-space'</h3>
<p>
@@ -4148,7 +4689,7 @@
(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
+ SVG 1.1 only has right-to-left vertical text but CSS Writing
Modes Module Level 3 also has left-to-right. This is required
for Mongolian.
</p>
@@ -4157,6 +4698,160 @@
</p>
+<h3 id="TextLayoutPreAdjustments">Adjusting Text Chunks</h3>
+
+ <p>
+ After text is laid out according to the basic CSS text layout
+ rules, glyphs can be repositioned using SVG specific rules. Two
+ types of adjustments can be made. The first uses the
+ <a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a>,
+ <a>'tspan/dy'</a>, <a>'tspan/rotate'</a> attributes to reposition
+ glyphs with in a <a>'tspan'</a>, <a>'tref'</a>, or
+ <a>'altGlyph'</a> element. The second uses the
+ <a>'text-anchor'</a> property to realign lines of text.
+ </p>
+
+<h4 id="TextLayoutPreXY">Repositioning Glyphs</h4>
+
+ <p class="issue">
+ Expand on how 'x' and 'y' effect characters.
+ </p>
+
+<h4 id="TextAnchoringProperties">Text alignment, the <a>'text-anchor'</a> property</h4>
+
+ <p>
+ The <a>'text-anchor'</a> property is used to align (start-,
+ middle- or end-alignment) a string of <em>pre-formatted</em> text
+ relative to a given point. It is not applicable to
+ <em>auto-wrapped text</em>, see instead <a>'text-align'</a>. For
+ multi-line text, the alignment takes place for each line.
+ </p>
+
+ <p>
+ <span class="issue">This is confusing, perhaps a figure would help:</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>
+
<h2 id="TextLayoutAuto">Auto-wrapped text</h2>
<p>
@@ -4172,15 +4867,10 @@
<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
+ the <a>'tspan/x'</a> and <a>'tspan/y'</a> attributes
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
@@ -4209,433 +4899,6 @@
</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>
@@ -4654,193 +4917,279 @@
[<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>
+<h3 id="LineBreaking">Line Breaking</h3>
+
+<h4 id="LineBreakProperty">Breaking Rules for Punctuation: the <span class="property">‘line-break’</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/#line-break">'line-break'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h4 id="WordBreakProperty">Breaking Rules for Letters: the <span class="property">‘word-break’</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/#word-break">'word-break'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h4 id="HyphenProperty">Hyphenation Control: the <span class="property">‘hyphens’</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/#hyphens">'hyphens'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+<h4 id="WordWrapProperty">Overflow Wrapping: the <span class="property">‘word-wrap’</span> and <span class="property">‘overflow-wrap’</span> properties</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/#word-wrap">'word-wrap'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+ <p class="note">
+ See the CSS Text Module Level 3 specification for the definition
+ of <a href="http://dev.w3.org/csswg/css-text/#overflow-wrap">'overflow-wrap'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+
+
+<h3 id="EdgeEffects">Edge Effects</h3>
+
+<h4 id="TextIndentProperty">First Line Indentation: the <span class="property">‘text-indent’</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-indent">'text-indent'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+ <p class="issue">
+ This property might also be useful for preformatted text.
+ </p>
+
+<h4 id="HangngPunctuationProperty">Hanging Punctuation: the <span class="property">‘hanging-punctuation’</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/#hangin-punctutation">'hanging-punctuation'</a>.
+ [<a href="refs.html#ref-CSS21">CSSXX</a>]
+ </p>
+ <p class="issue">
+ This property might also be useful for preformatted text.
+ It is marked in the CSS spec as at risk.
+ </p>
<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>
+ 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
+ of <a href="text.html#TextLayoutPre">pre-formatted</a> text that
+ is then 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 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
+ <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>
+
+<h3 id="TextPathAttributes">Attributes</h3>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="TextPathElementStartOffsetAttribute"><span class="adef">startOffset</span></dt>
+ <dd>
+ <p>
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeLengths"><length></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextPathElementMethodAttribute"><span class="adef">method</span></dt>
+ <dd>
+ <p>
+ Indicates the method by which text should be rendered
+ along the path.
+ </p>
+ <p>
+ 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
+ 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.
+ </p>
+ <p>
+ 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.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd>align | stretch</dd>
+ <dt><a>Lacuna value</a></dt> <dd>align</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextPathElementSpacingAttribute"><span class="adef">spacing</span></dt>
+ <dd>
+ <p>
+ 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
+ path.
+ </p>
+ <p>
+ 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/>
+ spacing rules as specified in
+ <a href="text.html#TextpathLayoutRules">Text on a path layout
+ rules</a>.
+ </p>
+ <p>
+ 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.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd>auto | exact</dd>
+ <dt><a>Lacuna value</a></dt> <dd>align</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="TextPathElementDAttribute"><span class="adef">d</span></dt>
+ <dd>
+ <p>
+ 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>.
+ </p>
+ <p>
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
+ 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>
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="paths.html#PathData"><em>path data</em></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</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>
+
+ </dd>
+
+ <dt id="TextPathElementHrefAttribute"><span class="adef">xlink:href</span></dt>
+ <dd>
+ <p>
+ 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.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeIRI"><iri></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ </dl>
+
+ <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
@@ -4855,11 +5204,13 @@
<textPath xlink:href="#path1">Text on a path1</textPath>
</text>
</svg>
-</pre>
-
-<p>should have the same effect as the following:</p>
-
-<pre>
+ </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
@@ -4873,274 +5224,349 @@
</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'/>
+ </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>
+ <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>
@@ -5285,730 +5711,853 @@
<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>
+ <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>
+ <p class="issue">It has been argued that this property is useless. It
+ would be of more use if coupled with a mechanism that would expose
+ the hidden text (tool-tip on hovering over ellipses?).
+ </p>
+
<h2 id="FontPropertiesUsedBySVG">Font selection properties</h2>
-<p>SVG uses the following font specification properties. Except
-for any additional information provided in this specification,
-the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html">normative definition of these properties</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], chapter 15).
-Any SVG-specific notes about these properties are contained in
-the descriptions below.</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontFamilyProperty"><span class="propdef-title property">'font-family'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>[[ <family-name> |<br />
- <generic-family> ],]* [<family-name>
- |<br />
- <generic-family>]</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>depends on user agent</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 indicates which font family is to be used to
-render the text, specified as a prioritized list of font family
-names and/or generic family names.
-Unless the family name corresponds to a CSS IDENT, it must be quoted.
-Except for any additional
-information provided in this specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.3).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontStyleProperty"><span class="propdef-title property">'font-style'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | italic | oblique</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 whether the text is to be rendered
-using a normal, italic or oblique face. Except for any
-additional information provided in this specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.4).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontVariantProperty"><span class="propdef-title property">'font-variant'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | small-caps</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 indicates whether the text is to be rendered
-using the normal glyphs for lowercase characters or using
-small-caps glyphs for lowercase characters. Except for any
-additional information provided in this specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.5).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontWeightProperty"><span class="propdef-title property">'font-weight'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | bold | bolder | lighter | 100 | 200 |
- 300<br />
- | 400 | 500 | 600 | 700 | 800 | 900</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 refers to the boldness or lightness of the
-glyphs used to render the text, relative to other fonts in the
-same font family. Except for any additional information
-provided in this specification, the
-<a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.6).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontStretchProperty"><span class="propdef-title property">'font-stretch'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>normal | wider | narrower |<br />
- ultra-condensed | extra-condensed |<br />
- condensed | semi-condensed |<br />
- semi-expanded | expanded |<br />
- extra-expanded | ultra-expanded</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 indicates the desired amount of condensing or
-expansion in the glyphs used to render the text. Except for any
-additional information provided in this specification, the
-<a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-stretch-prop">normative definition of the property</a>
-is in CSS3 Fonts ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 3.3).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontSizeProperty"><span class="propdef-title property">'font-size'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td><absolute-size> | <relative-size>
- |<br />
- <length> | <percentage></td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>medium</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, the computed value is inherited</td>
- </tr>
- <tr>
- <td><em>Percentages:</em> </td>
- <td>refer to parent element's font size</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 refers to the size of the font from baseline
-to baseline when multiple lines of text are set solid in a
-multiline layout environment. 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 height
-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">12pt</span> or <span
-class="attr-value">10%</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/fonts.html#propdef-font-size">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.7).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontSizeAdjustProperty"><span class="propdef-title property">'font-size-adjust'</span></dt>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td><number> | none</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>none</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 (non-additive)</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>This property allows authors to specify an aspect value for
-an element that will preserve the x-height of the first choice
-font in a substitute font. Except for any additional
-information provided in this specification, the
-<a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#propdef-font-size-adjust">normative definition of the property</a>
-is in CSS3 Fonts ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 3.6).</p>
-
- <div class="propdef">
- <dl>
- <dt id="FontProperty"><span class="propdef-title property">'font'</span></dt>
- <dd>
- <table class="propinfo"
- >
- <tr>
- <td><em>Value:</em> </td>
- <td>[ [ <span
- class="propinst-font-style"><'font-style'></span>
- || <span
+ <p>
+ SVG uses the following font specification properties. Except for
+ any additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html">normative
+ definition of these properties</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], chapter 15). Any
+ SVG-specific notes about these properties are contained in the
+ descriptions below.
+ </p>
+ <p class="issue">Update to <a "href=http://www.w3.org/TR/css3-fonts/#font-rend-props>"CSS
+ Font Module Level 3</a>. Note that 'font-variant' is completely reworked.</p>
+
+<h3>The <span class="property">'font-family'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontFamilyProperty">font-family</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>[[ <family-name> |<br />
+ <generic-family> ],]* [<family-name>
+ |<br />
+ <generic-family>]</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>depends on user agent</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property indicates which font family is to be used to render
+ the text, specified as a prioritized list of font family names
+ and/or generic family names. Unless the family name corresponds
+ to a CSS IDENT, it must be quoted. Except for any additional
+ information provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.3).
+ </p>
+
+<h3>The <span class="property">'font-style'</span>property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontStyleProperty">font-style</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | italic | oblique</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property specifies whether the text is to be rendered using a
+ normal, italic or oblique face. Except for any additional
+ information provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.4).
+ </p>
+
+<h3>The <span class="property">'font-variant'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontVariantProperty">font-variant</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | small-caps</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property indicates whether the text is to be rendered using
+ the normal glyphs for lowercase characters or using small-caps
+ glyphs for lowercase characters. Except for any additional
+ information provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.5).
+ </p>
+
+<h3>The <span class="property">'font-weight'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontWeightProperty">font-weight</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | bold | bolder | lighter | 100 | 200 |
+ 300<br />
+ | 400 | 500 | 600 | 700 | 800 | 900</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property refers to the boldness or lightness of the glyphs
+ used to render the text, relative to other fonts in the same font
+ family. Except for any additional information provided in this
+ specification, the
+ <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.6).
+ </p>
+
+<h3>The <span class="property">'font-stretch'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontStretchProperty">font-stretch</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>normal | wider | narrower |<br />
+ ultra-condensed | extra-condensed |<br />
+ condensed | semi-condensed |<br />
+ semi-expanded | expanded |<br />
+ extra-expanded | ultra-expanded</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property indicates the desired amount of condensing or
+ expansion in the glyphs used to render the text. Except for any
+ additional information provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-stretch-prop">normative
+ definition of the property</a> is in CSS3 Fonts
+ ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 3.3).
+ </p>
+
+<h3>The <span class="property">'font-size'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontSizeProperty">font-size</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><absolute-size> | <relative-size>
+ |<br />
+ <length> | <percentage></td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>medium</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes, the computed value is inherited</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>refer to parent element's font size</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property refers to the size of the font from baseline to
+ baseline when multiple lines of text are set solid in a multi-line
+ layout environment. 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 height
+ 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">12pt</span>
+ or <span class="attr-value">10%</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/fonts.html#propdef-font-size">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 15.7).
+ </p>
+
+<h3>The <span class="property">'font-size-adjust'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontSizeAdjustProperty">font-size-adjust</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><number> | none</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property allows authors to specify an aspect value for an
+ element that will preserve the x-height of the first choice font
+ in a substitute font. Except for any additional information
+ provided in this specification, the
+ <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#propdef-font-size-adjust">normative
+ definition of the property</a> is in CSS3 Fonts
+ ([<a href="refs.html#ref-CSS3FONTS">CSS3FONTS</a>], section 3.6).
+ </p>
+
+<h3>The <span class="property">'font'</span> property</h3>
+
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="FontProperty">font</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>[ [ <span
+ class="propinst-font-style"><'font-style'></span>
+ || <span
class="propinst-font-variant"><'font-variant'></span>
- || <span
+ || <span
class="propinst-font-weight"><'font-weight'></span>
- ]?<br />
- <'font-size'> [ / <'line-height'> ]?
- <'font-family'> ] |<br />
- caption | icon | menu | message-box |<br />
- small-caption | status-bar</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>see individual properties</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>allowed on 'font-size' and 'line-height' (Note:
- for the purposes of processing the <a>'font property'</a> property in
- SVG, 'line-height' is assumed to be equal the value
- for property <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 (non-additive)</td>
- </tr>
- </table>
- </dd>
- </dl>
- </div>
-
-<p>Shorthand property for setting <a>'font-style'</a>, <a>'font-variant'</a>,
-<a>'font-weight'</a>, <a>'font-size'</a>, <span class='property'>'line-height'</span> and <a>'font-family'</a>.
-The <span class='property'>'line-height'</span> property has no effect on text layout in SVG.
-For the purposes of the <a>'font property'</a>
-property, <span class='property'>'line-height'</span> is assumed to be equal to the value of
-the <a>'font-size'</a> property. <a
-href="conform.html#ConformingSVGViewers">Conforming SVG
-Viewers</a> are not required to support the various system font
-options (caption, icon, menu, message-box, small-caption and
-status-bar) and can use a system font or one of the generic
-fonts instead.</p>
-
-<p>Except for any additional information provided in this
-specification, the
-<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>
+ ]?<br />
+ <'font-size'> [ / <'line-height'> ]?
+ <'font-family'> ] |<br />
+ caption | icon | menu | message-box |<br />
+ small-caption | status-bar</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>see individual 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>allowed on 'font-size' and 'line-height' (Note:
+ for the purposes of processing the <a>'font property'</a> property in
+ SVG, 'line-height' is assumed to be equal the value
+ for property <a>'font-size'</a>)</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes (non-additive)</td>
+ </tr>
+ </table>
+
+ <p>
+ Shorthand property for setting <a>'font-style'</a>,
+ <a>'font-variant'</a>, <a>'font-weight'</a>, <a>'font-size'</a>,
+ <span class='property'>'line-height'</span> and
+ <a>'font-family'</a>. The <span class='property'>'line-height'</span>
+ property has no effect on text layout in SVG. For the purposes of
+ the <a>'font property'</a> property,
+ <span class='property'>'line-height'</span> is assumed to be equal
+ to the value of the <a>'font-size'</a> property.
+ <a href="conform.html#ConformingSVGViewers">Conforming SVG
+ Viewers</a> are not required to support the various system font
+ options (caption, icon, menu, message-box, small-caption and
+ status-bar) and can use a system font or one of the generic fonts
+ instead.
+ </p>
+
+ <p>
+ Except for any additional information provided in this
+ specification, the
+ <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="TextDecorationProperties">Text decoration</h2>
+<h3>The <span class="property">'text-decoration'</span> property</h3>
+
<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>
- <dd>
- <table
- class="propinfo" >
- <tr>
- <td><em>Value:</em> </td>
- <td>none | [ underline || overline || line-through ||
- blink ]</td>
- </tr>
- <tr>
- <td><em>Initial:</em> </td>
- <td>none</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 (see prose)</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 describes decorations that are added to the
-text of an element. <a
-href="conform.html#ConformingSVGViewers">Conforming SVG
-Viewers</a> are not required to support the
-<strong>blink</strong> value.</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-text-decoration">normative definition of the property</a>
-is in CSS 2.1 ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.3.1).</p>
-
-<p>The CSS 2.1 specification defines the
-behavior of the <a>'text-decoration'</a> property using the
-terminology "block-level elements" and "inline elements". For
-the purposes of the <a>'text-decoration'</a> property and SVG, a
-<a>'text'</a> element represents a
-block-level element and any of the potential children of a <a>'text'</a>
-element (e.g., a <a>'tspan'</a>) represent inline elements.</p>
-
-<p>Also, the CSS 2.1 definition of <a>'text-decoration'</a> specifies that the
-"color of the decorations" remain the same on descendant
-elements. Since SVG offers a painting model consisting of the
-ability to apply various types of paint (see <a
-href="painting.html">Painting: Filling, Stroking and Marker
-Symbols</a>) to both the interior (i.e., the "fill") and the
-outline (i.e., the "stroke") of text, for SVG the <a>'text-decoration'</a> property is defined
-such that, for an element which has a specified value for the
-<a>'text-decoration'</a> property, all
-decorations on its content and that of its descendants are
-rendered using the same fill and stroke properties as are
-present on the given element. If the <a>'text-decoration'</a> property is
-specified on a descendant, then that overrides the
-ancestor.</p>
-
-<p>Because SVG allows text to be both filled and stroked,
-drawing order matters in some circumstances with text
-decorations. Text decoration drawing order should be as
-follows:</p>
-<ul>
- <li>All text decorations except line-through should be drawn
- before the text is filled and stroked; thus, the text is
- rendered on top of these decorations.</li>
- <li>Line-through should be drawn after the text is filled and
- stroked; thus, the line-through is rendered on top of the
- text.</li>
-</ul>
-
-<p id="ExampleTextDecoration01"><span class="example-ref">Example textdecoration01</span>
-provides examples for <a>'text-decoration'</a>. The first line of
-text has no value for <a>'text-decoration'</a>, so the initial
-value of <span class="prop-value">text-decoration:none</span>
-is used. The second line shows <span
-class="prop-value">text-decoration:line-through</span>. The
-third line shows <span
-class="prop-value">text-decoration:underline</span>. The
-fourth line illustrates the rule whereby decorations are
-rendered using the same fill and stroke properties as are
-present on the element for which the <a>'text-decoration'</a> is specified. Since
-<a>'text-decoration'</a> is specified
-on the <a>'text'</a> element, all text within
-the <a>'text'</a> element has its
-underline rendered with the same fill and stroke properties as
-exist on the <a>'text'</a> element (i.e., blue
-fill, red stroke), even though the various words have different
-fill and stroke property values. However, the word "different"
-explicitly specifies a value for <a>'text-decoration'</a>; thus, its underline
-is rendered using the fill and stroke properties as the <a>'tspan'</a> element that surrounds
-the word "different" (i.e., yellow fill, darkgreen stroke):</p>
-
-<edit:example href='images/text/textdecoration01.svg' name='textdecoration01' description="behavior of 'text-decoration' property" image='yes' link='yes'/>
+ <table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="TextDecorationProperty">text-decoration</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>none | [ underline || overline || line-through ||
+ blink ]</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>text content elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no (see prose)</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></td>
+ </tr>
+ <tr>
+ <th><a>Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+ </table>
+
+ <p>
+ This property describes decorations that are added to the text of
+ an element. <a href="conform.html#ConformingSVGViewers">Conforming
+ SVG Viewers</a> are not required to support the
+ <strong>blink</strong> value.
+ </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-text-decoration">normative
+ definition of the property</a> is in CSS 2.1
+ ([<a href="refs.html#ref-CSS21">CSS21</a>], section 16.3.1).
+ </p>
+
+ <p>
+ The CSS 2.1 specification defines the behavior of
+ the <a>'text-decoration'</a> property using the terminology
+ "block-level elements" and "inline elements". For the purposes of
+ the <a>'text-decoration'</a> property and SVG, a
+ <a>'text'</a> element represents a block-level element and any of
+ the potential children of a <a>'text'</a> element (e.g., a
+ <a>'tspan'</a>) represent inline elements.
+ </p>
+
+ <p>
+ Also, the CSS 2.1 definition of <a>'text-decoration'</a> specifies
+ that the "color of the decorations" remain the same on descendant
+ elements. Since SVG offers a painting model consisting of the
+ ability to apply various types of paint
+ (see <a href="painting.html">Painting: Filling, Stroking and
+ Marker Symbols</a>) to both the interior (i.e., the "fill") and
+ the outline (i.e., the "stroke") of text, for SVG
+ the <a>'text-decoration'</a> property is defined such that, for an
+ element which has a specified value for the
+ <a>'text-decoration'</a> property, all decorations on its content
+ and that of its descendants are rendered using the same fill and
+ stroke properties as are present on the given element. If
+ the <a>'text-decoration'</a> property is specified on a
+ descendant, then that overrides the ancestor.
+ </p>
+
+ <p>
+ Because SVG allows text to be both filled and stroked,
+ drawing order matters in some circumstances with text
+ decorations. Text decoration drawing order should be as
+ follows:
+ </p>
+ <ul>
+ <li>
+ All text decorations except line-through should be drawn
+ before the text is filled and stroked; thus, the text is
+ rendered on top of these decorations.
+ </li>
+ <li>
+ Line-through should be drawn after the text is filled and
+ stroked; thus, the line-through is rendered on top of the
+ text.
+ </li>
+ </ul>
+
+ <p id="ExampleTextDecoration01">
+ <span class="example-ref">Example textdecoration01</span> provides
+ examples for <a>'text-decoration'</a>. The first line of text has
+ no value for <a>'text-decoration'</a>, so the initial value
+ of <span class="prop-value">text-decoration:none</span> is
+ used. The second line shows
+ <span class="prop-value">text-decoration:line-through</span>. The
+ third line shows
+ <span class="prop-value">text-decoration:underline</span>. The
+ fourth line illustrates the rule whereby decorations are rendered
+ using the same fill and stroke properties as are present on the
+ element for which the <a>'text-decoration'</a> is specified. Since
+ <a>'text-decoration'</a> is specified on the <a>'text'</a>
+ element, all text within the <a>'text'</a> element has its
+ underline rendered with the same fill and stroke properties as
+ exist on the <a>'text'</a> element (i.e., blue fill, red stroke),
+ even though the various words have different fill and stroke
+ property values. However, the word "different" explicitly
+ specifies a value for <a>'text-decoration'</a>; thus, its
+ underline is rendered using the fill and stroke properties as
+ the <a>'tspan'</a> element that surrounds the word "different"
+ (i.e., yellow fill, darkgreen stroke):
+ </p>
+
+ <edit:example href='images/text/textdecoration01.svg' name='textdecoration01' description="behavior of 'text-decoration' property" image='yes' link='yes'/>
<h2 id="AlternateGlyphs">Alternate glyphs</h2>
-<p>There are situations such as ligatures, special-purpose fonts (e.g.,
-a font for music symbols) or alternate glyphs for Asian text strings
-where it is required that a different set of glyphs is used than the
-glyph(s) which normally corresponds to the given character data.</p>
+ <p>
+ There are situations such as ligatures, special-purpose fonts
+ (e.g., a font for music symbols) or alternate glyphs for Asian
+ text strings where it is required that a different set of glyphs
+ is used than the glyph(s) which normally corresponds to the given
+ character data.
+ </p>
<h3 id="AltGlyphElement">The <span class="element-name">'altGlyph'</span> element</h3>
<edit:with element='altGlyph'>
-<p>The <a>'altGlyph'</a> element provides control over the glyphs used to
-render particular character data.</p>
-
-<edit:elementsummary name='altGlyph'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AltGlyphElementHrefAttribute"><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> either to a <a>'glyph'</a> element in an SVG
- document fragment or to an <a>'altGlyphDef'</a>
- element.<br />
- <br />
- If the reference is to a <a>'glyph'</a> element and that glyph
+ <p>
+ The <a>'altGlyph'</a> element provides control over the glyphs
+ used to render particular character data.
+ </p>
+
+ <edit:elementsummary name='altGlyph'/>
+
+<h4 id="AltGlyphAttributes">Attributes</h4>
+
+ <dl class="attrdef-list-svg2">
+ <dt id="AltGlyphElementHrefAttribute"><span class="adef">xlink:href</span></dt>
+ <dd>
+
+ <p>
+ An <a href="linking.html#IRIReference">IRI reference</a>
+ either to a <a>'glyph'</a> element in an SVG document fragment
+ or to an <a>'altGlyphDef'</a> element.
+ </p>
+ <p>
+ If the reference is to a <a>'glyph'</a> element and that glyph
is available, then that glyph is rendered instead of the
- character(s) that are inside of the <a>'altGlyph'</a> element.<br />
- <br />
- If the reference is to an <a>'altGlyphDef'</a> element, then
+ character(s) that are inside of the <a>'altGlyph'</a> element.
+ </p>
+ <p>
+ If the reference is to an <a>'altGlyphDef'</a> element, then
if an appropriate set of alternate glyphs is located from
- processing the <a>'altGlyphDef'</a> element, then
- those alternate glyphs are rendered instead of the
- character(s) that are inside of the <a>'altGlyph'</a> element.<br />
- <br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span><br />
- <br />
- </dd>
- <dt id="AltGlyphElementGlyphRefAttribute"><span
- class="adef">glyphRef</span> = "<span
- class="attr-value"><string></span>"</dt>
- <dd>The glyph identifier, the format of which is dependent
- on the <a>'format'</a> of the given font.
- (Same meaning as the <a>'glyphRef/glyphRef'</a> attribute on the
- <a>'glyphRef element'</a> element.)<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="AltGlyphElementFormatAttribute"><span
- class="adef">format</span> = "<span
- class="attr-value"><string></span>"</dt>
- <dd>The format of the given font. If the font is in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one of
- the formats listed in CSS2</a>,
- such as <em>TrueDoc™ Portable Font Resource</em> or <em>Embedded OpenType</em>,
- then the <string> must contain the corresponding font
- format string, such as <em>truedoc-pfr</em> or
- <em>embedded-opentype</em>. (This attribute has the same meaning as the <a>'glyphRef/format'</a>
- attribute on the <a>'glyphRef element'</a> element.)
- <span class="issue">This refers to CSS 2; it needs to be reviewed against the formats
- described by CSS3 Fonts.</span><br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="AltGlyphElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>The <a
- href="types.html#DataTypeLength"><length></a>
- values are processed in the same manner as the <a>'tspan/x'</a>
- attribute on the <a>'tspan'</a> element, with the
- following exception: If the referenced alternate glyphs are
- rendered instead of the Unicode characters inside the <a>'altGlyph'</a> element, then any
- absolute X coordinates specified via an <a>'x'</a>
- attribute on this element or any ancestor
- <a>'text'</a> or <a>'tspan'</a> elements for
- Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a> element are ignored.
- Any absolute X coordinate specified via an <a>'x'</a> attribute on this
- 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
- >current text
- position</a> before rendering the first alternate
- glyph.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="AltGlyphElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-coordinates></a></span>"</dt>
- <dd>The corresponding absolute Y coordinates for rendering
- the <a>'altGlyph'</a>
- element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="AltGlyphElementDXAttribute"><span
- class="adef">dx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>The <a
- href="types.html#DataTypeLength"><length></a> values
- are processed in the same manner as the <a>'tspan/dx'</a> attribute on
- the <a>'tspan'</a> element, with the
- following exception: If the referenced alternate glyphs are
- rendered instead of the Unicode characters inside the <a>'altGlyph'</a> element, then any
- relative X coordinates specified via an <a>'dx'</a> attribute on this element or
- any ancestor <a>'text'</a> or <a>'tspan'</a> elements for
- Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a> element are ignored.
- Any relative X coordinate specified via an <a>'dx'</a> attribute on this 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
- relative X coordinate for the <a
- >current text
- position</a> before rendering the first alternate
- glyph.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="AltGlyphElementDYAttribute"><span
- class="adef">dy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLengths"><list-of-lengths></a></span>"</dt>
- <dd>The corresponding relative Y coordinates for rendering
- the <a>'altGlyph'</a>
- element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="AltGlyphElementRotateAttribute"><span
- class="adef">rotate</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumbers"><list-of-numbers></a></span>"</dt>
- <dd>The <a
- href="types.html#DataTypeNumber"><number></a> values
- are processed in the same manner as the <a>'tspan/rotate'</a>
- attribute on the <a>'tspan'</a> element, with the
- following exception: If the referenced alternate glyphs are
- rendered instead of the Unicode characters inside the <a>'altGlyph'</a>
- element, then any supplemental rotation values specified via an
- <a>'rotate'</a> attribute on this element or any ancestor
- <a>'text'</a> or <a>'tspan'</a> elements for
- Unicode characters 2 through <var>n</var> within the <a>'altGlyph'</a>
- element are ignored.
- Supplemental rotation values specified via an <a>'rotate'</a>
- attribute on this 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
- supplemental rotation angle before rendering the alternate
- glyphs.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>: yes
- (non-additive).</span></dd>
+ processing the <a>'altGlyphDef'</a> element, then those
+ alternate glyphs are rendered instead of the character(s) that
+ are inside of the <a>'altGlyph'</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></dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
</dl>
- </div>
-
-<p>If the references to alternate glyphs do not result in successful
-identification of alternate glyphs to use, then the character(s)
-that are inside of the <a>'altGlyph'</a> element are rendered as
-if the <a>'altGlyph'</a> element were a <a>'tspan'</a> element
-instead.</p> <p>An <a>'altGlyph'</a> element either references a
-<a>'glyph'</a> element or an <a>'altGlyphDef'</a> element via its
-<a>'xlink:href'</a> attribute or identifies a glyph by means of
-<a href="text.html#FontPropertiesUsedBySVG">font selection properties</a>,
-a glyph identifier and a font format. If the <a>'xlink:href'</a>
-attribute is specified, it takes precedence, and the other glyph
-identification attributes and properties are ignored.</p>
+
+ </dd>
+
+ <dt id="AltGlyphElementGlyphRefAttribute"><span class="adef">glyphRef</span></dt>
+ <dd>
+ <p>
+ The glyph identifier, the format of which is dependent on
+ the <a>'format'</a> of the given font. (Same meaning as
+ the <a>'glyphRef/glyphRef'</a> attribute on the
+ <a>'glyphRef element'</a> element.)
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><string></dd>
+ <dt><a>Lacuna value</a></dt> <dd></dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="AltGlyphElementFormatAttribute"><span class="adef">format</span></dt>
+ <dd>
+ <p>
+ The format of the given font. If the font is
+ in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one
+ of the formats listed in CSS2</a>, such as <em>TrueDoc™
+ Portable Font Resource</em> or <em>Embedded OpenType</em>,
+ then the <string> must contain the corresponding font
+ format string, such as <em>truedoc-pfr</em> or
+ <em>embedded-opentype</em>. (This attribute has the same meaning
+ as the <a>'glyphRef/format'</a> attribute on the <a>'glyphRef
+ element'</a> element.)
+ <span class="issue">This refers to CSS 2; it needs to be
+ reviewed against the formats described by CSS3 Fonts.</span>
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><string></dd>
+ <dt><a>Lacuna value</a></dt> <dd>undefined</dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="AltGlyphElementXAttribute"><span class="adef">x</span></dt>
+ <dd>
+ <p>
+ The <a href="types.html#DataTypeLength"><length></a>
+ values are processed in the same manner as
+ the <a>'tspan/x'</a> attribute on the <a>'tspan'</a> element,
+ with the following exception: If the referenced alternate
+ glyphs are rendered instead of the Unicode characters inside
+ the <a>'altGlyph'</a> element, then any absolute X coordinates
+ specified via an <a>'x'</a> attribute on this element or any
+ ancestor <a>'text'</a> or <a>'tspan'</a> elements for Unicode
+ characters 2 through <var>n</var> within the <a>'altGlyph'</a>
+ element are ignored. Any absolute X coordinate specified via
+ an <a>'x'</a> attribute on this 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 >current text
+ position</a> before rendering the first alternate glyph.
+ </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="AltGlyphElementYAttribute"><span class="adef">y</span></dt>
+ <dd>
+ <p>
+ The corresponding absolute Y coordinates for rendering
+ the <a>'altGlyph'</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="AltGlyphElementDXAttribute"><span class="adef">dx</span></dt>
+ <dd>
+ <p>
+ The <a href="types.html#DataTypeLength"><length></a>
+ values are processed in the same manner as the <a>'tspan/dx'</a>
+ attribute on the <a>'tspan'</a> element, with the following
+ exception: If the referenced alternate glyphs are rendered
+ instead of the Unicode characters inside the <a>'altGlyph'</a>
+ element, then any relative X coordinates specified via
+ an <a>'dx'</a> attribute on this element or any ancestor
+ <a>'text'</a> or <a>'tspan'</a> elements for Unicode characters
+ 2 through <var>n</var> within the <a>'altGlyph'</a> element are
+ ignored. Any relative X coordinate specified via an <a>'dx'</a>
+ attribute on this 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 relative X
+ coordinate for the <a >current text position</a> before
+ rendering the first alternate glyph.
+ </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="AltGlyphElementDYAttribute"><span class="adef">dy</span></dt>
+ <dd>
+ <p>
+ The corresponding relative Y coordinates for rendering
+ the <a>'altGlyph'</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>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="AltGlyphElementRotateAttribute"><span class="adef">rotate</span> = "<span class="attr-value"></span>"</dt>
+ <dd>
+ <p>
+ The <a href="types.html#DataTypeNumber"><number></a>
+ values are processed in the same manner as
+ the <a>'tspan/rotate'</a> attribute on the <a>'tspan'</a>
+ element, with the following exception: If the referenced
+ alternate glyphs are rendered instead of the Unicode characters
+ inside the <a>'altGlyph'</a> element, then any supplemental
+ rotation values specified via an
+ <a>'rotate'</a> attribute on this element or any ancestor
+ <a>'text'</a> or <a>'tspan'</a> elements for Unicode characters
+ 2 through <var>n</var> within the <a>'altGlyph'</a> element are
+ ignored. Supplemental rotation values specified via
+ an <a>'rotate'</a> attribute on this 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 supplemental rotation angle before rendering the alternate
+ glyphs.
+ </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>
+
+ </dl>
+
+ <p>
+ If the references to alternate glyphs do not result in successful
+ identification of alternate glyphs to use, then the character(s)
+ that are inside of the <a>'altGlyph'</a> element are rendered as
+ if the <a>'altGlyph'</a> element were a <a>'tspan'</a> element
+ instead.</p> <p>An <a>'altGlyph'</a> element either references a
+ <a>'glyph'</a> element or an <a>'altGlyphDef'</a> element via its
+ <a>'xlink:href'</a> attribute or identifies a glyph by means of
+ <a href="text.html#FontPropertiesUsedBySVG">font selection
+ properties</a>, a glyph identifier and a font format. If
+ the <a>'xlink:href'</a> attribute is specified, it takes
+ precedence, and the other glyph identification attributes and
+ properties are ignored.</p>
</edit:with>
@@ -6016,269 +6565,380 @@
<span class="element-name">'altGlyphItem'</span> and
<span class="element-name">'glyphRef'</span> elements</h3>
-<p id="AltGlyphDefElement">The <a>'altGlyphDef'</a> element defines a set of possible glyph
-substitutions.</p>
-
-<edit:elementsummary name='altGlyphDef'/>
-
-<p>An <a>'altGlyphDef'</a> can contain either of the following:</p>
-
-<ul>
- <li>In the simplest case, an <a>'altGlyphDef'</a> contains one or more
- <a>'glyphRef'</a> elements. Each <a>'glyphRef'</a> element references
- a single glyph within a particular font. If all of the referenced
- glyphs are available, then these glyphs are rendered instead of the
- character(s) inside of the referencing <a>'altGlyph'</a> element. If
- any of the referenced glyphs are unavailable, then the character(s)
- that are inside of the <a>'altGlyph'</a> element are rendered as
- if there were not an <a>'altGlyph'</a> element surrounding those
- characters.</li>
-
- <li>In the more complex case, an <a>'altGlyphDef'</a> contains one
- or more <a>'altGlyphItem'</a> elements. Each <a>'altGlyphItem'</a>
- represents a candidate set of substitute glyphs. Each
- <a>'altGlyphItem'</a> contains one or more <a>'glyphRef'</a> elements.
- Each <a>'glyphRef'</a> element references a single glyph within
- a particular font. The first <a>'altGlyphItem'</a> in which all
- referenced glyphs are available is chosen. The glyphs referenced from
- this <a>'altGlyphItem'</a> are rendered instead of the character(s)
- that are inside of the referencing <a>'altGlyph'</a> element. If none
- of the <a>'altGlyphItem'</a> elements result in a successful match
- (i.e., none of the <a>'altGlyphItem'</a> elements has all of its
- referenced glyphs available), then the character(s) that are inside
- of the <a>'altGlyph'</a> element are rendered as if there were not an
- <a>'altGlyph'</a> element surrounding those characters.</li>
-</ul>
-
-<p id="AltGlyphItemElement">The <a>'altGlyphItem'</a> element
-defines a candidate set of possible glyph substitutions. The first
-<a>'altGlyphItem'</a> element whose referenced glyphs are all available
-is chosen. Its glyphs are rendered instead of the character(s) that are
-inside of the referencing <a>'altGlyph'</a> element.</p>
-
-<edit:elementsummary name='altGlyphItem'/>
+ <p id="AltGlyphDefElement">
+ The <a>'altGlyphDef'</a> element defines a set of possible glyph
+ substitutions.
+ </p>
+
+ <edit:elementsummary name='altGlyphDef'/>
+
+ <p>
+ An <a>'altGlyphDef'</a> can contain either of the following:
+ </p>
+
+ <ul>
+ <li>
+ In the simplest case, an <a>'altGlyphDef'</a> contains one or
+ more <a>'glyphRef'</a> elements. Each <a>'glyphRef'</a> element
+ references a single glyph within a particular font. If all of
+ the referenced glyphs are available, then these glyphs are
+ rendered instead of the character(s) inside of the referencing
+ <a>'altGlyph'</a> element. If any of the referenced glyphs are
+ unavailable, then the character(s) that are inside of the
+ <a>'altGlyph'</a> element are rendered as if there were not
+ an <a>'altGlyph'</a> element surrounding those characters.
+ </li>
+
+ <li>
+ In the more complex case, an <a>'altGlyphDef'</a> contains one
+ or more <a>'altGlyphItem'</a> elements. Each
+ <a>'altGlyphItem'</a> represents a candidate set of substitute
+ glyphs. Each <a>'altGlyphItem'</a> contains one or more
+ <a>'glyphRef'</a> elements. Each <a>'glyphRef'</a> element
+ references a single glyph within a particular font. The
+ first <a>'altGlyphItem'</a> in which all referenced glyphs are
+ available is chosen. The glyphs referenced from
+ this <a>'altGlyphItem'</a> are rendered instead of the
+ character(s) that are inside of the referencing
+ <a>'altGlyph'</a> element. If none of the <a>'altGlyphItem'</a>
+ elements result in a successful match (i.e., none of
+ the <a>'altGlyphItem'</a> elements has all of its referenced
+ glyphs available), then the character(s) that are inside of
+ the <a>'altGlyph'</a> element are rendered as if there were not
+ an <a>'altGlyph'</a> element surrounding those characters.
+ </li>
+ </ul>
+
+ <p id="AltGlyphItemElement">
+ The <a>'altGlyphItem'</a> element defines a candidate set of
+ possible glyph substitutions. The first <a>'altGlyphItem'</a>
+ element whose referenced glyphs are all available is chosen. Its
+ glyphs are rendered instead of the character(s) that are inside of
+ the referencing <a>'altGlyph'</a> element.
+ </p>
+
+ <edit:elementsummary name='altGlyphItem'/>
<edit:with element='glyphRef'>
-<p id="GlyphRefElement">The <a>'glyphRef element'</a> element defines a
-possible glyph to use.</p>
-
-<edit:elementsummary name='glyphRef'/>
-
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="GlyphRefElementHrefAttribute"><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 a <a>'glyph'</a> element in an SVG
- document fragment. The referenced <a>'glyph'</a> is rendered as an
- alternate glyph.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementGlyphRefAttribute"><span
- class="adef">glyphRef</span> = "<span
- class="attr-value"><string></span>"</dt>
- <dd>The glyph identifier, the format of which is dependent
- on the <a>'format'</a> of the given
- font.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementFormatAttribute"><span
- class="adef">format</span> = "<span
- class="attr-value"><string></span>"</dt>
- <dd>The format of the given font. If the font is in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one of
- the formats listed in CSS2</a>,
- such as <em>TrueDoc™ Portable Font Resource</em> or <em>Embedded OpenType</em>,
+ <p id="GlyphRefElement">
+ The <a>'glyphRef element'</a> element defines a possible glyph to
+ use.
+ </p>
+
+ <edit:elementsummary name='glyphRef'/>
+
+<h4 id="AltGlyphAttributes">Attributes</h4>
+
+ <dl class="attrdef-list-svg2">
+ <dt id="GlyphRefElementHrefAttribute"><span class="adef">xlink:href</span></dt>
+ <dd>
+ <p>
+ An <a href="linking.html#IRIReference">IRI reference</a> to
+ a <a>'glyph'</a> element in an SVG document fragment. The
+ referenced <a>'glyph'</a> is rendered as an alternate
+ glyph.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeIRI"><iri></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd></dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="GlyphRefElementGlyphRefAttribute"><span class="adef">glyphRef</span></dt>
+ <dd>
+ <p>
+ The glyph identifier, the format of which is dependent on
+ the <a>'format'</a> of the given font.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><string></dd>
+ <dt><a>Lacuna value</a></dt> <dd></dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="GlyphRefElementFormatAttribute"><span class="adef">format</span></dt>
+ <dd>
+ <p>
+ The format of the given font. If the font is in
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#referencing">one
+ of the formats listed in CSS2</a>, such as <em>TrueDoc™
+ Portable Font Resource</em> or <em>Embedded OpenType</em>,
then the <string> must contain the corresponding font
format string, such as <em>truedoc-pfr</em> or
- <em>embedded-opentype</em>. <span class="issue">This refers to CSS 2; it needs to be reviewed against the formats
- described by CSS3 Fonts.</span><br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumber"><number></a></span>"</dt>
- <dd>This value represents the new absolute X coordinate
- within the font's coordinate system for this glyph.<br />
- The font coordinate system is based on the <em>em
- square</em> model described in the <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
- of CSS2. <span class='issue'>CSS3 Fonts doesn't talk about the em square much.</span><br />
- If the attribute is not specified, for the first <a>'glyphRef element'</a> child element, the
- effect is as if the attribute were set to "0", whereas for
- subsequent <a>'glyphRef element'</a>
- child elements, the effect is as if the attribute were set
- to the end X coordinate from the previous <a>'glyphRef element'</a> element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumber"><number></a></span>"</dt>
- <dd>The corresponding new absolute Y coordinate within the
- font's coordinate system for this glyph.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementDXAttribute"><span
- class="adef">dx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumber"><number></a></span>"</dt>
- <dd>This value represents the relative X coordinate within
- the font's coordinate system for this glyph. The glyph is
- thus shifted by <span
- class="attr-value"><number></span> units along the
- positive X axis within the font's coordinate system
- supplemental to the absolute X coordinate established by
- the <a>'x'</a> attribute (either due to an
- explicit <a>'x'</a> attribute or due to default
- value processing for the <a>'x'</a> attribute).<br />
- The font coordinate system is based on the <em>em
- square</em> model described in the <a
- href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts chapter</a>
- of CSS2. <span class='issue'>CSS3 Fonts doesn't talk about the em square much.</span><br />
- If the attribute is not specified, the effect is as if the
- attribute were set to "0".<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- <dt id="GlyphRefElementDYAttribute"><span
- class="adef">dy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeNumber"><number></a></span>"</dt>
- <dd>The corresponding number of units within the font's
- coordinate system to shift the glyph along the positive Y
- axis relative to the absolute Y coordinate established by
- the <a>'y'</a> attribute.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
+ <em>embedded-opentype</em>. <span class="issue">This refers to
+ CSS 2; it needs to be reviewed against the formats described
+ by CSS3 Fonts.</span>
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><string></dd>
+ <dt><a>Lacuna value</a></dt> <dd>undefined</dd>
+ <dt><a>Animatable</a></dt> <dd>no</dd>
</dl>
- </div>
-
-<p>A <a>'glyphRef element'</a> either references a
-<a>'glyph'</a> element in an SVG document fragment via its
-<a>'xlink:href'</a> attribute or identifies a glyph by means of <a
-href="text.html#FontPropertiesUsedBySVG">font selection properties</a>,
-a glyph identifier and a font format. If insufficient attributes
-and properties have been specified to identify a glyph, then the
-<a>'glyphRef element'</a> is processed in the same manner as when
-a glyph reference is fully specified, but the given glyph is not
-available. If the <a>'xlink:href'</a> attribute is specified, it takes
-precedence, and the other glyph identification attributes and properties
-are ignored.</p>
+
+ </dd>
+
+ <dt id="GlyphRefElementXAttribute"><span class="adef">x</span></dt>
+ <dd>
+ <p>
+ This value represents the new absolute X coordinate within the
+ font's coordinate system for this glyph.
+ </p>
+ <p>
+ The font coordinate system is based on the <em>em square</em>
+ model described in the
+ <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html">Fonts
+ chapter</a> of CSS2. <span class='issue'>CSS3 Fonts doesn't
+ talk about the em square much.</span>
+ </p>
+ <p>
+ If the attribute is not specified, for the first <a>'glyphRef
+ element'</a> child element, the effect is as if the attribute
+ were set to "0", whereas for subsequent <a>'glyphRef
+ element'</a> child elements, the effect is as if the attribute
+ were set to the end X coordinate from the previous
+ <a>'glyphRef element'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumber"><number></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>No</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="GlyphRefElementYAttribute"><span class="adef">y</span></dt>
+ <dd>
+ <p>
+ The corresponding new absolute Y coordinate within the font's
+ coordinate system for this glyph.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumber"><number></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>See above.</dd>
+ <dt><a>Animatable</a></dt> <dd>No</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="GlyphRefElementDXAttribute"><span class="adef">dx</span></dt>
+ <dd>
+ <p>
+ This value represents the relative X coordinate within the
+ font's coordinate system for this glyph. The glyph is thus
+ shifted by <span class="attr-value"><number></span>
+ units along the positive X axis within the font's coordinate
+ system supplemental to the absolute X coordinate established
+ by the <a>'x'</a> attribute (either due to an
+ explicit <a>'x'</a> attribute or due to default value
+ processing for the <a>'x'</a> attribute).
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumber"><number></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>No</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="GlyphRefElementDYAttribute"><span class="adef">dy</span></dt>
+ <dd>
+ <p>
+ The corresponding number of units within the font's coordinate
+ system to shift the glyph along the positive Y axis relative
+ to the absolute Y coordinate established by the <a>'y'</a>
+ attribute.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a href="types.html#DataTypeNumber"><number></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>No</dd>
+ </dl>
+
+ </dd>
+ </dl>
+
+ <p>
+ A <a>'glyphRef element'</a> either references a
+ <a>'glyph'</a> element in an SVG document fragment via its
+ <a>'xlink:href'</a> attribute or identifies a glyph by means
+ of <a href="text.html#FontPropertiesUsedBySVG">font selection
+ properties</a>, a glyph identifier and a font format. If
+ insufficient attributes and properties have been specified to
+ identify a glyph, then the <a>'glyphRef element'</a> is processed
+ in the same manner as when a glyph reference is fully specified,
+ but the given glyph is not available. If the <a>'xlink:href'</a>
+ attribute is specified, it takes precedence, and the other glyph
+ identification attributes and properties are ignored.
+ </p>
</edit:with>
<h2 id="TextSelection">Text selection and clipboard operations</h2>
-<p><a href="conform.html#ConformingSVGViewers">Conforming SVG
-viewers</a> on systems which have the capacity for text selection (e.g.,
-systems which are equipped with a pointer device such as a mouse) and
-which have system clipboards for copy/paste operations are required to
-support:</p>
-
-<ul>
- <li>user selection of text strings in SVG content</li>
- <li>the ability to copy selected text strings to the system clipboard</li>
-</ul>
-
-<p>A text selection operation starts when all of the following occur:</p>
-
-<ul>
- <li>the user positions the pointing device over a glyph that has
- been rendered as part of a <a>'text'</a> element, initiates a
- <em>select</em> operation (e.g., pressing the standard system mouse
- button for select operations) and then moves the pointing device while
- continuing the <em>select</em> operation (e.g., continuing to press
- the standard system mouse button for select operations)</li>
-
- <li>no other visible graphics element has been painted above the glyph
- at the point at which the pointing device was clicked</li>
-
- <li>no <a href="linking.html#Links">links</a> or
- <a href="script.html#EventHandling">events</a> have been assigned to the
- <a>'text'</a>, <a>'tspan'</a> or <a>'textPath'</a> element(s) (or
- their ancestors) associated with the given glyph.</li>
-</ul>
-
-<p>As the text selection operation proceeds (e.g., the user continues to
-press the given mouse button), all associated events with other graphics
-elements are ignored (i.e., the text selection operation is modal) and
-the SVG user agent shall dynamically indicate which characters are
-selected by an appropriate highlighting technique, such as redrawing the
-selected glyphs with inverse colors. As the pointer is moved during the
-text selection process, the end glyph for the text selection operation
-is the glyph within the same <a>'text'</a> element whose glyph cell is
-closest to the pointer. All characters within the <a>'text'</a> element
-whose position within the <a>'text'</a> element is between the start
-of selection and end of selection shall be highlighted, regardless of
-position on the canvas and regardless of any graphics elements that
-might be above the end of selection point.</p>
-
-<p>Once the text selection operation ends (e.g., the user releases the
-given mouse button), the selected text will stay highlighted until an
-event occurs which cancels text selection, such as a pointer device
-activation event (e.g., pressing a mouse button).</p>
-
-<p>Detailed rules for determining which characters to
-highlight during a text selection operation are provided in
-<a href="implnote.html#TextSelectionImplementationNotes">Text selection
-implementation notes</a>.</p>
-
-<p>For systems which have system clipboards, the SVG user agent is
-required to provide a user interface for initiating a copy of the
-currently selected text to the system clipboard. It is sufficient for
-the SVG user agent to post the selected text string in the system's
-appropriate clipboard format for plain text, but it is preferable if the
-SVG user agent also posts a rich text alternative which captures the
-various <a href="text.html#FontPropertiesUsedBySVG">font properties</a>
-associated with the given text string.</p>
-
-<p>For bidirectional text, the user agent must support text
-selection in logical order, which will result in discontinuous
-highlighting of glyphs due to the bidirectional reordering of
-characters. User agents can provide an alternative ability to
-select bidirectional text in visual rendering order (i.e., after
-<a href="text.html#RelationshipWithBiDirectionality">bidirectional</a> text
-layout algorithms have been applied), with the result that selected
-character data might be discontinuous logically. In this case, if the
-user requests that bidirectional text be copied to the clipboard, then
-the user agent is required to make appropriate adjustments to copy only
-the visually selected characters to the clipboard.</p>
-
-<p>When feasible, it is recommended that generators of SVG attempt to
-order their text strings to facilitate properly ordered text selection
-within SVG viewing applications such as Web browsers.</p>
+ <p>
+ <a href="conform.html#ConformingSVGViewers">Conforming SVG
+ viewers</a> on systems which have the capacity for text selection (e.g.,
+ systems which are equipped with a pointer device such as a mouse) and
+ which have system clipboards for copy/paste operations are required to
+ support:
+ </p>
+
+ <ul>
+ <li>user selection of text strings in SVG content</li>
+ <li>the ability to copy selected text strings to the system clipboard</li>
+ </ul>
+
+ <p>
+ A text selection operation starts when all of the following occur:
+ </p>
+
+ <ul>
+ <li>
+ the user positions the pointing device over a glyph that has
+ been rendered as part of a <a>'text'</a> element, initiates a
+ <em>select</em> operation (e.g., pressing the standard system
+ mouse button for select operations) and then moves the pointing
+ device while continuing the <em>select</em> operation (e.g.,
+ continuing to press the standard system mouse button for select
+ operations)
+ </li>
+
+ <li>
+ no other visible graphics element has been painted above the glyph
+ at the point at which the pointing device was clicked
+ </li>
+
+ <li>
+ no <a href="linking.html#Links">links</a> or
+ <a href="script.html#EventHandling">events</a> have been
+ assigned to the <a>'text'</a>, <a>'tspan'</a> or
+ <a>'textPath'</a> element(s) (or their ancestors) associated
+ with the given glyph.
+ </li>
+ </ul>
+
+ <p>
+ As the text selection operation proceeds (e.g., the user continues
+ to press the given mouse button), all associated events with other
+ graphics elements are ignored (i.e., the text selection operation
+ is modal) and the SVG user agent shall dynamically indicate which
+ characters are selected by an appropriate highlighting technique,
+ such as redrawing the selected glyphs with inverse colors. As the
+ pointer is moved during the text selection process, the end glyph
+ for the text selection operation is the glyph within the
+ same <a>'text'</a> element whose glyph cell is closest to the
+ pointer. All characters within the <a>'text'</a> element whose
+ position within the <a>'text'</a> element is between the start of
+ selection and end of selection shall be highlighted, regardless of
+ position on the canvas and regardless of any graphics elements
+ that might be above the end of selection point.
+ </p>
+
+ <p>
+ Once the text selection operation ends (e.g., the user releases
+ the given mouse button), the selected text will stay highlighted
+ until an event occurs which cancels text selection, such as a
+ pointer device activation event (e.g., pressing a mouse button).
+ </p>
+
+ <p>
+ Detailed rules for determining which characters to highlight
+ during a text selection operation are provided in
+ <a href="implnote.html#TextSelectionImplementationNotes">Text
+ selection implementation notes</a>.
+ </p>
+
+ <p>
+ For systems which have system clipboards, the SVG user agent is
+ required to provide a user interface for initiating a copy of the
+ currently selected text to the system clipboard. It is sufficient
+ for the SVG user agent to post the selected text string in the
+ system's appropriate clipboard format for plain text, but it is
+ preferable if the SVG user agent also posts a rich text
+ alternative which captures the various
+ <a href="text.html#FontPropertiesUsedBySVG">font
+ properties</a> associated with the given text string.
+ </p>
+
+ <p>
+ For bidirectional text, the user agent must support text selection
+ in logical order, which will result in discontinuous highlighting
+ of glyphs due to the bidirectional reordering of characters. User
+ agents can provide an alternative ability to select bidirectional
+ text in visual rendering order (i.e., after
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectional</a>
+ text layout algorithms have been applied), with the result that
+ selected character data might be discontinuous logically. In this
+ case, if the user requests that bidirectional text be copied to
+ the clipboard, then the user agent is required to make appropriate
+ adjustments to copy only the visually selected characters to the
+ clipboard.
+ </p>
+
+ <p>
+ When feasible, it is recommended that generators of SVG attempt to
+ order their text strings to facilitate properly ordered text
+ selection within SVG viewing applications such as Web browsers.
+ </p>
<h2 id="DOMInterfaces">DOM interfaces</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>
+
<h3 id="InterfaceSVGTextContentElement">Interface SVGTextContentElement</h3>
-
-
-<p>The <a>SVGTextContentElement</a> is inherited by various text-related
-interfaces, such as <a>SVGTextElement</a>, <a>SVGTSpanElement</a>,
-<a>SVGTRefElement</a>, <a>SVGAltGlyphElement</a> and
-<a>SVGTextPathElement</a>.
-</p>
-
-
-<p>For the methods on this interface that refer to an index to a character
-or a number of characters, these references are to be interpreted as an
-index to a UTF-16 code unit or a number of UTF-16 code units, respectively.
-This is for consistency with DOM Level 2 Core, where methods on the
-<a>CharacterData</a> interface use UTF-16 code units as indexes and counts
-within the character data. Thus for example, if the text content of a
-<a>'text'</a> element is a single non-BMP character, such as U+10000, then
-invoking <a>SVGTextContentElement::getNumberOfChars</a> on that element
-will return 2 since there are two UTF-16 code units (the surrogate pair)
-used to represent that one character.
-</p>
+ <p>
+ The <a>SVGTextContentElement</a> is inherited by various
+ text-related interfaces, such as <a>SVGTextElement</a>,
+ <a>SVGTSpanElement</a>, <a>SVGTRefElement</a>, <a>SVGAltGlyphElement</a>
+ and <a>SVGTextPathElement</a>.
+ </p>
+
+ <p>
+ For the methods on this interface that refer to an index to a
+ character or a number of characters, these references are to be
+ interpreted as an index to a UTF-16 code unit or a number of
+ UTF-16 code units, respectively. This is for consistency with DOM
+ Level 2 Core, where methods on the <a>CharacterData</a> interface
+ use UTF-16 code units as indexes and counts within the character
+ data. Thus for example, if the text content of a <a>'text'</a>
+ element is a single non-BMP character, such as U+10000, then
+ invoking <a>SVGTextContentElement::getNumberOfChars</a> on that
+ element will return 2 since there are two UTF-16 code units (the
+ surrogate pair) used to represent that one character.
+ </p>
+
<pre class="idl">interface <b>SVGTextContentElement</b> : <a>SVGGraphicsElement</a> {
// lengthAdjust Types