CINXE.COM

<!DOCTYPE html>  <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"/> <title>Text — SVG 2</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>  <link rel="stylesheet" title="Default" href="style/svg.css" type="text/css" media="screen"/><link rel="alternate stylesheet" title="Only annotations for publication" href="style/default_no_maturity.css" type="text/css" media="screen"/><link rel="alternate stylesheet" title="No issues/annotations" href="style/default_no_issues.css" type="text/css" media="screen"/><link rel="stylesheet" href="//www.w3.org/StyleSheets/TR/2016/W3C-ED" type="text/css" media="screen"/><script src="style/link-fixup.js"></script></head> <body class="chapter-text"> <h1>Chapter 11: Text</h1><nav id="toc"><div class="header {{side}}"><a href="Overview.html">Overview</a> · <a href="shapes.html">Previous</a> · <a href="embedded.html">Next</a> · <a href="eltindex.html">Elements</a> · <a href="attindex.html">Attributes</a> · <a href="propidx.html">Properties</a></div><h2 id="Contents" class="contents">Contents</h2><ol class="toc"><li><ol class="toc"><li><a href="text.html#Introduction">11.1. Introduction</a><ol class="toc"><li><a href="text.html#Definitions">11.1.1. Definitions</a></li><li><a href="text.html#FontsGlyphs">11.1.2. Fonts and glyphs</a></li><li><a href="text.html#GlyphsMetrics">11.1.3. Glyph metrics and layout</a></li></ol></li><li><a href="text.html#TextElement">11.2. The ‘text’ and ‘tspan’ elements</a><ol class="toc"><li><a href="text.html#TSpanAttributes">11.2.1. Attributes</a></li><li><a href="text.html#TSpanNotes">11.2.2. Notes on 'x', 'y', 'dx', 'dy' and 'rotate'</a></li></ol></li><li><a href="text.html#TextLayout">11.3. Text layout – Introduction</a></li><li><a href="text.html#TextLayoutContentArea">11.4. Text layout – Content Area</a><ol class="toc"><li><a href="text.html#InlineSize">11.4.1. The ‘inline-size’ property</a></li><li><a href="text.html#TextShapeInside">11.4.2. The ‘shape-inside’ property</a></li><li><a href="text.html#TextShapeSubtract">11.4.3. The ‘shape-subtract’ property</a></li><li><a href="text.html#TextShapeImageThreshold">11.4.4. The ‘shape-image-threshold’ property</a></li><li><a href="text.html#TextShapeMargin">11.4.5. The ‘shape-margin’ property</a></li><li><a href="text.html#TextShapePadding">11.4.6. The ‘shape-padding’ property</a></li></ol></li><li><a href="text.html#TextLayoutAlgorithm">11.5. Text layout – Algorithm</a></li><li><a href="text.html#TextLayoutPre">11.6. Pre-formatted text</a><ol class="toc"><li><a href="text.html#TextLayoutPreMultiline">11.6.1. Multi-line text via 'white-space'</a></li><li><a href="text.html#TextLayoutPreAdjustments">11.6.2. Repositioning Glyphs</a></li></ol></li><li><a href="text.html#TextLayoutAuto">11.7. Auto-wrapped text</a><ol class="toc"><li><a href="text.html#TextLayoutAutoNotes">11.7.1. Notes on Text Wrapping</a><ol class="toc"><li><a href="text.html#TextLayoutAutoNotesStart">11.7.1.1. First Line Positioning</a></li><li><a href="text.html#TextLayoutAutoNotesBrokenLines">11.7.1.2. Broken Lines</a></li></ol></li></ol></li><li><a href="text.html#TextLayoutPath">11.8. Text on a path</a><ol class="toc"><li><a href="text.html#TextPathElement">11.8.1. The ‘textPath’ element</a></li><li><a href="text.html#TextPathAttributes">11.8.2. Attributes</a></li><li><a href="text.html#TextpathLayoutRules">11.8.3. Text on a path layout rules</a></li></ol></li><li><a href="text.html#TextRenderingOrder">11.9. Text rendering order</a></li><li><a href="text.html#TextProperties">11.10. Properties and pseudo-elements</a><ol class="toc"><li><a href="text.html#TextPropertiesSVG">11.10.1. SVG properties</a><ol class="toc"><li><a href="text.html#TextAnchoringProperties">11.10.1.1. Text alignment, the ‘text-anchor’ property</a></li><li><a href="text.html#GlyphOrientationHorizontalProperty">11.10.1.2. The ‘glyph-orientation-horizontal’ property</a></li><li><a href="text.html#GlyphOrientationVerticalProperty">11.10.1.3. The ‘glyph-orientation-vertical’ property</a></li><li><a href="text.html#KerningProperty">11.10.1.4. The ‘kerning’ property</a></li></ol></li><li><a href="text.html#TextPropertiesAdaptions">11.10.2. SVG adaptions</a><ol class="toc"><li><a href="text.html#FontVariantProperty">11.10.2.1. The ‘font-variant’ property</a></li><li><a href="text.html#LineHeightProperty">11.10.2.2. The ‘line-height’ property</a></li><li><a href="text.html#WritingModeProperty">11.10.2.3. The ‘writing-mode’ property</a></li><li><a href="text.html#DirectionProperty">11.10.2.4. The ‘direction’ property</a></li><li><a href="text.html#DominantBaselineProperty">11.10.2.5. The ‘dominant-baseline’ property</a></li><li><a href="text.html#AlignmentBaselineProperty">11.10.2.6. The ‘alignment-baseline’ property</a></li><li><a href="text.html#BaselineShiftProperty">11.10.2.7. The ‘baseline-shift’ property</a></li><li><a href="text.html#LetterSpacingProperty">11.10.2.8. The ‘letter-spacing’ property</a></li><li><a href="text.html#WordSpacingProperty">11.10.2.9. The ‘word-spacing’ property</a></li><li><a href="text.html#TextOverflowProperty">11.10.2.10. The ‘text-overflow’ property</a></li></ol></li><li><a href="text.html#WhiteSpace">11.10.3. White space</a><ol class="toc"><li><a href="text.html#TextWhiteSpace">11.10.3.1. SVG 2 Preferred white space handling, the ‘white-space’ property</a></li><li><a href="text.html#LegacyXMLSpace">11.10.3.2. Legacy white-space handling, the ‘xml:space’ property</a></li><li><a href="text.html#DuplicateWhiteSpace">11.10.3.3. Duplicate white-space directives</a></li></ol></li></ol></li><li><a href="text.html#TextDecorationProperties">11.11. Text decoration</a></li><li><a href="text.html#TextSelection">11.12. Text selection and clipboard operations</a><ol class="toc"><li><a href="text.html#TextSelectionImplementationNotes">11.12.1. Text selection implementation notes</a></li></ol></li><li><a href="text.html#DOMInterfaces">11.13. DOM interfaces</a><ol class="toc"><li><a href="text.html#InterfaceSVGTextContentElement">11.13.1. Interface SVGTextContentElement</a></li><li><a href="text.html#InterfaceSVGTextPositioningElement">11.13.2. Interface SVGTextPositioningElement</a></li><li><a href="text.html#InterfaceSVGTextElement">11.13.3. Interface SVGTextElement</a></li><li><a href="text.html#InterfaceSVGTSpanElement">11.13.4. Interface SVGTSpanElement</a></li><li><a href="text.html#InterfaceSVGTextPathElement">11.13.5. Interface SVGTextPathElement</a></li></ol></li></ol></li></ol></nav> <h2 id="Introduction" class="heading">11.1. Introduction<a class="self-link" href="#Introduction"></a></h2> Text that is to be rendered as part of an SVG document fragment is specified using the ‘<a href="text.html#TextElement">text</a>’ element. The text within a ‘<a href="text.html#TextElement">text</a>’ element can be rendered: <ul> <li>pre-formatted (with limited line wrapping),</li> <li>auto-wrapped (if a <a href="text.html#TermContentArea">content area</a> is provided),</li> <li>on a path (if a ‘<a href="text.html#TextPathElement">textPath</a>’ element is provided).</li> </ul> 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> and the <a href="text.html#TextLayoutAlgorithm">algorithm</a> for laying out text within a <a href="text.html#TermContentArea">content area</a>. The specialized layout rules corresponding to text that is <a href="text.html#TextLayoutPre">pre-formatted</a>, <a href="text.html#TextLayoutAuto">auto-wrapped</a>, and <a href="text.html#TextLayoutPath">on a path</a> are then addressed in individual sections. 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 resulting 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 render both text in HTML and in SVG. In particular, SVG 2 auto-wrapped text is based on CSS text layout. SVG's ‘<a href="text.html#TextElement">text</a>’ elements are rendered like other graphics elements. Thus, <a href="coords.html">coordinate system transformations</a>, <a href="painting.html">painting</a>, <a href="render.html#ClippingAndMasking">clipping</a> and <a href="render.html#ClippingAndMasking">masking</a> features apply to ‘<a href="text.html#TextElement">text</a>’ elements in the same way as they apply to <a href="shapes.html#TermShapeElement">shapes</a> such as <a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a>. SVG text supports advanced typographic features including: <ul> <li>choice of typeface,</li> <li>use of discretionary, historical, or stylistic ligatures,</li> <li>text decorations (underlining, over-lining, etc.).</li> </ul> SVG text supports international text processing needs such as: <ul> <li>horizontal and vertical orientation of text,</li> <li>left-to-right or bidirectional text (i.e., languages which intermix right-to-left and left-to-right text, such as Arabic and Hebrew),</li> <li> complex text layout where: there is not always a one-to-one correspondence between characters and glyphs, characters may change shape depending on location (e.g. Arabic), and characters may be reordered or combined depending on context (e.g. Devanagari), </li> <li> glyph alignment to different baselines (alphabetic for western scripts, hanging for northern indic scripts, and ideographic for far-eastern scripts). </li> </ul> Multi-language SVG content is possible by <a href="struct.html#SwitchElement">substituting different text strings based on the user's preferred language</a>. The characters to be drawn are expressed as <a href="https://www.w3.org/TR/2008/REC-xml-20081126/#syntax">character data</a> ([<a href="refs.html#ref-xml">xml</a>], section 2.4) inside the ‘<a href="text.html#TextElement">text</a>’ element. As a result: <ul> <li> Text data in SVG content is readily accessible to the visually impaired (see <a href="access.html">Accessibility Support</a>). </li> <li> In many viewing scenarios, the user will be able to search for and select text strings and copy selected text strings to the system clipboard (see <a href="text.html#TextSelection">Text selection and clipboard operations</a>). </li> <li> XML-compatible Web search engines will find text strings in SVG content with no additional effort over what they need to do to find text strings in other XML documents. </li> </ul> For accessibility reasons, it is recommended that text that is included in a document have appropriate semantic markup to indicate its function. For example, a text element that provides a visible label for part of a diagram should have an ‘<a href="struct.html#IDAttribute">id</a>’ that is referenced by an ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a>’ attribute on the relevant group or path element. See <a href="access.html">SVG accessibility guidelines</a> for more information. <h3 id="Definitions" class="heading">11.1.1. Definitions<a class="self-link" href="#Definitions"></a></h3> <dl class="definitions"> <dt><dfn id="TermCharacter" data-dfn-type="dfn" data-export="">character</dfn></dt> <dd> A character is an atomic unit of text as defined in XML [<a href="https://www.w3.org/TR/2008/REC-xml-20081126/">XML</a>]. Essentially, a Unicode code point. A character may be a control instruction (such as a tab, carriage return, or line feed), a renderable mark (letter, digit, punctuation or other symbol), or a modifier (such as a combining accent). </dd> <dt><dfn id="TermAddressableCharacter" data-dfn-type="dfn" data-export="">addressable character</dfn></dt> <dd> A <a href="text.html#TermCharacter">character</a> that is addressable by text positioning attributes and SVG DOM text methods. Characters discarded during layout such as <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">collapsed white space characters</a> are not addressable, neither are characters within an element with a value of none for the <a class="property" href="render.html#VisibilityControl">display</a> property. Addressable characters are addressed by their index. Indexes are determined prior to applying any <a class="property" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">text-transform</a> conversions, as described for the methods in the <a class="idlinterface" href="text.html#InterfaceSVGTextContentElement">SVGTextContentElement</a> interface. There are two methods to map an index to a character; the choice of which to use depends on purpose: <ol> <li> For the purposes of mapping text positioning attributes, the index is measured in Unicode code points (thus a 'u' followed by the combining diaeresis ' ̈' is counted as two characters while the precomposed character 'ü' is counted as one character). </li> <li> For the purposes of SVG DOM text methods, the index is measured in UTF-16 code units (thus, a single Unicode code point above U+FFFF will map to two addressable characters as a UTF-16 code unit consists of 16 bits). </li> </ol> The different methods are backwards compatible with SVG 1.1. The use of UTF-16 code units for SVG DOM text methods is required from the definition of DOMString in the DOM 2 specification. The SVG working group is interested in implementer feedback on the possibility of using grapheme clusters as defined by the Unicode Standard Annex #29 to replace Unicode code points in mapping text positioning attributes. Note, the use of the CSS <a href="text.html#TermTypographicCharacterUnit">typographic character</a> is not appropriate as what constitutes a character can depend on context (line-breaking, word-breaking, etc.). If support for CSS generated-content text is introduced in the future, it would be included in the array of addressable characters. </dd> <dt><dfn id="TermTypographicCharacterUnit">typographic character</dfn></dt> <dd> A unit of a writing system— such as a Latin alphabetic letter (including its diacritics), Hangul syllable, Chinese ideographic character, Myanmar syllable cluster— that is indivisible with respect to a particular typographic operation (line-breaking, first-letter effects, tracking, justification, vertical arrangement, etc.). For the normative definition and the relationship between this and a Unicode grapheme cluster, see <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">CSS Text Module Level 3</a>, ([<a href="refs.html#ref-css-text-3">css-text-3</a>]). </dd> <dt><dfn id="TermFont">font</dfn></dt> <dd> A font represents an organized collection of <a href="text.html#TermGlyph">glyphs</a> in which the various glyph representations will share a particular appearance or styling. </dd> <dt><dfn id="TermGlyph">glyph</dfn></dt> <dd> A glyph represents a unit of rendered content within a <a href="text.html#TermFont">font</a>. Often, there is a one-to-one correspondence between characters to be drawn and corresponding glyphs (e.g., usually the character "A" is rendered using a single glyph), but other times multiple glyphs are used to render a single character (e.g., characters with accents) or a single glyph can be used to render multiple characters (e.g., ligatures). Typically, a glyph is defined by one or more <a href="shapes.html#TermShapeElement">shapes</a> such as a <a href="paths.html">path</a>, possibly with additional information such as rendering hints that help a font engine to produce legible text in small sizes. </dd> <dt><dfn id="TermTextContentElement" data-dfn-type="dfn" data-export="">text content element</dfn></dt> <dd> A text content element is an SVG element that causes a text string to be rendered onto the canvas. The SVG text content elements are: ‘<a href="text.html#TextElement">text</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’ and ‘<a href="text.html#TextElement">tspan</a>’. </dd> <dt><dfn id="TermTextContentChildElement">text content child element</dfn></dt> <dd> A text content child element is a <a href="text.html#TermTextContentElement">text content element</a> that is allowed as a descendant of another <a href="text.html#TermTextContentElement">text content element</a>. In SVG the text content child elements are: ‘<a href="text.html#TextPathElement">textPath</a>’ and ‘<a href="text.html#TextElement">tspan</a>’. </dd> <dt><dfn id="TermTextContentBlockElement">text content block element</dfn></dt> <dd> A text content block element is a <a href="text.html#TermTextContentElement">text content element</a> that serves as a standalone element for a unit of text, and which may optionally contain certain child <a href="text.html#TermTextContentElement">text content elements</a> (e.g. <a href="text.html#TextElement">‘tspan’</a>).  SVG 2 defines a single text content block element: ‘<a href="text.html#TextElement">text</a>’. </dd> <dt><dfn id="TermContentArea">content area</dfn></dt> <dd> The area in which the text is normally laid out. This is equivalent to the <a href="https://www.w3.org/TR/css3-exclusions/#content-area">CSS content area</a>. The actual region where text layout occurs may be smaller due to padding and/or exclusions.  </dd> <dt><dfn id="TermWrappingContext">wrapping context</dfn></dt> <dd> One or more regions (shapes) to be excluded from the content area during text layout. This is the same as the <a href="https://www.w3.org/TR/css3-exclusions/#wrapping-context"> CSS wrapping context</a>. </dd> <dt><dfn id="TermWrappingArea">wrapping area</dfn></dt> <dd> The area in which the text is laid out after subtracting any padding or exclude areas (<a href="text.html#TermWrappingContext">wrapping context</a>). This is the same as the <a href="https://www.w3.org/TR/css3-exclusions/#wrapping-area"> CSS wrapping area</a>. </dd> <dt><dfn id="TermLineBox">line box</dfn></dt> <dd> The rectangular area containing all the content used to layout a single line of text. This is the same as the <a href="https://www.w3.org/TR/CSS2/visuren.html#line-box">CSS line box</a>. Although various CSS 3 text layout specs use the term, none current establish a formal definition. The link is therefore to CSS 2.1, and <a href="https://github.com/w3c/csswg-drafts/issues/363">an issue has been filed with CSS WG</a>. </dd>  <dt><dfn id="TermInlineBaseDirection">inline-base direction</dfn></dt> <dd> The primary direction in which content is ordered within a line or part of a line of text. It defines the <q>start</q> and <q>end</q> sides of a line or part of a line of text (relevant, for example to how the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property is applied). It is determined by the <a class="property" href="text.html#DirectionProperty">direction</a> property. (Note: the ordering of characters in a line of text is primary controlled by the Unicode bidi algorithm and not the inline-base direction.) </dd> <dt><dfn id="TermBlockFlowDirection">block-flow direction</dfn></dt> <dd> The direction in which <a href="text.html#TermLineBox">line boxes</a> are stacked. It is determined by the <a class="property" href="text.html#WritingModeProperty">writing-mode</a> property. </dd> <dt><dfn id="TermAlignmentPoint">alignment point</dfn></dt> <dd> The point on a typographic character that should be aligned with the <a href="text.html#TermCurrentTextPosition">current text position</a>. It is determined by the glyph cell metrics and may depend on the script and <a href="text.html#TermInlineBaseDirection">inline-base direction</a>. </dd> <dt><dfn id="TermCurrentTextPosition">current text position</dfn></dt> <dd> The point in the current user space where the <a href="text.html#TermAlignmentPoint">alignment point</a> of the next typographic character to be rendered should be placed. </dd> <dt><dfn id="TermTextChunk">text chunk</dfn></dt> <dd> An independent block of text in which all characters are positioned together. Each new absolute positioning adjustment (due to an ‘<a href="text.html#TextElementXAttribute">x</a>’ or ‘<a href="text.html#TextElementYAttribute">y</a>’ attribute, or forced line break) creates a new <a href="text.html#TermTextChunk">text chunk</a>. Ligature substitution and bidi-reordering only occur within a <a href="text.html#TermTextChunk">text chunk</a>. <a href="text.html#TermTextChunk">Text chunks</a> are only relevant to pre-formatted text. </dd> <dt><dfn id="TermWhiteSpaceCharacter">white space characters</dfn></dt> <dd>The following characters are considered white space characters: U+0009 CHARACTER TABULATION, U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), U+000A LINE FEED (LF) and U+0020 SPACE. </dd> </dl> <h3 id="FontsGlyphs" class="heading">11.1.2. Fonts and glyphs<a class="self-link" href="#FontsGlyphs"></a></h3> A font consists of a collection of glyphs together with other information (collectively, the font tables) necessary to use those glyphs to present characters on some visual medium. The combination of the collection of glyphs and the font tables is called the font data. A font may supply substitution and positioning tables that can be used by a formatter (text shaper) to re-order, combine and position a sequence of glyphs to form one or more composite glyphs. The combining 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. The tables may be language dependent, allowing the use of language appropriate letter forms. When a glyph, simple or composite, represents an indivisible unit for typesetting purposes, it is know as a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. Ligatures are an important feature of advance text layout. Some ligatures are discretionary while others (e.g. in Arabic) are required. The following explicit rules apply to ligature formation: <ul> <li> Ligature formation should not be enabled when characters are in different DOM text nodes; thus, characters separated by markup should not use ligatures. </li> <li> Ligature formation should not be enabled when characters are in different <a href="text.html#TermTextChunk">text chunks</a>. </li> <li> Discretionary ligatures should not be used when the spacing between two characters is not the same as the default space (e.g. when <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> has a non-default value, or <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a> has a value of justify and <a class="property" href="https://www.w3.org/TR/css-text-3/#text-justify-property">text-justify</a> has a value of distribute). (See <a href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">CSS Text Module Level 3</a>, ([<a href="refs.html#ref-css-text-3">css-text-3</a>]). SVG attributes such as ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’, and ‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’ (in ‘<a href="text.html#TextPathElement">textPath</a>’) that may reposition <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> do not break discretionary ligatures. If discretionary ligatures are not desired they can be turned off by using the <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop">font-variant-ligatures</a> property. For OpenType fonts, discretionary ligatures include those enabled by the liga, clig, dlig, hlig, and cala features; required ligatures are found in the rlig feature. </li> </ul> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Include explicit support for Web Open Font Format (WOFF).</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/03/01-svg-minutes.html#item03">We will mandate WOFF support in SVG 2.</a></td> </tr> <tr> <th>Purpose:</th> <td>To allow access to full OpenType features for internationalization and advanced typography.</td> </tr> <tr> <th>Owner:</th> <td>Chris (no action)</td> </tr> <tr> <th>Status:</th> <td>Done</td> </tr> </table> </div> Proper text rendering may depend on using the same font as used during authoring. For this reason SVG requires support for downloadable fonts as defined in the <a href="https://www.w3.org/TR/css-fonts-3/#font-resources">Font Resources</a> section of the <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module</a>. In particular, support for the Web Open Font Format [<a href="refs.html#ref-woff">WOFF</a>] is required. New in SVG 2, WOFF allows authors to provide the fonts needed to properly render their content. This includes ensuring that the fonts have the proper OpenType tables to support complex scripts, discretionary ligatures, swashes, old-style numbers, and so on. WOFF also allows the fonts to be compressed, subsetted, and include licensing information. <h3 id="GlyphsMetrics" class="heading">11.1.3. Glyph metrics and layout<a class="self-link" href="#GlyphsMetrics"></a></h3> Glyph selection and positioning is normally handled according to the rules of CSS. In some cases, however, the final layout of text in SVG requires knowledge of the geometry properties of individual glyphs. 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 design space. This space is given a geometric coordinates by sub-dividing the EM into a number of units per em. Units per em is a font characteristic. A typical value for units per em is 1000 or 2048. The coordinate space of the EM box is called the design space coordinate system. For scalable fonts, the curves and lines that are used to draw a glyph are represented using this coordinate system. 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. The descenders on lowercase roman letters have negative coordinate values. <div class="figure"> <img class="bordered" src="images/text/font_embox.svg" alt="An 'M' inside an EM box showing the coordinate system, baseline, ascent and descent."/> An 'M' inside an Em box (blue square). The 'M' sits on the baseline (blue line). The origin of the coordinate system is shown by the small black circle. </div> 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. Within an OpenType font ([<a href="refs.html#ref-opentype">OPENTYPE</a>]), 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. Glyphs are positioned relative to a particular point on each glyph known as the <a href="text.html#TermAlignmentPoint">alignment point</a>. For horizontal writing-modes, the glyphs' <a href="text.html#TermAlignmentPoint">alignment points</a> are vertically aligned while for vertical writing-modes, they are horizontally aligned. The position of the <a href="text.html#TermAlignmentPoint">alignment point</a> depends on the script. For example, Western glyphs are aligned at the bottom of 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 <a href="text.html#TermInlineBaseDirection">inline-base direction</a>, a geometric line called a <dfn id="TermBaseline" data-dfn-type="dfn" data-export="">baseline</dfn>. 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. <div class="figure"> <img class="bordered" src="images/text/font_baseline.svg" alt="Baseline example in three different scripts."/> Example baselines (red lines) in three different scripts. From left to right: alphabetic, hanging, ideographic. The EM box is shown in blue for the ideographic script. </div> As glyphs are sequentially placed along a baseline, the <a href="text.html#TermAlignmentPoint">alignment point</a> of a glyph is typically positioned at the <a href="text.html#TermCurrentTextPosition">current text position</a> (some properties such as <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> may alter the positioning). After each glyph is placed, the <a href="text.html#TermCurrentTextPosition">current text position</a> is advanced by the glyph's advance value (typically the width for horizontal text or height for vertical text) with any correction for kerning or other spacing adjustment as well as for new lines in pre-formatted or auto-wrapped text. The initial and final current text positions are used for alignment (e.g. when the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> value is either 'middle' or 'end'). The glyph's advance is needed when placing text along a path. <div class="figure"> <img class="bordered" src="images/text/font_metrics.svg" alt="Baseline example in three different scripts."/> Example of font metrics. The blue boxes show the geometric boxes for the three glyphs. The labeled small circles show the <a href="text.html#TermCurrentTextPosition">current text position</a> before glyph placement. The small square shows the final <a href="text.html#TermCurrentTextPosition">current text position</a> after placing the last glyph. Note that the left side of the 'a' glyph's box is not aligned with the right side of the 'V' glyph's box due to kerning. </div> If a glyph does not provide explicit advance values corresponding to the current glyph orientation, then an appropriate approximation should be used. For vertical text, a suggested approximation is the em size. The initial <a href="text.html#TermCurrentTextPosition">current text position</a> is established by the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes on the ‘<a href="text.html#TextElement">text</a>’ element or first rendered ‘<a href="text.html#TextElement">tspan</a>’ element for pre-formatted text, or auto-wrapped text when the <a href="text.html#TermContentArea">content area</a> is determined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property. For other auto-wrapped text, the initial <a href="text.html#TermCurrentTextPosition">current text position</a> is determined by the position of the first rendered glyph after applying the CSS line wrapping algorithm. A <dfn id="TermBaselineTable" data-dfn-type="dfn" data-export="">baseline-table</dfn> 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. Some fonts may not have values for the baseline tables. Heuristics are suggested for approximating the baseline tables in <a href="https://www.w3.org/TR/css-inline-3/#baseline-synthesis-fonts">CSS Inline Layout Module Level 3</a> [css-inline-3] when a given font does not supply baseline tables. When a different font (or change in font size) is specified in the middle of a run of text, the <dfn id="TermDominantBaseline" data-dfn-type="dfn" data-export="">dominant baseline</dfn> determines the baseline used to align glyphs in the new font (new size) to those in the previous font. The <a class="property" href="text.html#DominantBaselineProperty">dominant-baseline</a> property is used to set the dominant baseline. Alignment between an object relative to its parent is determined by the <dfn id="TermAlignmentBaseline" data-dfn-type="dfn" data-export="">alignment baseline</dfn>. It is normally the same baseline as the dominant baseline but by using the shorthand <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> property (preferred) or the longhand <a class="property" href="text.html#AlignmentBaselineProperty">alignment-baseline</a> another baseline can be chosen. The dominant baseline can be temporarily shifted (as needed for superscripts or subscripts) by using either the shorthand <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> property (preferred) or the longhand <a class="property" href="text.html#BaselineShiftProperty">baseline-shift</a> property. Note that shifts can be nested, each shift added to the previous shift. <div class="figure"> <img class="bordered" src="images/text/vertical_align.svg" alt="Examples of using the 'vertical-align' property. Left shows '[[z]]' where the inner brackets are smaller. Right shows 'x2' where the '2' is a superscript."/> Examples of using the 'vertical-align' property. Left: 'vertical-align:mathematical' ('alignment-baseline:mathematical') is applied to the ‘<a href="text.html#TextElement">tspan</a>’ containing '[z]'. The light-blue line shows the position of the mathematical baseline. Right: 'vertical-align:super' ('baseline-shift:super') applied to the ‘<a href="text.html#TextElement">tspan</a>’ containing '2'. The light-blue lines indicate the shift in baseline. </div> 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 <a href="text.html#TermInlineBaseDirection">inline-base direction</a> position of the alignment point is on the start-edge of the glyph. Additional information on baselines can be found in the <a href="https://www.w3.org/TR/css-inline-3/#line-height">CSS Inline Layout Module Level 3</a> specification. [<a href="refs.html#ref-css-inline-3">css-inline-3</a>] (Also see: <a href="https://www.w3.org/TR/css3-writing-modes/#intro-baselines">CSS Writing Modes Level 3</a> specification. [<a href="refs.html#ref-css-writing-modes-3">css-writing-modes-3</a>]) <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> <tr> <th>Status:</th> <td>Done</td> </tr> </table> </div> A single line of text is laid out inside a <a href="text.html#TermLineBox">line box</a>. Multi-line text is produced by stacking these boxes. The height of a <a href="text.html#TermLineBox">line box</a> is determined by finding the maximum ascent and the maximum descent of all the glyphs in a line of text after applying the effect of the <a class="property" href="text.html#LineHeightProperty">line-height</a> property. The width of a <a href="text.html#TermLineBox">line box</a> is normally the width of the containing text block. In SVG, when the containing text block does not have a fixed geometry (as with pre-formatted text), the <a href="text.html#TermLineBox">line box</a> tightly wraps the glyph boxes within the box. <div class="figure"> <img class="bordered" src="images/text/line_box.svg" alt="The sentence 'A big word.' where 'big' is in a larger font."/> Example of determining the height of a <a href="text.html#TermLineBox">line box</a>. First each glyph box (small light-blue boxes) is extended vertically above and below according to the <a class="property" href="text.html#LineHeightProperty">line-height</a> property. In this case the <a class="property" href="text.html#LineHeightProperty">line-height</a> property is 125%. The larger glyphs have a <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">font-size</a> of 96px so their extra height is 24px (25% of 96px). The extra height is evenly divided above and below resulting in the red boxes. (For clarity, all glyphs in the same inline element have been grouped together). The final <a href="text.html#TermLineBox">line box</a> (large light-blue box) is then found using the maximum extents of the red boxes above and below the baseline. </div> In order to support various international writing systems, <a href="text.html#TermLineBox">line boxes</a> may be orientated in a horizontal or vertical direction. Text within a vertical <a href="text.html#TermLineBox">line box</a> flows from top to bottom. Text within a horizontal <a href="text.html#TermLineBox">line box</a> may flow left-to-right (e.g., modern Latin scripts), right-to-left (e.g., Hebrew or Arabic), or a mixture of left-to-right and right-to-left (bidirectional text). The processing model for bidirectional text is as follows: <ul> <li> The user agent processes the characters which are provided in logical order (i.e., the order the characters appear in the original document). </li> <li> The user agent excludes non-rendered elements and <a href="#WhiteSpace">collapses white space</a>. </li> <li> The user agent determines the set of independent blocks within each of which it should apply the Unicode bidirectional algorithm. <ul> <li> Each <a href="text.html#TermTextChunk">text chunk</a> represents an independent block of text. </li> <li> Any change in glyph orientation due to processing of the <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a> or obsoleted <a class="property" href="text.html#GlyphOrientationVerticalProperty">glyph-orientation-vertical</a> properties will start a new independent blocks of text for bi-directional purposes. </li> </ul> </li> <li> After processing the Unicode bidirectional algorithm and properties <a class="property" href="text.html#DirectionProperty">direction</a> and <a class="property" href="https://www.w3.org/TR/css-writing-modes-3/#unicode-bidi">unicode-bidi</a> on each of the independent text blocks, the user agent will have a potentially re-ordered list of characters which are now in left-to-right rendering order. Simultaneous with re-ordering of the characters, the ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes on the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements are also re-ordered to maintain the original correspondence between characters and attribute values. </li> </ul> While kerning or ligature processing might be font-specific, the preferred model is that kerning and ligature processing occurs between combinations of characters or glyphs after the characters have been re-ordered. The orientation of <a href="text.html#TermLineBox">line boxes</a> as well as the direction in which they are stacked (<a href="text.html#TermBlockFlowDirection">block-flow direction</a>) is determined by the <a class="property" href="text.html#WritingModeProperty">writing-mode</a> property. For horizontal text (<a class="property" href="text.html#WritingModeProperty">writing-mode</a> value horizontal-tb) <a href="text.html#TermLineBox">line boxes</a> are stacked from top to bottom. For vertical text, <a href="text.html#TermLineBox">line boxes</a> are stacked from right-to-left (<a class="property" href="text.html#WritingModeProperty">writing-mode</a> value vertical-rl) or left-to-right (<a class="property" href="text.html#WritingModeProperty">writing-mode</a> value vertical-lr). <h2 id="TextElement" class="heading">11.2. The ‘text’ and ‘tspan’ elements<a class="self-link" href="#TextElement"></a></h2> The ‘<a href="text.html#TextElement">text</a>’ element defines a graphics element consisting of text. The ‘<a href="text.html#TextElement">tspan</a>’ element within a ‘<a href="text.html#TextElement">text</a>’ or another ‘<a href="text.html#TextElement">tspan</a>’ element, allows one to switch the style and/or adjust the position of the rendered text inside the ‘<a href="text.html#TextElement">tspan</a>’ element relative to the parent element. The character data within the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements, along with relevant attributes and properties, and character-to-glyph mapping tables within the font itself, define the glyphs to be rendered. The attributes and properties on the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements indicate such things as the writing direction, font specification, and painting attributes which describe how exactly to render the characters. Subsequent sections of this chapter describe the relevant text-specific attributes and properties. Since ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements are rendered using the same rendering methods as other graphics elements, all of the same <a href="painting.html">painting</a> features that apply to <a href="shapes.html#TermShapeElement">shapes</a> such as <a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a> also apply to ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements, except for <a href="painting.html#Markers">markers</a>. In addition, <a href="coords.html">coordinate system transformations</a>, <a href="render.html#ClippingAndMasking">clipping</a>, and <a href="render.html#ClippingAndMasking">masking</a> can be applied to the ‘<a href="text.html#TextElement">text</a>’ element as a whole. In CSS terms, the ‘<a href="text.html#TextElement">text</a>’ element acts as a block element. The ‘<a href="text.html#TextElement">tspan</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’, and ‘<a href="linking.html#AElement">a</a>’ elements that are descended from <a href="text.html#TermTextContentElement">text content elements</a> act as inline elements. It is possible to apply a gradient, pattern, clipping path, mask or filter to text. When one of these facilities is applied to text and keyword 'objectBoundingBox' is used (see <a href="coords.html#ObjectBoundingBox">Object bounding box units</a>) to specify a graphical effect relative to the "object bounding box", then the object bounding box units are computed relative to the entire ‘<a href="text.html#TextElement">text</a>’ element in all cases, even when different effects are applied to different ‘<a href="text.html#TextElement">tspan</a>’ or ‘<a href="text.html#TextPathElement">textPath</a>’ elements within the same ‘<a href="text.html#TextElement">text</a>’ element. The ‘<a href="text.html#TextElement">text</a>’ element renders its first glyph (after bidirectionality reordering) at the initial <a href="text.html#TermCurrentTextPosition">current text position</a> (with possible adjustments due to the value of the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property or the <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a> property). For pre-formatted text and for auto-wrapped text where the <a href="text.html#TermContentArea">content area</a> is determined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, the initial <a href="text.html#TermCurrentTextPosition">current text position</a> is determined by the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ values of the ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element which contains the first rendered character. For auto-wrapped text in a shape or text on a path see the <a href="text.html#TextLayoutAuto">Auto-wrapped text</a> or <a href="text.html#TextLayoutPath">Text on a path</a> sections, respectively, to determine the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. After the glyph(s) corresponding to the given character is (are) rendered, the current text position is updated for the next character. In the simplest case, the new current text position is the previous current text position plus the glyphs' advance value (horizontal or vertical). See <a href="text.html#TextLayoutAlgorithm">text layout</a> for a description of glyph placement and glyph advance. <div class="example"> The text string <q>Hello, out there!</q> is rendered onto the canvas using the Verdana font family with the glyphs filled with the color blue. <pre><?xml version="1.0" standalone="no"?> <svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="250" y="180" font-family="Verdana" font-size="64" fill="blue" > Hello, out there! </text> </svg></pre> <div class="figure"> <img class="bordered" src="images/text/text01.svg" alt="Image showing the blue text."/> </div> </div> <div class="example"> A ‘<a href="text.html#TextElement">tspan</a>’ is used to change the styling of the word <q>not</q>. <pre><?xml version="1.0" standalone="no"?> <svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g font-family="Verdana" font-size="64" > <text x="160" y="180" fill="blue" > You are <tspan font-weight="bold" fill="red" >not</tspan> a banana. </text> </g> </svg></pre> <div class="figure"> <img class="bordered" src="images/text/tspan01.svg" alt="Blue text except the word 'not' is red."/> </div> </div> <div class="example"> Two ‘<a href="text.html#TextElement">tspan</a>’ elements are repositioned horizontally and vertically using the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes. Because all the text is within a single ‘<a href="text.html#TextElement">text</a>’ element, a user will be able to select through all the text and copy it to the system clipboard in user agents that support <a href="text.html#TextSelection">text selection and clipboard operations</a>. <pre><?xml version="1.0" standalone="no"?> <svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <g font-family="Verdana" font-size="64" > <text x="100" y="180" fill="blue" > But you <tspan dx="2em" dy="-50" font-weight="bold" fill="red" > are </tspan> <tspan dy="100"> a peach! </tspan> </text> </g> </svg></pre> <div class="figure"> <img class="bordered" src="images/text/tspan02.svg" alt="A sentence with several shifted words."/> </div> </div> <div class="element-summary"><div class="element-summary-name">‘<dfn data-dfn-type="element" data-export="" id="elementdef-text">text</dfn>’</div><dl><dt>Categories:</dt><dd><a href="struct.html#TermGraphicsElement">Graphics element</a>, <a href="render.html#TermRenderableElement">renderable element</a>, <a href="text.html#TermTextContentElement">text content element</a></dd><dt>Content model:</dt><dd>Any number of the following elements or character data, in any order:<ul class="no-bullets"><li><a href="https://svgwg.org/specs/animations/#TermAnimationElement">animation elements</a> — ‘<a href="https://svgwg.org/specs/animations/#AnimateElement">animate</a>’, ‘<a href="https://svgwg.org/specs/animations/#AnimateMotionElement">animateMotion</a>’, ‘<a href="https://svgwg.org/specs/animations/#AnimateTransformElement">animateTransform</a>’, ‘<a href="https://svgwg.org/specs/animations/#DiscardElement">discard</a>’, ‘<a href="https://svgwg.org/specs/animations/#SetElement">set</a>’</li><li><a href="struct.html#TermDescriptiveElement">descriptive elements</a> — ‘<a href="struct.html#DescElement">desc</a>’, ‘<a href="struct.html#TitleElement">title</a>’, ‘<a href="struct.html#MetadataElement">metadata</a>’</li><li><a href="painting.html#TermPaintServerElement">paint server elements</a> — ‘<a href="pservers.html#LinearGradientElement">linearGradient</a>’, ‘<a href="pservers.html#RadialGradientElement">radialGradient</a>’, ‘<a href="pservers.html#PatternElement">pattern</a>’</li><li><a href="text.html#TermTextContentChildElement">text content child elements</a> — ‘<a href="text.html#TextElement">tspan</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’</li></ul><a href="linking.html#AElement">a</a>, <a href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement">clipPath</a>, <a href="painting.html#MarkerElement">marker</a>, <a href="https://drafts.fxtf.org/css-masking-1/#MaskElement">mask</a>, <a href="interact.html#ScriptElement">script</a>, <a href="styling.html#StyleElement">style</a></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="struct.html#TermARIAAttribute">aria attributes</a> — ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant">aria-activedescendant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete">aria-autocomplete</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy">aria-busy</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-checked">aria-checked</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colcount">aria-colcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colindex">aria-colindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colspan">aria-colspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-controls">aria-controls</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current">aria-current</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-dropeffect">aria-dropeffect</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage">aria-errormessage</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-flowto">aria-flowto</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-grabbed">aria-grabbed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid">aria-invalid</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-level">aria-level</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-modal">aria-modal</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiline">aria-multiline</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable">aria-multiselectable</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-orientation">aria-orientation</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-owns">aria-owns</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-placeholder">aria-placeholder</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-readonly">aria-readonly</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription">aria-roledescription</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowcount">aria-rowcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex">aria-rowindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowspan">aria-rowspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-sort">aria-sort</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">aria-valuenow</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext">aria-valuetext</a>’, ‘<a href="struct.html#RoleAttribute">role</a>’</li><li><a href="struct.html#TermConditionalProcessingAttribute">conditional processing attributes</a> — ‘<a href="struct.html#RequiredExtensionsAttribute">requiredExtensions</a>’, ‘<a href="struct.html#SystemLanguageAttribute">systemLanguage</a>’</li><li><a href="struct.html#TermCoreAttribute">core attributes</a> — ‘<a href="struct.html#IDAttribute">id</a>’, ‘<a href="struct.html#SVGElementTabindexAttribute">tabindex</a>’, ‘<a href="struct.html#SVGElementAutofocusAttribute">autofocus</a>’, ‘<a href="struct.html#LangAttribute">lang</a>’, ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’, ‘<a href="styling.html#ClassAttribute">class</a>’, ‘<a href="styling.html#StyleAttribute">style</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers">global event attributes</a> — ‘<a href="interact.html#EventAttributes">oncancel</a>’, ‘<a href="interact.html#EventAttributes">oncanplay</a>’, ‘<a href="interact.html#EventAttributes">oncanplaythrough</a>’, ‘<a href="interact.html#EventAttributes">onchange</a>’, ‘<a href="interact.html#EventAttributes">onclick</a>’, ‘<a href="interact.html#EventAttributes">onclose</a>’, ‘<a href="interact.html#EventAttributes">oncuechange</a>’, ‘<a href="interact.html#EventAttributes">ondblclick</a>’, ‘<a href="interact.html#EventAttributes">ondrag</a>’, ‘<a href="interact.html#EventAttributes">ondragend</a>’, ‘<a href="interact.html#EventAttributes">ondragenter</a>’, ‘<a href="interact.html#EventAttributes">ondragexit</a>’, ‘<a href="interact.html#EventAttributes">ondragleave</a>’, ‘<a href="interact.html#EventAttributes">ondragover</a>’, ‘<a href="interact.html#EventAttributes">ondragstart</a>’, ‘<a href="interact.html#EventAttributes">ondrop</a>’, ‘<a href="interact.html#EventAttributes">ondurationchange</a>’, ‘<a href="interact.html#EventAttributes">onemptied</a>’, ‘<a href="interact.html#EventAttributes">onended</a>’, ‘<a href="interact.html#EventAttributes">onerror</a>’, ‘<a href="interact.html#EventAttributes">onfocus</a>’, ‘<a href="interact.html#EventAttributes">oninput</a>’, ‘<a href="interact.html#EventAttributes">oninvalid</a>’, ‘<a href="interact.html#EventAttributes">onkeydown</a>’, ‘<a href="interact.html#EventAttributes">onkeypress</a>’, ‘<a href="interact.html#EventAttributes">onkeyup</a>’, ‘<a href="interact.html#EventAttributes">onload</a>’, ‘<a href="interact.html#EventAttributes">onloadeddata</a>’, ‘<a href="interact.html#EventAttributes">onloadedmetadata</a>’, ‘<a href="interact.html#EventAttributes">onloadstart</a>’, ‘<a href="interact.html#EventAttributes">onmousedown</a>’, ‘<a href="interact.html#EventAttributes">onmouseenter</a>’, ‘<a href="interact.html#EventAttributes">onmouseleave</a>’, ‘<a href="interact.html#EventAttributes">onmousemove</a>’, ‘<a href="interact.html#EventAttributes">onmouseout</a>’, ‘<a href="interact.html#EventAttributes">onmouseover</a>’, ‘<a href="interact.html#EventAttributes">onmouseup</a>’, ‘<a href="interact.html#EventAttributes">onpause</a>’, ‘<a href="interact.html#EventAttributes">onplay</a>’, ‘<a href="interact.html#EventAttributes">onplaying</a>’, ‘<a href="interact.html#EventAttributes">onprogress</a>’, ‘<a href="interact.html#EventAttributes">onratechange</a>’, ‘<a href="interact.html#EventAttributes">onreset</a>’, ‘<a href="interact.html#EventAttributes">onresize</a>’, ‘<a href="interact.html#EventAttributes">onscroll</a>’, ‘<a href="interact.html#EventAttributes">onseeked</a>’, ‘<a href="interact.html#EventAttributes">onseeking</a>’, ‘<a href="interact.html#EventAttributes">onselect</a>’, ‘<a href="interact.html#EventAttributes">onshow</a>’, ‘<a href="interact.html#EventAttributes">onstalled</a>’, ‘<a href="interact.html#EventAttributes">onsubmit</a>’, ‘<a href="interact.html#EventAttributes">onsuspend</a>’, ‘<a href="interact.html#EventAttributes">ontimeupdate</a>’, ‘<a href="interact.html#EventAttributes">ontoggle</a>’, ‘<a href="interact.html#EventAttributes">onvolumechange</a>’, ‘<a href="interact.html#EventAttributes">onwaiting</a>’, ‘<a href="interact.html#EventAttributes">onwheel</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers">document element event attributes</a> — ‘<a href="interact.html#EventAttributes">oncopy</a>’, ‘<a href="interact.html#EventAttributes">oncut</a>’, ‘<a href="interact.html#EventAttributes">onpaste</a>’</li><li><a href="styling.html#TermPresentationAttribute">presentation attributes</a> — </li><li>‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’</li><li>‘<a href="text.html#TextElementXAttribute">x</a>’</li><li>‘<a href="text.html#TextElementYAttribute">y</a>’</li><li>‘<a href="text.html#TextElementDXAttribute">dx</a>’</li><li>‘<a href="text.html#TextElementDYAttribute">dy</a>’</li><li>‘<a href="text.html#TextElementRotateAttribute">rotate</a>’</li><li>‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’</li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="text.html#InterfaceSVGTextElement">SVGTextElement</a></li></ul></dd></dl></div> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Allow transforms on ‘<a href="text.html#TextElement">tspan</a>’.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/12/01-svg-irc#T21-02-34">SVG 2 will allow transforms on ‘tspan’.</a></td> </tr> <tr> <th>Purpose:</th> <td>Align with other elements such as ‘<a href="linking.html#AElement">a</a>’ which already allow transforms.</td> </tr> <tr> <th>Owner:</th> <td>Cameron (no action)</td> </tr> <tr> <th>Status:</th> <td>Done</td> </tr> </table> This decision was reversed. See <a href="https://github.com/w3c/svgwg/issues/210">GitHub Issue 210</a>. CSS/HTML does not allow transforms on inline elements and no renderer supports transforms on the ‘<a href="linking.html#AElement">a</a>’ element when inline (in both SVG and HTML). </div> <div class="element-summary"><div class="element-summary-name">‘<dfn data-dfn-type="element" data-export="" id="elementdef-tspan">tspan</dfn>’</div><dl><dt>Categories:</dt><dd><a href="struct.html#TermGraphicsElement">Graphics element</a>, <a href="render.html#TermRenderableElement">renderable element</a>, <a href="text.html#TermTextContentElement">text content element</a>, <a href="text.html#TermTextContentChildElement">text content child element</a></dd><dt>Content model:</dt><dd>Any number of the following elements or character data, in any order:<ul class="no-bullets"><li><a href="struct.html#TermDescriptiveElement">descriptive elements</a> — ‘<a href="struct.html#DescElement">desc</a>’, ‘<a href="struct.html#TitleElement">title</a>’, ‘<a href="struct.html#MetadataElement">metadata</a>’</li><li><a href="painting.html#TermPaintServerElement">paint server elements</a> — ‘<a href="pservers.html#LinearGradientElement">linearGradient</a>’, ‘<a href="pservers.html#RadialGradientElement">radialGradient</a>’, ‘<a href="pservers.html#PatternElement">pattern</a>’</li></ul><a href="linking.html#AElement">a</a>, <a href="https://svgwg.org/specs/animations/#AnimateElement">animate</a>, <a href="interact.html#ScriptElement">script</a>, <a href="https://svgwg.org/specs/animations/#SetElement">set</a>, <a href="styling.html#StyleElement">style</a>, <a href="text.html#TextElement">tspan</a></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="struct.html#TermARIAAttribute">aria attributes</a> — ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant">aria-activedescendant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete">aria-autocomplete</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy">aria-busy</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-checked">aria-checked</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colcount">aria-colcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colindex">aria-colindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colspan">aria-colspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-controls">aria-controls</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current">aria-current</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-dropeffect">aria-dropeffect</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage">aria-errormessage</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-flowto">aria-flowto</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-grabbed">aria-grabbed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid">aria-invalid</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-level">aria-level</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-modal">aria-modal</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiline">aria-multiline</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable">aria-multiselectable</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-orientation">aria-orientation</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-owns">aria-owns</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-placeholder">aria-placeholder</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-readonly">aria-readonly</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription">aria-roledescription</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowcount">aria-rowcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex">aria-rowindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowspan">aria-rowspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-sort">aria-sort</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">aria-valuenow</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext">aria-valuetext</a>’, ‘<a href="struct.html#RoleAttribute">role</a>’</li><li><a href="struct.html#TermConditionalProcessingAttribute">conditional processing attributes</a> — ‘<a href="struct.html#RequiredExtensionsAttribute">requiredExtensions</a>’, ‘<a href="struct.html#SystemLanguageAttribute">systemLanguage</a>’</li><li><a href="struct.html#TermCoreAttribute">core attributes</a> — ‘<a href="struct.html#IDAttribute">id</a>’, ‘<a href="struct.html#SVGElementTabindexAttribute">tabindex</a>’, ‘<a href="struct.html#SVGElementAutofocusAttribute">autofocus</a>’, ‘<a href="struct.html#LangAttribute">lang</a>’, ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’, ‘<a href="styling.html#ClassAttribute">class</a>’, ‘<a href="styling.html#StyleAttribute">style</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers">global event attributes</a> — ‘<a href="interact.html#EventAttributes">oncancel</a>’, ‘<a href="interact.html#EventAttributes">oncanplay</a>’, ‘<a href="interact.html#EventAttributes">oncanplaythrough</a>’, ‘<a href="interact.html#EventAttributes">onchange</a>’, ‘<a href="interact.html#EventAttributes">onclick</a>’, ‘<a href="interact.html#EventAttributes">onclose</a>’, ‘<a href="interact.html#EventAttributes">oncuechange</a>’, ‘<a href="interact.html#EventAttributes">ondblclick</a>’, ‘<a href="interact.html#EventAttributes">ondrag</a>’, ‘<a href="interact.html#EventAttributes">ondragend</a>’, ‘<a href="interact.html#EventAttributes">ondragenter</a>’, ‘<a href="interact.html#EventAttributes">ondragexit</a>’, ‘<a href="interact.html#EventAttributes">ondragleave</a>’, ‘<a href="interact.html#EventAttributes">ondragover</a>’, ‘<a href="interact.html#EventAttributes">ondragstart</a>’, ‘<a href="interact.html#EventAttributes">ondrop</a>’, ‘<a href="interact.html#EventAttributes">ondurationchange</a>’, ‘<a href="interact.html#EventAttributes">onemptied</a>’, ‘<a href="interact.html#EventAttributes">onended</a>’, ‘<a href="interact.html#EventAttributes">onerror</a>’, ‘<a href="interact.html#EventAttributes">onfocus</a>’, ‘<a href="interact.html#EventAttributes">oninput</a>’, ‘<a href="interact.html#EventAttributes">oninvalid</a>’, ‘<a href="interact.html#EventAttributes">onkeydown</a>’, ‘<a href="interact.html#EventAttributes">onkeypress</a>’, ‘<a href="interact.html#EventAttributes">onkeyup</a>’, ‘<a href="interact.html#EventAttributes">onload</a>’, ‘<a href="interact.html#EventAttributes">onloadeddata</a>’, ‘<a href="interact.html#EventAttributes">onloadedmetadata</a>’, ‘<a href="interact.html#EventAttributes">onloadstart</a>’, ‘<a href="interact.html#EventAttributes">onmousedown</a>’, ‘<a href="interact.html#EventAttributes">onmouseenter</a>’, ‘<a href="interact.html#EventAttributes">onmouseleave</a>’, ‘<a href="interact.html#EventAttributes">onmousemove</a>’, ‘<a href="interact.html#EventAttributes">onmouseout</a>’, ‘<a href="interact.html#EventAttributes">onmouseover</a>’, ‘<a href="interact.html#EventAttributes">onmouseup</a>’, ‘<a href="interact.html#EventAttributes">onpause</a>’, ‘<a href="interact.html#EventAttributes">onplay</a>’, ‘<a href="interact.html#EventAttributes">onplaying</a>’, ‘<a href="interact.html#EventAttributes">onprogress</a>’, ‘<a href="interact.html#EventAttributes">onratechange</a>’, ‘<a href="interact.html#EventAttributes">onreset</a>’, ‘<a href="interact.html#EventAttributes">onresize</a>’, ‘<a href="interact.html#EventAttributes">onscroll</a>’, ‘<a href="interact.html#EventAttributes">onseeked</a>’, ‘<a href="interact.html#EventAttributes">onseeking</a>’, ‘<a href="interact.html#EventAttributes">onselect</a>’, ‘<a href="interact.html#EventAttributes">onshow</a>’, ‘<a href="interact.html#EventAttributes">onstalled</a>’, ‘<a href="interact.html#EventAttributes">onsubmit</a>’, ‘<a href="interact.html#EventAttributes">onsuspend</a>’, ‘<a href="interact.html#EventAttributes">ontimeupdate</a>’, ‘<a href="interact.html#EventAttributes">ontoggle</a>’, ‘<a href="interact.html#EventAttributes">onvolumechange</a>’, ‘<a href="interact.html#EventAttributes">onwaiting</a>’, ‘<a href="interact.html#EventAttributes">onwheel</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers">document element event attributes</a> — ‘<a href="interact.html#EventAttributes">oncopy</a>’, ‘<a href="interact.html#EventAttributes">oncut</a>’, ‘<a href="interact.html#EventAttributes">onpaste</a>’</li><li><a href="styling.html#TermPresentationAttribute">presentation attributes</a> — </li><li>‘<a href="text.html#TextElementXAttribute">x</a>’</li><li>‘<a href="text.html#TextElementYAttribute">y</a>’</li><li>‘<a href="text.html#TextElementDXAttribute">dx</a>’</li><li>‘<a href="text.html#TextElementDYAttribute">dy</a>’</li><li>‘<a href="text.html#TextElementRotateAttribute">rotate</a>’</li><li>‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’</li><li>‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’</li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="text.html#InterfaceSVGTSpanElement">SVGTSpanElement</a></li></ul></dd></dl></div> <h3 id="TSpanAttributes" class="heading">11.2.1. Attributes<a class="self-link" href="#TSpanAttributes"></a></h3> <dl class="attrdef-list-svg2"> <dt> <table class="attrdef def"> <tr> <th>Name</th> <th>Value</th> <th>Initial value</th> <th>Animatable</th> </tr> <tr> <td><dfn id="TextElementXAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">x</dfn>, <dfn id="TextElementYAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">y</dfn></td> <td>[ [ <a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a> | <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a> ]+ ]#</td> <td>0 for ‘<a href="text.html#TextElement">text</a>’; (none) for ‘<a href="text.html#TextElement">tspan</a>’</td> <td>yes</td> </tr> </table> </dt> <dd> If a single <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a> is provided, then the value represents the new absolute X (Y) coordinate for the <a href="text.html#TermCurrentTextPosition">current text position</a> for rendering the glyphs that correspond to the first character within this element or any of its descendants. If a comma- or space-separated list of <var>n</var> <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s is provided, then the values represent new absolute X (Y) coordinates for the <a href="text.html#TermCurrentTextPosition">current text position</a> for rendering the glyphs corresponding to each of the first <var>n</var> <a href="text.html#TermAddressableCharacter">addressable characters</a> within this element or any of its descendants. If more <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s are provided than characters, then the extra <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s will have no effect on glyph positioning. If more characters exist than <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s, or if the attribute is not specified on a ‘<a href="text.html#TextElement">tspan</a>’, then for each additional character: <ol style="list-style-type: lower-alpha"> <li>if an ancestor ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element specifies an absolute X (Y) coordinate for the given character via an ‘x’ (‘y’) attribute (nearest ancestor has precedence), then that absolute X (Y) coordinate is used as the starting X (Y) coordinate for that character, else </li> <li> the starting X (Y) coordinate for rendering the glyphs corresponding to the given character is the X (Y) coordinate of the resulting <a href="text.html#TermCurrentTextPosition">current text position</a> from the most recently rendered glyph for the current ‘<a href="text.html#TextElement">text</a>’ element. </li> </ol> In SVG 2, the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes are not presentation attributes and cannot be set via CSS. This may change in a future version of SVG. </dd> <dt> <table class="attrdef def"> <tr> <th>Name</th> <th>Value</th> <th>Initial value</th> <th>Animatable</th> </tr> <tr> <td><dfn id="TextElementDXAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">dx</dfn>, <dfn id="TextElementDYAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">dy</dfn></td> <td>[ [ <a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a> | <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a> ]+ ]#</td> <td>(none)</td> <td>yes</td> </tr> </table> </dt> <dd> If a single <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a> is provided, this value represents the new relative X (Y) coordinate for the <a href="text.html#TermCurrentTextPosition">current text position</a> for rendering the glyphs corresponding to the first character within this element or any of its descendants. The <a href="text.html#TermCurrentTextPosition">current text position</a> is shifted along the x-axis (y-axis) of the current user coordinate system by <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a> before the first character's glyphs are rendered. If a comma- or space-separated list of <var>n</var> <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s is provided, then the values represent incremental shifts along the x-axis (y-axis) for the <a href="text.html#TermCurrentTextPosition">current text position</a> before rendering the glyphs corresponding to the first <var>n</var> <a href="text.html#TermAddressableCharacter">addressable characters</a> within this element or any of its descendants. Thus, before the glyphs are rendered corresponding to each character, the <a href="text.html#TermCurrentTextPosition">current text position</a> resulting from drawing the glyphs for the previous character within the current ‘<a href="text.html#TextElement">text</a>’ element is shifted along the x-axis (y-axis) of the current user coordinate system by <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>. If more <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s are provided than characters, then any extra <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s will have no effect on glyph positioning. If more characters exist than <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a>s, or if the attribute is not specified, then for each additional character: <ol style="list-style-type: lower-alpha"> <li> if an ancestor ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element specifies a relative X (Y) coordinate for the given character via a ‘dx’ (‘dy’) attribute (nearest ancestor has precedence), then the <a href="text.html#TermCurrentTextPosition">current text position</a> is shifted along the x-axis (y-axis) of the current user coordinate system by that amount, else </li> <li> no extra shift along the x-axis (y-axis) occurs. </li> </ol> </dd> <dt> <table class="attrdef def"> <tr> <th>Name</th> <th>Value</th> <th>Initial value</th> <th>Animatable</th> </tr> <tr> <td><dfn id="TextElementRotateAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">rotate</dfn></td> <td>[ <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>+ ]#</td> <td>(none)</td> <td>yes (non-additive).</td> </tr> </table> </dt> <dd> The supplemental rotation, in degrees, about the <a href="text.html#TermCurrentTextPosition">current text position</a> that will be applied to all of the glyphs corresponding to each character within this element. If a comma- or space-separated list of <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>s is provided, then the first <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a> represents the supplemental rotation for the glyphs corresponding to the first character within this element or any of its descendants, the second <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a> represents the supplemental rotation for the glyphs that correspond to the second character, and so on. If more <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>s are provided than there are characters, then the extra <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>s will be ignored. If more characters are provided than <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>s, then for each of these extra characters the rotation value specified by the last number must be used. If the attribute is not specified and if an ancestor of a ‘<a href="text.html#TextElement">tspan</a>’ element specifies a supplemental rotation for a given character via a ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute (nearest ancestor has precedence), then the given supplemental rotation is applied to the given character. If there are more characters than <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a>s specified in the ancestor's ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute, then for each of these extra characters the rotation value specified by the last number must be used. This supplemental rotation has no impact on the rules by which <a href="text.html#TermCurrentTextPosition">current text position</a> is modified as glyphs get rendered and is supplemental to any rotation due to <a href="text.html#TextLayoutPath">text on a path</a> and to <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a>, <a class="property" href="text.html#GlyphOrientationHorizontalProperty">glyph-orientation-horizontal</a>, or <a class="property" href="text.html#GlyphOrientationVerticalProperty">glyph-orientation-vertical</a>. </dd> <dt> <table class="attrdef def"> <tr> <th>Name</th> <th>Value</th> <th>Initial value</th> <th>Animatable</th> </tr> <tr> <td><dfn id="TextElementTextLengthAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">textLength</dfn></td> <td><a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a> | <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a></td> <td>See below</td> <td>yes</td> </tr> </table> </dt> <dd> The author's computation of the total sum of all of the advance values that correspond to character data within this element, including the advance value on the glyph (horizontal or vertical), the effect of properties <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> and <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a> and adjustments due to attributes ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ on this ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element or any descendants. This value is used to calibrate the user agent's own calculations with that of the author. The purpose of this attribute is to allow the author to achieve exact alignment, in visual rendering order after any bidirectional reordering, for the first and last rendered glyphs that correspond to this element; thus, for the last rendered character (in visual rendering order after any bidirectional reordering), any supplemental inter-character spacing beyond normal glyph advances are ignored (in most cases) when the user agent determines the appropriate amount to expand/compress the text string to fit within a length of ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’. If attribute ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ is specified on a given element and also specified on an ancestor, the adjustments on all character data within this element are controlled by the value of ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ on this element exclusively, with the possible side-effect that the adjustment ratio for the contents of this element might be different than the adjustment ratio used for other content that shares the same ancestor. The user agent must assume that the total advance values for the other content within that ancestor is the difference between the advance value on that ancestor and the advance value for this element. This attribute is not intended for use to obtain effects such as shrinking or expanding text. A negative value is an error (see <a href="conform.html#ErrorProcessing">Error processing</a>). The ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute is only applied when the <a href="text.html#TermWrappingArea">wrapping area</a> is not defined by the <a class="property" href="text.html#TextShapeInside">shape-inside</a> or the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> properties. It is also not applied for any ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element that has forced line breaks (due to a <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> value of pre or pre-line). If the attribute is not specified anywhere within a ‘<a href="text.html#TextElement">text</a>’ element, the effect is as if the author's computation exactly matched the value calculated by the user agent; thus, no advance adjustments are made. For the purpose of <a href="types.html#TermReflect">reflecting</a> the attribute in the DOM, the <a href="types.html#TermInitialValue">initial value</a> is the current user-agent calculated length, expressed in implicit <a href="coords.html#TermUserUnits">user units</a>. </dd> <dt> <table class="attrdef def"> <tr> <th>Name</th> <th>Value</th> <th>Initial value</th> <th>Animatable</th> </tr> <tr> <td><dfn id="TextElementLengthAdjustAttribute" data-dfn-type="element-attr" data-dfn-for="text" data-export="">lengthAdjust</dfn></td> <td>spacing | spacingAndGlyphs</td> <td>spacing</td> <td>yes</td> </tr> </table> </dt> <dd> <dl class="attrdef-values"> <dt>spacing</dt> <dd> Indicates that only the advance values are adjusted. The glyphs themselves are not stretched or compressed. </dd> <dt>spacingAndGlyphs</dt> <dd> Indicates that the advance values are adjusted and the glyphs themselves stretched or compressed in one axis (i.e., a direction parallel to the <a href="text.html#TermInlineBaseDirection">inline-base direction</a>). </dd> </dl> The user agent is required to achieve correct start and end positions for the text strings, but the locations of intermediate glyphs are not predictable because user agents might employ advanced algorithms to stretch or compress text strings in order to balance correct start and end positioning with optimal typography. Note that, for a text string that contains <var>n</var> characters, the adjustments to the advance values often occur only for <var>n</var>−1 characters (see description of attribute ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’), whereas stretching or compressing of the glyphs will be applied to all <var>n</var> characters. </dd> </dl> <h3 id="TSpanNotes" class="heading">11.2.2. Notes on 'x', 'y', 'dx', 'dy' and 'rotate'<a class="self-link" href="#TSpanNotes"></a></h3> The ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ on the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements are useful in high-end typography scenarios where individual glyphs require exact placement. These attributes are useful for minor positioning adjustments between characters or for major positioning adjustments, such as moving a section of text to a new location to achieve the visual effect of a new line of text (compatible with SVG 1.1). Note that the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes are ignored for auto-wrapped text (except for the initial <a href="text.html#TermCurrentTextPosition">current text position</a> when the <a href="text.html#TermContentArea">content area</a> is specified by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property). <a class="self-link" href="#issue2"></a> It was decided at the 2015 Sydney F2F that 'dx', 'dy', and 'rotate' would be ignored for auto-wrapped text. (Technically, it is not difficult to apply them but it was not seen as being really useful.) In situations where micro-level positioning adjustment are necessary for advanced typographic control, the SVG content designer needs to ensure that the necessary font will be available for all viewers of the document (e.g., package up the necessary font data in the form of an SVG font or an alternative WebFont format which is stored at the same Web site as the SVG content) and that the viewing software will process the font in the expected way (the capabilities, characteristics and font layout mechanisms vary greatly from system to system). If the SVG content contains ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, or ‘<a href="text.html#TextElementDYAttribute">dy</a>’ attribute values which are meant to correspond to a particular font processed by a particular set of viewing software and either of these requirements is not met, then the text might display with poor quality. The following additional rules apply to attributes ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ when they contain a list of numbers: <ul> <li> When a single character maps to a single glyph – In this case, the <var>n</var>-th value for the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes is applied to the glyph that corresponds to the <var>n</var>-th character. </li> <li> When a single character maps to multiple glyphs (e.g., when an accent glyph is placed on top of a base glyph) – In this case, the <var>n</var>-th value for the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ values are applied (i.e., the <a href="text.html#TermCurrentTextPosition">current text position</a> is adjusted) before rendering the first glyph. The rotation transformation corresponding to the <var>n</var>-th ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is applied to the glyphs and to the inter-glyph advance values corresponding to this character on a group basis (i.e., the rotation value creates a temporary new rotated coordinate system, and the glyphs corresponding to the character are rendered into this rotated coordinate system). </li> <li> When multiple characters map to a single glyph (e.g., when a ligature is used) – Suppose that the <var>n</var>-th and (<var>n</var>+1)-th characters map to a single glyph. In this case, the <var>n</var>-th value for the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes all apply when rendering the glyph. The (<var>n</var>+1)-th values, however, for ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ are ignored (exception: the final ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value in the list would still apply to subsequent characters), whereas the ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ are applied to the subsequent character (i.e., the (<var>n</var>+2)-th character), if one exists, by translating the <a href="text.html#TermCurrentTextPosition">current text position</a> by the given amounts before rendering the first glyph associated with that character. </li> <li> When there is a many-to-many mapping of characters to glyphs (e.g., when three characters map to two glyphs, such as when the first glyph expresses the first character and half of the second character, and the second glyph expresses the other half of the second character plus the third character) – Suppose that the <var>n</var>-th, (<var>n</var>+1)-th and (<var>n</var>+2)-th characters map to two glyphs. In this case, the <var>n</var>-th value for the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ values are applied (i.e., the <a href="text.html#TermCurrentTextPosition">current text position</a> is adjusted) before rendering the first glyph. The rotation transformation corresponding to the <var>n</var>-th ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is applied to both the two glyphs and the glyph advance values for the first glyph on a group basis (i.e., the rotation value creates a temporary new rotated coordinate system, and the two glyphs are rendered into the temporary rotated coordinate system). The (<var>n</var>+1)-th and (<var>n</var>+2)-th values, however, for the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes are not applied (exception: the final ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value in the list would still apply to subsequent characters), whereas the (<var>n</var>+1)-th and (<var>n</var>+2)-th values for the ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ attributes are applied to the subsequent character (i.e., the (<var>n</var>+3)-th character), if one exists, by translating the <a href="text.html#TermCurrentTextPosition">current text position</a> by the given amounts before rendering the first glyph associated with that character. </li> <li> Relationship to bidirectionality – Text is laid out in a two-step process, where any bidirectional text is first re-ordered into a left-to-right string, and then text layout occurs with the re-ordered text string. Whenever the character data within a ‘<a href="text.html#TextElement">tspan</a>’ element is re-ordered, the corresponding elements within the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ are also re-ordered to maintain the correspondence. For example, suppose that there is the following ‘<a href="text.html#TextElement">tspan</a>’ element: <div style="margin-left: 2em"><code><tspan dx="11 12 13 14 15 0 21 22 23 0 31 32 33 34 35 36">Latin and Hebrew</tspan></code></div> and that the word "Hebrew" will be drawn right-to-left. First, the character data and the corresponding values in the ‘<a href="text.html#TextElementDXAttribute">dx</a>’ list will be reordered, such that the text string will be "Latin and werbeH" and the list of values for the ‘<a href="text.html#TextElementDXAttribute">dx</a>’ attribute will be "11 12 13 14 15 0 21 22 23 0 36 35 34 33 32 31". After this re-ordering, the glyphs corresponding to the characters will be positioned using standard left-to-right layout rules. </li> </ul> Example tspan04 uses the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute on the ‘<a href="text.html#TextElement">tspan</a>’ element to rotate the glyphs to be rendered. This example shows a single text string in a ‘<a href="text.html#TextElement">tspan</a>’ element that contains more characters than the number of values specified in the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute. In this case the last value specified in the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute of the ‘<a href="text.html#TextElement">tspan</a>’ must be applied to the remaining characters in the string. <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="10cm" height="3cm" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc> Example tspan04 - The number of rotate values is less than the number of characters in the string. </desc> <text font-family="Verdana" font-size="55" fill="blue" > <tspan x="250" y="150" rotate="-30,0,30"> Hello, out there </tspan> </text>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example tspan04 — simple rotation of characters in a tspan element" src="images/text/tspan04.png"/>Example tspan04</div><a href="images/text/tspan04.svg">View this example as SVG (SVG-enabled browsers only)</a></div> Example tspan05 specifies the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute on the ‘<a href="text.html#TextElement">text</a>’ element and on all but one of the child ‘<a href="text.html#TextElement">tspan</a>’ elements to rotate the glyphs to be rendered. The example demonstrates the propagation of the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute. <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="100%" height="100%" viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc> Example tspan05 - propagation of rotation values to nested tspan elements. </desc> <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40" rotate="5,15,25,35,45,55"> Not <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange"> all characters <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow"> in <tspan id="child3"> the </tspan> </tspan> <tspan id="child4" fill="orange" x="40" y="90"> text </tspan> have a </tspan> <tspan id="child5" rotate="-10" fill="blue"> specified </tspan> rotation </text>  <rect x="1" y="1" width="498" height="118" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example tspan05 — propagation of rotation values to nested tspan elements" src="images/text/tspan05.png"/>Example tspan05</div><a href="images/text/tspan05.svg">View this example as SVG (SVG-enabled browsers only)</a></div> Rotation of red text inside the ‘<a href="text.html#TextElement">text</a>’ element: <ul> <li> The ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value will rotate the characters in the text "Not " by 5, 15, 25 and 35 degrees respectively. </li> <li> A ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is applied to the space that follows the text "Not", to the space in between the text in the "child1" and "child5" ‘<a href="text.html#TextElement">tspan</a>’ elements, and to the space before the text "rotation". </li> <li> The next current ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value specified is 45 followed by 55. The current ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value in the ‘<a href="text.html#TextElement">text</a>’ element is incremented as subsequent characters in the text of the child ‘<a href="text.html#TextElement">tspan</a>’ elements are processed. </li> <li> The next immediate ‘<a href="text.html#TextElement">tspan</a>’ element specifies rotate values for the text, hence the current ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value will change to the next value in the list (but is not used) as each character is processed until the last value of 55 degrees is reached. </li> <li> The last ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value of 55 degrees will be applied to all the characters in the text "rotation". </li> </ul> Rotation of the orange text inside the "child1" ‘<a href="text.html#TextElement">tspan</a>’element: <ul> <li> The ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value will rotate the first 4 characters in the text "all characters " by -10, -20, -30 and -40 respectively. </li> <li> The last ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value of -40 becomes the current ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value and will be applied to all subsequent characters in the ‘<a href="text.html#TextElement">tspan</a>’ element and to any child ‘<a href="text.html#TextElement">tspan</a>’ elements that do not specify ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ values. </li> <li> The "child4" ‘<a href="text.html#TextElement">tspan</a>’ element does not specify any ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ values and thus uses the current ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ of its ancestor ("child1" ‘<a href="text.html#TextElement">tspan</a>’ element). All the characters in the text "text" specified within the "child4" ‘<a href="text.html#TextElement">tspan</a>’ element will be rotated by -40 degrees. </li> <li> The last ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value of -40 degrees will be applied to all the characters in the text "have a". </li> <li> A ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is applied to the space in between the text in the "child2" and "child4" ‘<a href="text.html#TextElement">tspan</a>’ elements, and to the space before the text "have a". </li> </ul> Rotation of the yellow text inside the "child2" ‘<a href="text.html#TextElement">tspan</a>’element: <ul> <li> The ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value will rotate the characters in the (yellow) text "in " by 70, 60, and 50 degrees respectively. </li> <li> A ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is applied to the space that follows the text "in". </li> <li> There are more ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ values specified than characters, thus the additional ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ values will be applied to the "child3" ‘<a href="text.html#TextElement">tspan</a>’ element which does not specified any ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ values. </li> <li> The characters in the text "the" specified within the "child3" ‘<a href="text.html#TextElement">tspan</a>’ element will be rotated 40, 30 and 20 degrees respectively. </li> </ul> Rotation of the blue text inside the "child5" ‘<a href="text.html#TextElement">tspan</a>’ element: <ul> <li> The ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value will rotate all the characters in text "specified" by -10 degrees. </li> <li> Only one ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value is specified and is thus applied to all characters in the ‘<a href="text.html#TextElement">tspan</a>’ element. </li> </ul> The following diagram illustrates how the rotation values propagate to ‘<a href="text.html#TextElement">tspan</a>’ elements nested withing a ‘<a href="text.html#TextElement">text</a>’ element: <img alt="Image that shows propagation of rotation values" src="images/text/tspan05-diagram.png" width="528" height="918"/> <h2 id="TextLayout" class="heading">11.3. Text layout – Introduction<a class="self-link" href="#TextLayout"></a></h2> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Include text layout improvements from SVG Tiny 1.2.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2012/02/02-svg-minutes.html#item10">SVG 2 will include the improved text from SVG Tiny 1.2 on characters and glyphs, text layout, text selection, text search.</a></td> </tr> <tr> <th>Purpose:</th> <td>To include clearer descriptions of text layout; no functional change.</td> </tr> <tr> <th>Owner:</th> <td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3236">ACTION-3236</a>)</td> </tr> </table> </div> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Support text in shapes.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/11/17-svg-irc#T22-04-11">SVG 2 will require automatic text wrapping compatible with CSS.</a></td> </tr> <tr> <th>Purpose:</th> <td>Text in flow charts, etc.</td> </tr> <tr> <th>Owner:</th> <td>Tav (no action)</td> </tr> </table> </div> 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. Text layout in SVG is a multi-stage process that takes as input a ‘<a href="text.html#TextElement">text</a>’ element subtree and its property values and produces a sequence of glyphs to render and their positions in each <a href="text.html#TermTextContentElement">text content element</a>'s coordinate system. First, a ‘<a href="text.html#TextElement">text</a>’ element and its descendants are laid out inside a <a href="text.html#TermContentArea">content area</a> or <a href="text.html#TermWrappingArea">wrapping area</a> according to CSS, as if the ‘<a href="text.html#TextElement">text</a>’ were a block element and any ‘<a href="text.html#TextElement">tspan</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’, and ‘<a href="linking.html#AElement">a</a>’ descendants were inline elements. This layout takes into account all paragraph level and font related CSS properties described in this chapter. The <a href="text.html#TermContentArea">content area</a> may be explicitly declared by setting the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, or by setting the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property that defines or references an SVG <a href="shapes.html#TermShapeElement">shape</a>. If a <a href="text.html#TermContentArea">content area</a> is not declared, it defaults to a rectangle of infinite width and height. Second, any positioning given by ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ attributes are applied to the resulting glyph positions from the CSS layout process. The rules for which transforms are allowed depend on if the <a href="text.html#TermContentArea">content area</a> was explicitly declared or not. If not explicitly declared, the rules define the layout of pre-formatted text. If declared, the rules define the layout of auto-wrapped text. Third, the effect of the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property is applied if necessary. Finally, layout of glyphs for any ‘<a href="text.html#TextPathElement">textPath</a>’ elements is performed, converting pre-formatted text to text-on-a-path. Examples of the different types of text layout: <dl> <dt>Pre-formatted:</dt> <dd>For short strings of text (e.g. labels) or where exact placement of glyphs is required (e.g. hand-kerned titles). <div class="example"> An example of multi-line pre-formatted text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="20" y="45" style="font: 24px sans-serif;"> Example of multi-line, <tspan x="20" y="75">pre-formatted text.</tspan> </text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-preformatted.svg" alt="Image showing two lines of pre-formatted text."/> Pre-formatted text where a ‘<a href="text.html#TextElement">tspan</a>’ element has been used to create multi-line text. </div> </div> </dd> <dt>Wrapped text:</dt> <dd>For long strings of text where automatic text wrapping is required. <div class="example"> An example of auto-wrapped text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="20" y="45" style="font: 24px sans-serif; inline-size: 250px;"> Example of text auto-wrapped.</text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-wrapped.svg" alt="Image showing auto-wrapped text on two lines."/> Auto-wrapped text. The <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property defines a rectangular content area of infinite height (shown in light blue). </div> </div> </dd> <dt>Text on path:</dt> <dd>For text that follows a specified path. <div class="example"> An example of text on a path. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <path id="MyPath" stroke="lightblue" fill="none" d="M 50,50 C 100,0 200,100 250,50"/> <text style="font: 24px sans-serif;"> <textPath href="#MyPath">Text on a path.</textPath> </text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-path.svg" alt="Image showing text following a path."/> Text on a path. The ‘<a href="text.html#TextPathElement">textPath</a>’ element references a ‘<a href="paths.html#PathElement">path</a>’ element (shown in light blue). </div> </div> </dd> </dl> SVG 2 introduces the ability to automatically wrap text inside a rectangle or other shape by specifying a <a href="text.html#TermContentArea">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 in order that renderers that support CSS text wrapping can implement SVG text wrapping easily (but without requiring non-HTML compatible SVG renderers to implement HTML). There are several differences between SVG and CSS text wrapping. The most important is that in SVG, a <a href="text.html#TermContentArea">content area</a> must be explicitly provided as SVG does not have an automatic finite (or semi-finite) <a href="text.html#TermContentArea">content area</a> (provided in CSS by the box model). Another difference is that SVG does not have the and elements which create line breaks. Instead, SVG relies on the pre and pre-line values of <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> to provide line breaks. SVG wrapped text also allows a content-creation tool to provide a natural fallback for SVG 1.1 renderers that do not support wrapped text (by use of ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes in the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements, which are ignored by SVG 2 renderers for auto-wrapped text). SVG's text layout options are designed to cover most general use cases. If more complex layout is required (bulleted lists, tables, etc.), text can be rendered in another XML namespace such as XHTML [<a href="refs.html#ref-html">HTML</a>] embedded inline within a ‘<a href="embedded.html#ForeignObjectElement">foreignObject</a>’ element. <h2 id="TextLayoutContentArea" class="heading">11.4. Text layout – Content Area<a class="self-link" href="#TextLayoutContentArea"></a></h2> A <dfn>content area</dfn> is defined by specifying in a ‘<a href="text.html#TextElement">text</a>’ element an <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, or a <a class="property" href="text.html#TextShapeInside">shape-inside</a> property that defines or references an SVG <a href="shapes.html#TermShapeElement">shape</a>. If no <a href="text.html#TermContentArea">content area</a> is provided, the <a href="text.html#TermContentArea">content area</a> defaults to a rectangle of infinite width and height (see the <a href="text.html#TextLayoutPre">pre-formatted text</a> section). If both an <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property and a <a class="property" href="text.html#TextShapeInside">shape-inside</a> property with value other than 'none' are given, the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property is used. Wrapped text is laid out in a <dfn>wrapping area</dfn>. The <a href="text.html#TermWrappingArea">wrapping area</a> is normally the same as the <a href="text.html#TermContentArea">content area</a>. When the <a href="text.html#TermContentArea">content area</a> is defined using the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property, the <a href="text.html#TermWrappingArea">wrapping area</a> may be smaller due to the presence of a <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> property and/or a <a class="property" href="text.html#TextShapePadding">shape-padding</a> property. The <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> property (along with the <a class="property" href="text.html#TextShapeMargin">shape-margin</a> property) defines a <dfn>wrapping context</dfn>. The <a href="text.html#TermWrappingArea">wrapping area</a> is found by insetting the <a href="text.html#TermContentArea">content area</a> by the <a class="property" href="text.html#TextShapePadding">shape-padding</a> distance, and then subtracting the <a href="text.html#TermWrappingContext">wrapping context</a>. Once a <a href="text.html#TermWrappingArea">wrapping area</a> is defined, the text is laid out inside the <a href="text.html#TermWrappingArea">wrapping area</a> according to the rules of CSS (respecting any special rules given in this section). <div class="note"> Constructing equivalent wrapping areas in SVG and HTML. The text inside the wrapping areas is rendered the same in both cases. <div class="figure"> <img class="bordered" src="images/text/text-layout-svg.svg" alt="Image showing the creation of an hour glass shape using a circle with two semicircles spaced out horizontally. Text is wrapped in the circle after the left and right semicircles exclude part of the circle."/> Defining a <a href="text.html#TermWrappingArea">wrapping area</a> in SVG. The ‘<a href="text.html#TextElement">text</a>’ element has both a <a class="property" href="text.html#TextShapeInside">shape-inside</a> property and a <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> property. The <a class="property" href="text.html#TextShapeInside">shape-inside</a> property references a circle that defines a <a href="text.html#TermContentArea">content area</a> (dotted purple line). The <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> property referencing two semicircles defines a <a href="text.html#TermWrappingContext">wrapping context</a> (dotted green line) which when subtracted from the <a href="text.html#TermContentArea">content area</a> results in the <a href="text.html#TermWrappingArea">wrapping area</a> (light blue line). </div> <div class="figure"> <img class="bordered" src="images/text/text-layout-html.svg" alt="Image showing the creation of an hour glass shape using a circle with two semicircles spaced out horizontally. Text is wrapped in the circle after the left and right semicircles exclude part of the circle."/> Defining a <a href="text.html#TermWrappingArea">wrapping area</a> in HTML. A <q>wrapper</q> <div> contains two <q>float</q> <div>s. The wrapper <div> defines a rectangular region (solid purple line). Its <a class="property" href="text.html#TextShapeInside">shape-inside</a> property defines a <a href="text.html#TermContentArea">content area</a> within the <div> (dotted purple line). The two other <div>s define two floats, one on the left (solid green line) and the right (solid pink line). The floats are rectangular in shape. Each float has a <a class="property" href="https://www.w3.org/TR/css-shapes/#shape-outside-property">shape-outside</a> property which defines the <a href="text.html#TermWrappingContext">wrapping context</a> for each float (dotted green and pink lines). The combined <a href="text.html#TermWrappingContext">wrapping context</a> is subtracted from the <a href="text.html#TermContentArea">content area</a> to defined the <a href="text.html#TermWrappingArea">wrapping area</a> (light blue line). </div> </div> <h3 id="InlineSize" class="heading">11.4.1. The ‘inline-size’ property<a class="self-link" href="#InlineSize"></a></h3> 'extent' added by resolution from <a href="http://www.w3.org/2015/02/12-svg-minutes.html#action17">February 12th, 2015</a>. 'extent' replaces the 'width' and 'height' attributes, added by resolution from June 27th, 2013. Replaced by 'inline-size' presentation attribute per resolution from <a href="http://www.w3.org/2015/06/11-svg-minutes.html#item09">Linkoping F2F, June 11, 2015</a>. The <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property allows one to set the <a href="text.html#TermWrappingArea">wrapping area</a> to a rectangular shape. The computed value of the property sets the width of the rectangle for horizontal text and the height of the rectangle for vertical text. The other dimension (height for horizontal text, width for vertical text) is of infinite length. A value of zero disables the creation of a <a href="text.html#TermWrappingArea">wrapping area</a>. The initial <a href="text.html#TermCurrentTextPosition">current text position</a> is taken from the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes of the ‘<a href="text.html#TextElement">text</a>’ element (or first child ‘<a href="text.html#TextElement">tspan</a>’ element if the attributes are not given on the ‘<a href="text.html#TextElement">text</a>’ element). For left-to-right text, the initial <a href="text.html#TermCurrentTextPosition">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, the initial <a href="text.html#TermCurrentTextPosition">current text position</a> is at the top of the rectangle. The rectangle (<a href="text.html#TermWrappingArea">wrapping area</a>) is then anchored according to the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property using the edges of the <a href="text.html#TermWrappingArea">wrapping area</a> to determine the start, middle, and end positions. The <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property method to wrap text is an extension to pre-formatted SVG text where the author simply gives a limit to the width or height of the block of text; thus the use of the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes along with the <a class="property" href="text.html#DirectionProperty">direction</a> and <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> properties to position the first line of text. If full justification is needed, the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property should be used to create the <a href="text.html#TermWrappingArea">wrapping area</a>. <table class="propdef def"> <tr> <th>Name:</th> <td><dfn id="InlineSizeProperty" data-dfn-type="property" data-export="">inline-size</dfn></td> </tr> <tr> <th>Value:</th> <td>auto | <a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a></td> </tr> <tr> <th>Initial:</th> <td>auto</td> </tr> <tr> <th>Applies to:</th> <td>‘<a href="text.html#TextElement">text</a>’ elements</td> </tr> <tr> <th>Inherited:</th> <td>no</td> </tr> <tr> <th>Percentages:</th> <td>Refer to the width (for horizontal text) or height (for vertical text) of the current SVG viewport (see <a href="coords.html#Units">Units</a>)</td> </tr> <tr> <th>Media:</th> <td>visual</td> </tr> <tr> <th>Computed value:</th> <td>an absolute length or percentage</td> </tr> <tr> <th><a href="https://www.w3.org/TR/web-animations-1/#animation-type">Animation type</a>:</th> <td>by computed value</td> </tr> </table> <div class="example"> An example of using <a class="property" href="text.html#InlineSizeProperty">inline-size</a> for wrapping horizontal text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px"> 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."/> Horizontal text wrapping. The light-blue lines indicate the limits of the <a href="text.html#TermContentArea">content area</a>. Note that the content area is of infinite height. The red dot shows the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. </div> </div> <div class="example"> An example of using <a class="property" href="text.html#InlineSizeProperty">inline-size</a> for wrapping right to left horizontal text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="250" y="30" style="font: 20px PakType Naqsh; inline-size: 200px; direction: rtl;"> هذا النص يلتف في 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."/> Horizontal text wrapping for right to left text. The light-blue lines indicate the limits of the <a href="text.html#TermContentArea">content area</a>. Note that the content area is of infinite height. The red dot shows the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. </div> Some browser may not render this SVG 1.1 figure correctly. Batik and Firefox seems to get it right. Bug filed against Chrome. </div> <div class="example"> An example of using <a class="property" href="text.html#InlineSizeProperty">inline-size</a> for wrapping vertical text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="300" viewBox="0 0 100 300"> <text x="62.5" y="25" inline-size="200" style="font: 25px IPAMincho; inline-size: 200px; writing-mode: vertical-rl;"> テキストは１０文字後に折り返されます。</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."/> Vertical text wrapping. The light-blue lines indicate the limits of the <a href="text.html#TermContentArea">content area</a>. Note that the content area is of infinite width. The red dot shows the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. </div> This SVG 1.1 image doesn't work in Firefox, even nightly. Firefox does not support the presentation attribute 'writing-mode'. Bug filed against Firefox. </div> <div class="example"> An example of using <a class="property" href="text.html#InlineSizeProperty">inline-size</a> for wrapping horizontal text, anchored in the middle. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="50" y="30" style="font: 20px sans-serif; inline-size: 200px; text-anchor: middle"> This text wraps at 200 pixels. </text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-wrap-anchored.svg" alt="Image showing English text wrapped into two lines, anchored in the center."/> Horizontal text wrapping. The light-blue lines indicate the limits of the <a href="text.html#TermContentArea">content area</a>. The text is anchored in the middle. The red dot shows the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. </div> </div> <h3 id="TextShapeInside" class="heading">11.4.2. The ‘shape-inside’ property<a class="self-link" href="#TextShapeInside"></a></h3> The <a class="property" href="text.html#TextShapeInside">shape-inside</a> property allows one to set the <a href="text.html#TermContentArea">content area</a> to a <a href="http://dev.w3.org/csswg/css-shapes/#basic-shape-functions">CSS basic shape</a> or to an SVG <a href="shapes.html#TermShapeElement">shape</a>. In CSS/HTML <a class="property" href="text.html#TextShapeInside">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 href="https://drafts.csswg.org/css-transforms/#user-coordinate-system">user coordinate system</a> and the ‘<a href="coords.html#ViewBoxAttribute">viewBox</a>’. <a class="self-link" href="#issue76"></a>Do nor re-specify shape-inside but reference CSS Shapes. <table class="propdef def"> <tr> <th>Name:</th> <td><dfn id="ShapeInsideProperty" data-dfn-type="property" data-export="">shape-inside</dfn></td> </tr> <tr> <th>Value:</th> <td>auto | [ <basic-shape> | <uri> ]+</td> </tr> <tr> <th>Initial:</th> <td>auto</td> </tr> <tr> <th>Applies to:</th> <td>‘<a href="text.html#TextElement">text</a>’ elements</td> </tr> <tr> <th>Inherited:</th> <td>no</td> </tr> <tr> <th>Percentages:</th> <td>Relative to the ‘<a href="coords.html#ViewBoxAttribute">viewBox</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 href="https://www.w3.org/TR/web-animations-1/#animation-type">Animation type</a>:</th> <td>See <a href="https://www.w3.org/TR/css-shapes/#basic-shape-interpolation">Interpolation of Basic Shapes</a></td> </tr> </table> <dl> <dt>auto</dt> <dd> For the purposes of SVG, the 'auto' value indicates that the content area should be defined using the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property or as for pre-formatted text. </dd> <dt><basic-shape></dt> <dd> The shape is computed based on the values of one of 'circle()', 'ellipse()' or 'polygon()'. The CSS value of 'inset()' is invalid for SVG. <div class="example"> An example of using a CSS basic-shape for wrapping horizontal text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> <text style="font: 20px/25px sans-serif; text-align: center; shape-inside: circle(120px at 150px 150px);"> Lorem ipsum dolor sit amet, consec-tetuer adipiscing elit...</text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-wrap-circle.png" alt="Image showing text wrapped inside a circle."/> Horizontal text wrapping inside a CSS circle shape. The light-blue circle indicates the limit of the <a href="text.html#TermContentArea">content area</a>. </div> </div> </dd> <dt><uri></dt> <dd> If the <uri> references an SVG <a href="shapes.html#TermShapeElement">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 using the <a class="property" href="text.html#TextShapeImageThreshold">shape-image-threshold</a>. If the <uri> does not reference an SVG shape element or an image, the effect is as if the value ‘auto’ had been specified. <div class="example"> An example of using a reference to an SVG <a href="shapes.html#TermShapeElement">shape</a> for wrapping horizontal text. <pre> <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 style="font: 20px sans-serif; shape-inside: url(#wrap);"> 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."/> Horizontal text wrapping inside an SVG rectangle shape. The light-blue lines indicate the limits of the <a href="text.html#TermContentArea">content area</a>. </div> </div> </dd> </dl> The CSS values of 'outside-shape', 'shape-box', and 'display' are invalid for SVG. SVG allows the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property to have a list of shapes. Each shape defines an independent <a href="text.html#TermContentArea">content area</a>. Text is first laid out in the content area of the first shape. If the text overflows the first shape, the overflow text is laid out in the next shape until all text is laid out or no more shapes are available. The effect is similar to CSS columns, except that the columns can have arbitrary shapes. It is recommended that an <q>overflow</q> shape be provided to ensure the accessibility of all text in cases; for example, if a user increases the font size. Except as noted, see the CSS Shapes Module Level 2 for the definition of <a href="http://dev.w3.org/csswg/css-shapes-2/#shape-inside-property">'shape-inside'</a>. [<a href="refs.html#ref-css-shapes-2">css-shapes-2</a>] '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. <h3 id="TextShapeSubtract" class="heading">11.4.3. The ‘shape-subtract’ property<a class="self-link" href="#TextShapeSubtract"></a></h3> The <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> property allows one to exclude part of the <a href="text.html#TermContentArea">content area</a> from the <a href="text.html#TermWrappingArea">wrapping area</a>. The excluded area is the addition of all the areas defined in a list of <a href="http://dev.w3.org/csswg/css-shapes/#basic-shape-functions">CSS basic shape</a>s and/or SVG <a href="shapes.html#TermShapeElement">shapes</a>. It was resolved at the 2016 Sydney F2F that 'shape-subtract' should be uses instead of 'shape-outside' due to the different behavior required. ('shape-outside' reduces the area of an exclusion.) Absolute and percentage values are defined relative to the current <a href="https://drafts.csswg.org/css-transforms/#user-coordinate-system">user coordinate system</a> and the ‘<a href="coords.html#ViewBoxAttribute">viewBox</a>’. <table class="propdef def"> <tr> <th>Name:</th> <td><dfn id="ShapesubtractProperty" data-dfn-type="property" data-export="">shape-subtract</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 href="text.html#TextElement">text</a>’ elements</td> </tr> <tr> <th>Inherited:</th> <td>no</td> </tr> <tr> <th>Percentages:</th> <td>Relative to the ‘<a href="coords.html#ViewBoxAttribute">viewBox</a>’</td> </tr> <tr> <th>Media:</th> <td>visual</td> </tr> <tr> <th>Computed value:</th> <td>computed lengths for any <basic-shape>, the absolute URI for <uri>, otherwise as specified </td> </tr> <tr> <th><a href="https://www.w3.org/TR/web-animations-1/#animation-type">Animation type</a>:</th> <td>See <a href="https://www.w3.org/TR/css-shapes/#basic-shape-interpolation">Interpolation of Basic Shapes</a></td> </tr> </table> <dl> <dt><basic-shape></dt> <dd> The shape is computed based on the values of one of 'circle()', 'ellipse()' or 'polygon()'. </dd> <dt><uri></dt> <dd> For any <uri> that references an SVG <a href="shapes.html#TermShapeElement">shape</a> element, that element defines the contributing shape, expanded by the value of its <a class="property" href="text.html#TextShapeMargin">shape-margin</a> distance. For any <uri> that references an image, the contributing shape is extracted and computed based on the alpha channel of the specified image using the <a class="property" href="text.html#TextShapeImageThreshold">shape-image-threshold</a>. If an <uri> does not reference an SVG shape element or an image, that <uri> is ignored. </dd> </dl> <div class="example"> An example of using <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a>. . <pre> <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" style="shape-margin:25px;"/> <text style="shape-inside:url(#rect1); shape-subtract:url(#rect2); shape-padding:25px; font-family:DejaVu Sans; font-size:12px; text-align:justified; line-height:110%">Lorem ipsum ...</text> <text style="shape-inside:url(#rect2); shape-padding:25px; 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."/> Horizontal text wrapping inside two overlapping rectangles using <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a> as well as <a class="property" href="text.html#TextShapeInside">shape-inside</a>, <a class="property" href="text.html#TextShapePadding">shape-padding</a> and <a class="property" href="text.html#TextShapeMargin">shape-margin</a>. The black rectangles show the <a href="text.html#TermContentArea">content area</a>s. The inner blue lines show the <a href="text.html#TermWrappingArea">wrapping area</a>s. </div> </div> <h3 id="TextShapeImageThreshold" class="heading">11.4.4. The ‘shape-image-threshold’ property<a class="self-link" href="#TextShapeImageThreshold"></a></h3> The <a class="property" href="text.html#TextShapeImageThreshold">shape-image-threshold</a> defines the alpha channel threshold used to extract the shape using an image. A value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. For the purposes of SVG, this property applies to ‘<a href="text.html#TextElement">text</a>’ elements. Except as noted, see the CSS Shapes Module Level 1 for the definition of <a href="https://www.w3.org/TR/css-shapes/#shape-image-threshold-property">'shape-image-threshold'</a>. [<a href="refs.html#ref-css-shapes-1">css-shapes-1</a>] <h3 id="TextShapeMargin" class="heading">11.4.5. The ‘shape-margin’ property<a class="self-link" href="#TextShapeMargin"></a></h3> The <a class="property" href="text.html#TextShapeMargin">shape-margin</a> property adds a margin to a shape referenced with <a class="property" href="text.html#TextShapeSubtract">shape-subtract</a>. It defines a new shape where every point is the specified distance from the original shape. This property takes on positive values only. <a class="self-link" href="#issue77"></a>Do nor re-specify shape-margin but reference CSS Shapes. <table class="propdef def"> <tr> <th>Name:</th> <td><dfn id="ShapeMarginProperty" data-dfn-type="property" data-export="">shape-margin</dfn></td> </tr> <tr> <th>Value:</th> <td><a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a></td> </tr> <tr> <th>Initial:</th> <td>0</td> </tr> <tr> <th>Applies to:</th> <td>‘<a href="text.html#TextElement">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>an absolute length</td> </tr> <tr> <th><a href="https://www.w3.org/TR/web-animations-1/#animation-type">Animation type</a>:</th> <td>by computed value</td> </tr> </table> Except as noted, see the CSS Shapes Module Level 1 for the definition of See <a href="https://www.w3.org/TR/css-shapes/#shape-margin-property">'shape-margin'</a>. [<a href="refs.html#ref-css-shapes-1">css-shapes-1</a>] <h3 id="TextShapePadding" class="heading">11.4.6. The ‘shape-padding’ property<a class="self-link" href="#TextShapePadding"></a></h3> The <a class="property" href="text.html#TextShapePadding">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. <div class="example"> An example of using <a class="property" href="text.html#TextShapePadding">shape-padding</a>. <pre> <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 style="shape-inside: url(#circle); shape-padding: 25px; font: 18px DejaVu Sans; text-align: justified; line-height: 110%;">This is an example of wrapped text in SVG 2! There should be 25 pixel padding 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."/> Horizontal text wrapping inside a circle with a <a class="property" href="text.html#TextShapePadding">shape-padding</a>. The outer black circle shows the <a href="text.html#TermContentArea">content area</a>. The inner blue circle shows the <a href="text.html#TermWrappingArea">wrapping area</a>. </div> This image is a PNG. Figure out how to make a good SVG. Note: Chrome supports 'textLength' on 'tspan' but Firefox does not. </div> Except as noted, see the CSS Shapes Module Level 2 for the definition of <a href="http://dev.w3.org/csswg/css-shapes-2/#shape-padding-property">'shape-padding'</a>. <h2 id="TextLayoutAlgorithm" class="heading">11.5. Text layout – Algorithm<a class="self-link" href="#TextLayoutAlgorithm"></a></h2> <div class="ready-for-wider-review"> Text layout begins by passing to a CSS-based text renderer the content of the ‘<a href="text.html#TextElement">text</a>’ element which includes text data along with styling information and a description of one or more shapes to be filled. The ‘<a href="text.html#TextElement">text</a>’ element is treated as a block element and its descendant ‘<a href="text.html#TextElement">tspan</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’ and ‘<a href="linking.html#AElement">a</a>’ elements are treated as inline elements. The CSS renderer returns a set of <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> with their positions resulting from laying out the text as if the text were absolutely positioned. A <a href="text.html#TermTypographicCharacterUnit">typographic character</a> may contain more than one <a href="text.html#TermGlyph">glyph</a>. It is assumed here the relative positioning of the <a href="text.html#TermGlyph">glyphs</a> inside a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> is encapsulated by the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> and it is not user controllable. Once a <a href="text.html#TermContentArea">content area</a> has been defined, the following algorithm is used to determine the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> and their positions for a given ‘<a href="text.html#TextElement">text</a>’ element: <ul class="algorithm"> <li> For text where the <a href="text.html#TermContentArea">content area</a> is defined by the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property, layout the text in one or more areas per CSS rules for laying out text in a CSS <a href="text.html#TermWrappingArea">wrapping area</a>. SVG allows the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property to reference more than one shape. Each shape should be filled in turn until there is no more text or no more shapes. </li> <li> For text where the <a href="text.html#TermContentArea">content area</a> is defined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, layout the text in a CSS content box where the <a href="http://dev.w3.org/csswg/css-writing-modes/#inline-size">inline size</a> is set to the value of the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property and the <a href="http://dev.w3.org/csswg/css-writing-modes/#block-size">block size</a> is unconstrained. This means that text is laid out with the box width set to the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> value if <a class="property" href="text.html#WritingModeProperty">writing-mode</a> is horizontal-tb, or with the box height set to the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> value otherwise. </li> <li> For all other text (SVG 1.1 compatible text and SVG 1.1 like multi-line text), layout the text in a CSS content box that is unconstrained in width and height. </li> </ul> A number of CSS properties have no or limited effect on SVG text layout: <ul> <li> The used value of each of the following properties on a <a href="text.html#TermTextContentElement">text content element</a> (and its pseudo-elements, if any) and on an ‘<a href="linking.html#AElement">a</a>’ element within a <a href="text.html#TermTextContentBlockElement">text content block element</a> must be the property's initial values: ‘border-style’, ‘float’, ‘margin’, ‘padding’, ‘position’ and ‘text-align’. </li> <li> If the computed value of the <a class="property" href="render.html#VisibilityControl">display</a> property on a correctly parented <a href="text.html#TermTextContentBlockElement">text content block element</a> is anything other than none, then its used value must be block. This ensures that the ‘<a href="text.html#TextElement">text</a>’ element is treated as if it were a block element. </li> <li> If the computed value of the <a class="property" href="render.html#VisibilityControl">display</a> property on a correctly parented <a href="text.html#TermTextContentChildElement">text content child element</a> or ‘<a href="linking.html#AElement">a</a>’ element, is anything other than none, then its used value must be inline. This ensures that ‘<a href="text.html#TextElement">tspan</a>’, ‘<a href="text.html#TextPathElement">textPath</a>’ and ‘<a href="linking.html#AElement">a</a>’ elements are treated as if they were inline elements. Note: the <a class="property" href="coords.html#TransformProperty">transform</a> property has no effect on inline elements. </li> <li> The used value of the <a class="property" href="render.html#VisibilityControl">display</a> property on an element that is a descendant of a <a href="text.html#TermTextContentBlockElement">text content block element</a> and is not a correctly parented <a href="text.html#TermTextContentChildElement">text content child element</a> or ‘<a href="linking.html#AElement">a</a>’ element must be none. This ensures that graphics and metadata elements inside a ‘<a href="text.html#TextElement">text</a>’ element do not render. </li> </ul> Various SVG attributes and properties may reposition the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> depending on how the <a href="text.html#TermContentArea">content area</a> is defined: <ul> <li> For text where the <a href="text.html#TermContentArea">content area</a> is defined by the <a class="property" href="text.html#TextShapeInside">shape-inside</a> property, the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> are rendered with positions as returned from the CSS-based text renderer. </li> <li> For text where the <a href="text.html#TermContentArea">content area</a> is defined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, each <a href="text.html#TermLineBox">line box</a> is shifted according to the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property. No further post-processing is performed. </li> <li> For all other text (SVG 1.1 compatible text and SVG 1.1 like multi-line text), the positions of the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> are adjusted according to the algorithm that follows. </li> </ul> The following SVG text layout algorithm returns output information about each character in the DOM in the ‘<a href="text.html#TextElement">text</a>’ element's subtree. That information includes: <ul> <li> a global index number, which indicates the index of the character relative to the start of the ‘<a href="text.html#TextElement">text</a>’ element; </li> <li> an (x, y) coordinate pair, which gives its position in the coordinate space of the ‘<a href="text.html#TextElement">text</a>’ element; </li> <li> an angle value, which gives its rotation; </li> <li> a "hidden" flag, which represents whether it is hidden due to falling off the end of a ‘<a href="text.html#TextPathElement">textPath</a>’; </li> <li> an "addressable" flag, which represents whether it is an <a href="text.html#TermAddressableCharacter">addressable character</a>, that is, addressable by text positioning attributes and SVG DOM text methods; </li> <li> a "middle" flag, which represents whether it is the second or later character of a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> </li> <li> an "anchored chunk" flag, which represents whether it starts a contiguous sequence of glyphs that can be affected by text anchoring </li> </ul> The arrays given in the SVG attributes ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ are indexed by <a href="text.html#TermAddressableCharacter">addressable characters</a>. However, repositioning is applied to <a href="text.html#TermTypographicCharacterUnit">typographic characters</a>. If a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> corresponds to more than one character (e.g. a ligature), only the array values corresponding to the first character are used in positioning the <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. Array values corresponding to other characters in the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> are skipped (for ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’), are accumulated and applied to the next <a href="text.html#TermTypographicCharacterUnit">typographic character</a> (for ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’), or if it is the last value in the array, applied to the following <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> (for ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’). This ensures, for example, that attribute values are applied to the same characters regardless of whether or not a font has a particular ligature. The SVG specific text layout algorithm is as follows: <ol class="algorithm"> <li> Setup <ol> <li> Let <var>root</var> be the result of generating <a href="text.html#TermTypographicCharacterUnit">typographic character</a> positions for the ‘<a href="text.html#TextElement">text</a>’ element and its subtree, laid out as if it were an absolutely positioned element. This will be a single line of text unless the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property causes line breaks. </li> <li> Let <var>count</var> be the number of DOM characters within the ‘<a href="text.html#TextElement">text</a>’ element's subtree. </li> <li> Let <var>result</var> be an array of length <var>count</var> whose entries contain the per-character information described above. Each entry is initialized as follows: <ul> <li>its global index number equal to its position in the array,</li> <li>its "x" coordinate set to "unspecified",</li> <li>its "y" coordinate set to "unspecified",</li> <li>its "rotate" coordinate set to "unspecified",</li> <li>its "hidden" flag is false,</li> <li>its "addressable" flag is true,</li> <li>its "middle" flag is false,</li> <li>its "anchored chunk" flag is false.</li> </ul> If <var>result</var> is empty, then return <var>result</var>. </li> <li> Let <var>CSS_positions</var> be an array of length <var>count</var> whose entries will be filled with the <var>x</var> and <var>y</var> positions of the corresponding <a href="text.html#TermTypographicCharacterUnit">typographic character</a> in <var>root</var>. The array entries are initialized to (0, 0). </li> <li> Let "horizontal" be a flag, true if the writing mode of ‘<a href="text.html#TextElement">text</a>’ is horizontal, false otherwise. </li> </ol> </li> <li> Set flags and assign initial positions For each array element with index <var>i</var> in <var>result</var>: <ol> <li> Set <var>addressable</var> to false if the character at index <var>i</var> was: <ul> <li> part of the text content of a <a href="render.html#TermNonRenderedElement">non-rendered element</a> </li> <li> discarded during layout due to being a <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-1">collapsed white space character</a>, a soft hyphen character, or a bidi control character; or </li> <li> discarded during layout due to being a <a href="https://www.w3.org/TR/css-text-3/#line-break-transform">collapsed segment break</a>; or </li> <li> <a href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">trimmed</a> from the start or end of a line. </li> </ul> <div class="note"> Since there is collapsible white space not addressable by glyph positioning attributes in the following ‘<a href="text.html#TextElement">text</a>’ element (with a standard font), the "B" glyph will be placed at x=300. <pre><text x="100 200 300"> A B </text></pre> This is because the white space before the "A", and all but one white space character between the "A" and "B", is collapsed away or trimmed. </div> </li> <li> Set <var>middle</var> to true if the character at index <var>i</var> is the second or later character that corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. </li> <li> If the character at index <var>i</var> corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> at the beginning of a line, then set the "anchored chunk" flag of <var>result</var>[<var>i</var>] to true. This ensures chunks shifted by <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> do not span multiple lines. </li> <li> If <var>addressable</var> is true and <var>middle</var> is false then set <var>CSS_positions</var>[<var>i</var>] to the position of the corresponding <a href="text.html#TermTypographicCharacterUnit">typographic character</a> as determined by the CSS renderer. Otherwise, if <var>i</var> > 0, then set <var>CSS_positions</var>[<var>i</var>] = <var>CSS_positions</var>[<var>i</var> − 1] </li> </ol> </li> <li> Resolve character positioning Position adjustments (e.g values in a ‘<a href="text.html#TextElementXAttribute">x</a>’ attribute) specified by a node apply to all characters in that node including characters in the node's descendants. Adjustments specified in descendant nodes, however, override adjustments from ancestor nodes. This section resolves which adjustments are to be applied to which characters. It also directly sets the <var>rotate</var> coordinate of <var>result</var>. <ol> <li> Set up: <ol> <li> Let <var>resolve_x</var>, <var>resolve_y</var>, <var>resolve_dx</var>, and <var>resolve_dy</var> be arrays of length <var>count</var> whose entries are all initialized to "unspecified". </li> <li> Set "in_text_path" flag false. This flag will allow ‘<a href="text.html#TextElementYAttribute">y</a>’ (‘<a href="text.html#TextElementXAttribute">x</a>’) attribute values to be ignored for horizontal (vertical) text inside ‘<a href="text.html#TextPathElement">textPath</a>’ elements. </li> <li> Call the following procedure with the ‘<a href="text.html#TextElement">text</a>’ element node. </li> </ol> </li> <li> Procedure: resolve character positioning: A recursive procedure that takes as input a <var>node</var> and whose steps are as follows: <ol> <li> If <var>node</var> is a ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ node: <ol> <li> Let <var>index</var> equal the "global index number" of the first character in the node. </li> <li> Let <var>x</var>, <var>y</var>, <var>dx</var>, <var>dy</var> and <var>rotate</var> be the lists of values from the corresponding attributes on <var>node</var>, or empty lists if the corresponding attribute was not specified or was invalid. </li> <li> If "in_text_path" flag is false: <ul> <li> Let <var>new_chunk_count</var> = max(length of <var>x</var>, length of <var>y</var>). </li> </ul> Else: <ul> <li> If the "horizontal" flag is true: <ul> <li> Let <var>new_chunk_count</var> = length of <var>x</var>. </li> </ul> </li> <li> Else: <ul> <li> Let <var>new_chunk_count</var> = length of <var>y</var>. </li> </ul> </li> </ul> </li> <li> Let <var>length</var> be the number of DOM characters in the subtree rooted at <var>node</var>. </li> <li> Let <var>i</var> = 0 and <var>j</var> = 0. <var>i</var> is an index of <a href="text.html#TermAddressableCharacter">addressable characters</a> in the node; <var>j</var> is an index of all <a href="text.html#TermCharacter">characters</a> in the node. </li> <li> While <var>j</var> < <var>length</var>, do: This loop applies the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’ and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes to the content inside <var>node</var>. <ol> <li> If the "addressable" flag of <var>result</var>[<var>index</var> + <var>j</var>] is true, then: <ol> <li> If <var>i</var> < <var>new_check_count</var>, then set the "anchored chunk" flag of <var>result</var>[<var>index</var> + <var>j</var>] to true. Else set the flag to false. Setting the flag to false ensures that ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes set in a ‘<a href="text.html#TextElement">text</a>’ element don't create anchored chunk in a ‘<a href="text.html#TextPathElement">textPath</a>’ element when they should not. </li> <li> If <var>i</var> < length of <var>x</var>, then set <var>resolve_x</var>[<var>index</var> + <var>j</var>] to <var>x</var>[<var>i</var>]. </li> <li> If "in_text_path" flag is true and the "horizontal" flag is false, unset <var>resolve_x</var>[<var>index</var>]. The ‘<a href="text.html#TextElementXAttribute">x</a>’ attribute is ignored for vertical text on a path. </li> <li> If <var>i</var> < length of <var>y</var>, then set <var>resolve_y</var>[<var>index</var> + <var>j</var>] to <var>y</var>[<var>i</var>]. </li> <li> If "in_text_path" flag is true and the "horizontal" flag is true, unset <var>resolve_y</var>[<var>index</var>]. The ‘<a href="text.html#TextElementYAttribute">y</a>’ attribute is ignored for horizontal text on a path. </li> <li> If <var>i</var> < length of <var>dx</var>, then set <var>resolve_dx</var>[<var>index</var> + <var>j</var>] to <var>dy</var>[<var>i</var>]. </li> <li> If <var>i</var> < length of <var>dy</var>, then set <var>resolve_dy</var>[<var>index</var> + <var>j</var>] to <var>dy</var>[<var>i</var>]. </li> <li> If <var>i</var> < length of <var>rotate</var>, then set the angle value of <var>result</var>[<var>index</var> + <var>j</var>] to <var>rotate</var>[<var>i</var>]. Otherwise, if <var>rotate</var> is not empty, then set <var>result</var>[<var>index</var> + <var>j</var>] to <var>result</var>[<var>index</var> + <var>j</var> − 1]. </li> <li> Set <var>i</var> = <var>i</var> + 1. </li> </ol> </li> <li> Set <var>j</var> = <var>j</var> + 1. </li> </ol> </li> </ol> </li> <li> If <var>node</var> is a ‘<a href="text.html#TextPathElement">textPath</a>’ node: <ol> <li> Let <var>index</var> equal the global index number of the first character in the node (including descendant nodes). </li> <li> Set the "anchored chunk" flag of <var>result</var>[<var>index</var>] to true. A ‘<a href="text.html#TextPathElement">textPath</a>’ element always creates an anchored chunk. </li> <li> Set <var>in_text_path</var> flag true. </li> </ol> </li> <li> For each child node <var>child</var> of <var>node</var>: <ol> <li> <a href="#ResolveGlyphPositioning">Resolve glyph positioning</a> of <var>child</var>. </li> </ol> </li> <li> If <var>node</var> is a ‘<a href="text.html#TextPathElement">textPath</a>’ node: <ol> <li> Set "in_text_path" flag false. </li> </ol> </li> </ol> </li> </ol> </li> <li> Adjust positions: dx, dy The ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ adjustments are applied before adjustments due to the ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute while the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’ and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ adjustments are applied after. <ol> <li> Let <var>shift</var> be the cumulative <var>x</var> and <var>y</var> shifts due to ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes, initialized to (0,0). </li> <li> For each array element with index <var>i</var> in result: <ol> <li> If <var>resolve_x</var>[<var>i</var>] is unspecified, set it to 0. If <var>resolve_y</var>[<var>i</var>] is unspecified, set it to 0. </li> <li> Let <var>shift.x</var> = <var>shift.x</var> + <var>resolve_x</var>[<var>i</var>] and <var>shift.y</var> = <var>shift.y</var> + <var>resolve_y</var>[<var>i</var>]. </li> <li> Let <var>result</var>[<var>i</var>].x = CSS_positions[<var>i</var>].x + shift.x and <var>result</var>[<var>i</var>].y = CSS_positions[<var>i</var>].y + shift.y. </li> </ol> </li> </ol> </li> <li> Apply ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute <ol> <li> Set up: <ol> <li> Define <dfn id="TermResolvedDescendantNode" data-dfn-type="dfn" data-export="">resolved descendant node</dfn> as a descendant of node with a valid ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute that is not itself a descendant node of a descendant node that has a valid ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute. </li> <li> Call the following procedure with the ‘<a href="text.html#TextElement">text</a>’ element node. </li> </ol> </li> <li> Procedure: resolve text length: A recursive procedure that takes as input a <var>node</var> and whose steps are as follows: <ol> <li> For each child node <var>child</var> of node: <ol> <li> <a href="#ResolveTextLength">Resolve text length</a> of child. Child nodes are adjusted before parent nodes. </li> </ol> </li> <li> If <var>node</var> is a ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ node and if the node has a valid ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ attribute value: <ol> <li> Let <var>a</var> = +∞ and <var>b</var> = −∞. </li> <li> Let <var>i</var> and <var>j</var> be the global index of the first character and last characters in <var>node</var>, respectively. </li> <li> For each index <var>k</var> in the range [<var>i</var>, <var>j</var>] where the "addressable" flag of <var>result</var>[<var>k</var>] is true: This loop finds the left-(top-) most and right-(bottom-) most extents of the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> within the node and checks for forced line breaks. <ol> <li> If the character at <var>k</var> is a linefeed or carriage return, return. No adjustments due to ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ are made to a node with a forced line break. </li> <li> Let <var>pos</var> = the x coordinate of the position in <var>result</var>[<var>k</var>], if the "horizontal" flag is true, and the y coordinate otherwise. </li> <li> Let <var>advance</var> = the advance of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> corresponding to character <var>k</var>. [NOTE: This advance will be negative for RTL horizontal text.] </li> <li> Set <var>a</var> = min(<var>a</var>, <var>pos</var>, <var>pos</var> + <var>advance</var>). </li> <li> Set <var>b</var> = max(<var>b</var>, <var>pos</var>, <var>pos</var> + <var>advance</var>). </li> </ol> </li> <li> If <var>a</var> ≠ +∞ then: <ol> <li> Find the distance <var>delta</var> = ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ computed value − (b − a). User agents are required to shift the last <a href="text.html#TermTypographicCharacterUnit">typographic character</a> in the node by <var>delta</var>, in the positive <var>x</var> direction if the "horizontal" flag is true and if <a class="property" href="text.html#DirectionProperty">direction</a> is lrt, in the negative <var>x</var> direction if the "horizontal" flag is true and <a class="property" href="text.html#DirectionProperty">direction</a> is rtl, or in the positive <var>y</var> direction otherwise. User agents are free to adjust intermediate <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> for optimal typography. The next steps indicate one way to adjust <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> when the value of ‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’ is spacing. </li> <li> Find <var>n</var>, the total number of <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> in this node including any descendant nodes that are not resolved descendant nodes or within a resolved descendant node. </li> <li> Let <var>n</var> = <var>n</var> + number of resolved descendant nodes − 1. Each resolved descendant node is treated as if it were a single <a href="text.html#TermTypographicCharacterUnit">typographic character</a> in this context. </li> <li> Find the per-character adjustment <var>δ</var> = <var>delta</var>/<var>n</var>. </li> <li> Let <var>shift</var> = 0. </li> <li> For each index <var>k</var> in the range [<var>i</var>,<var>j</var>]: <ol> <li> Add shift to the <var>x</var> coordinate of the position in result[<var>k</var>], if the "horizontal" flag is true, and to the <var>y</var> coordinate otherwise. </li> <li> If the "middle" flag for result[<var>k</var>] is not true and <var>k</var> is not a character in a resolved descendant node other than the first character then <var>shift</var> = <var>shift</var> + <var>δ</var>. </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> <li> Adjust positions: x, y This loop applies ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ values, and ensures that <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> chunks do not start in the middle of a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. <ol> <li> Let <var>shift</var> be the current adjustment due to the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes, initialized to (0,0). </li> <li> Set <var>index</var> = 1. </li> <li> While <var>index</var> < <var>count</var>: <ol> <li> If <var>resolved_x</var>[<var>index</var>] is set, then let <var>shift.x</var> = <var>resolved_x</var>[<var>index</var>] − <var>result.x</var>[<var>index</var>]. </li> <li> If <var>resolved_y</var>[<var>index</var>] is set, then let <var>shift.y</var> = <var>resolved_y</var>[<var>index</var>] − <var>result.y</var>[<var>index</var>]. </li> <li> Let <var>result.x</var>[<var>index</var>] = <var>result.x</var>[<var>index</var>] + shift.x and <var>result.y</var>[<var>index</var>] = <var>result.y</var>[<var>index</var>] + shift.y. </li> <li> If the "middle" and "anchored chunk" flags of <var>result</var>[<var>index</var>] are both true, then: <ol> <li> Set the "anchored chunk" flag of <var>result</var>[<var>index</var>] to false. </li> <li> If <var>index</var> + 1 < <var>count</var>, then set the "anchored chunk" flag of <var>result</var>[<var>index</var> + 1] to true. </li> </ol> </li> <li> Set <var>index</var> to <var>index</var> + 1. </li> </ol> </li> </ol> </li> <li> Apply anchoring <ol> <li> For each slice <var>result</var>[<var>i</var>..<var>j</var>] (inclusive of both <var>i</var> and <var>j</var>), where: <ul> <li> the "anchored chunk" flag of <var>result</var>[<var>i</var>] is true, </li> <li> the "anchored chunk" flags of <var>result</var>[<var>k</var>] where <var>i</var> < <var>k</var> ≤ <var>j</var> are false, and </li> <li> <var>j</var> = <var>count</var> − 1 or the "anchored chunk" flag of <var>result</var>[<var>j</var> + 1] is true; </li> </ul> do: This loops over each anchored chunk. <ol> <li> Let <var>a</var> = +∞ and <var>b</var> = −∞. </li> <li> For each index <var>k</var> in the range [<var>i</var>, <var>j</var>] where the "addressable" flag of <var>result</var>[<var>k</var>] is true: This loop finds the left-(top-) most and right-(bottom-) most extents of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> within the anchored chunk. <ol> <li> Let <var>pos</var> = the x coordinate of the position in <var>result</var>[<var>k</var>], if the "horizontal" flag is true, and the y coordinate otherwise. </li> <li> Let <var>advance</var> = the advance of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> corresponding to character <var>k</var>. [NOTE: This advance will be negative for RTL horizontal text.] </li> <li> Set <var>a</var> = min(<var>a</var>, <var>pos</var>, <var>pos</var> + <var>advance</var>). </li> <li> Set <var>b</var> = max(<var>b</var>, <var>pos</var>, <var>pos</var> + <var>advance</var>). </li> </ol> </li> <li> If <var>a</var> ≠ +∞, then: Here we perform the text anchoring. <ol> <li> Let <var>shift</var> be the x coordinate of <var>result</var>[<var>i</var>], if the "horizontal" flag is true, and the y coordinate otherwise. </li> <li> Adjust shift based on the value of <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> and <a class="property" href="text.html#DirectionProperty">direction</a> of the element the character at index <var>i</var> is in: <dl class="switch"> <dt>(start, ltr) or (end, rtl)</dt> <dd>Set <var>shift</var> = <var>shift</var> − <var>a</var>.</dd> <dt>(start, rtl) or (end, ltr)</dt> <dd>Set <var>shift</var> = <var>shift</var> − <var>b</var>.</dd> <dt>(middle, ltr) or (middle, rtl)</dt> <dd>Set <var>shift</var> = <var>shift</var> − (<var>a</var> + <var>b</var>) / 2.</dd> </dl> </li> <li> For each index <var>k</var> in the range [<var>i</var>, <var>j</var>]: <ol> <li> Add <var>shift</var> to the x coordinate of the position in <var>result</var>[<var>k</var>], if the "horizontal" flag is true, and to the y coordinate otherwise. </li> </ol> </li> </ol> </li> </ol> </li> </ol> </li> <li> Position on path <ol> <li> Set <var>index</var> = 0. </li> <li> Set the "in path" flag to false. </li> <li> Set the "after path" flag to false. </li> <li> Let <var>path_end</var> be an offset for characters that follow a ‘<a href="text.html#TextPathElement">textPath</a>’ element. Set <var>path_end</var> to (0,0). </li> <li> While <var>index</var> < <var>count</var>: <ol> <li> If the character at index <var>i</var> is within a ‘<a href="text.html#TextPathElement">textPath</a>’ element and corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, then: <ol> <li> Set "in path" flag to true. </li> <li> If the "middle" flag of <var>result</var>[<var>index</var>] is false, then: Here we apply ‘<a href="text.html#TextPathElement">textPath</a>’ positioning. <ol> <li> Let <var>path</var> be the <a href="paths.html#TermEquivalentPath">equivalent path</a> of the <a href="shapes.html#TermBasicShapeElement">basic shape</a> element referenced by the ‘<a href="text.html#TextPathElement">textPath</a>’ element, or an empty path if the reference is invalid. </li> <li> If the ‘<a href="text.html#TextPathElementSideAttribute">side</a>’ attribute of the ‘<a href="text.html#TextPathElement">textPath</a>’ element is 'right', then reverse <var>path</var>. </li> <li> Let <var>length</var> be the length of <var>path</var>. </li> <li> Let <var>offset</var> be the value of the ‘<a href="text.html#TextPathElement">textPath</a>’ element's ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ attribute, adjusted due to any ‘<a href="paths.html#PathLengthAttribute">pathLength</a>’ attribute on the referenced element. </li> <li> Let <var>advance</var> = the advance of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> corresponding to character <var>k</var>. [NOTE: This advance will be negative for RTL horizontal text.] </li> <li> Let (<var>x</var>, <var>y</var>) and <var>angle</var> be the position and angle in <var>result</var>[<var>index</var>]. </li> <li> Let <var>mid</var> be a coordinate value depending on the value of the "horizontal" flag: <dl class="switch"> <dt>true</dt> <dd><var>mid</var> is <var>x</var> + <var>advance</var> / 2 + <var>offset</var></dd> <dt>false</dt> <dd><var>mid</var> is <var>y</var> + <var>advance</var> / 2 + <var>offset</var></dd> </dl> The user agent is free to make any additional adjustments to <var>mid</var> necessary to ensure high quality typesetting due to a ‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’ value of 'auto' or a ‘<a href="text.html#TextPathElementMethodAttribute">method</a>’ value of 'stretch'. </li> <li> If <var>path</var> is not a <a href="paths.html#TermOpenSubpath">closed subpath</a> and <var>mid</var> < 0 or <var>mid</var> > <var>length</var>, set the "hidden" flag of <var>result</var>[<var>index</var>] to true. </li> <li> If <var>path</var> is a <a href="paths.html#TermOpenSubpath">closed subpath</a> depending on the values of <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> and <a class="property" href="text.html#DirectionProperty">direction</a> of the element the character at <var>index</var> is in: This implements the special wrapping criteria for single <a href="paths.html#TermOpenSubpath">closed subpaths</a>. <dl class="switch"> <dt>(start, ltr) or (end, rtl)</dt> <dd> If <var>mid</var>−<var>offset</var> < 0 or <var>mid</var>−<var>offset</var> > <var>length</var>, set the "hidden" flag of <var>result</var>[<var>index</var>] to true. </dd> <dt>(middle, ltr) or (middle, rtl)</dt> <dd> If <var>mid</var>−<var>offset</var> < −<var>length</var>/2 or <var>mid</var>−<var>offset</var> > <var>length</var>/2, set the "hidden" flag of <var>result</var>[<var>index</var>] to true. </dd> <dt>(start, rtl) or (end, ltr)</dt> <dd> If <var>mid</var>−<var>offset</var> < −<var>length</var> or <var>mid</var>−<var>offset</var> > 0, set the "hidden" flag of <var>result</var>[<var>index</var>] to true. </dd> </dl> Set <var>mid</var> = <var>mid</var> mod <var>length</var>. </li> <li>If the <var>hidden</var> flag is false: <ol> <li> Let <var>point</var> be the position and <var>t</var> be the unit vector tangent to the point <var>mid</var> distance along <var>path</var>. </li> <li> If the "horizontal" flag is <dl class="switch"> <dt>true</dt> <dd> <ol> <li> Let <var>n</var> be the normal unit vector pointing in the direction <var>t</var> + 90°. </li> <li> Let <var>o</var> be the horizontal distance from the vertical center line of the glyph to the alignment point. </li> <li> Then set the position in <var>result</var>[<var>index</var>] to <var>point</var> - <var>o</var>×<var>t</var> + <var>y</var>×<var>n</var>. </li> <li> Let <var>r</var> be the angle from the positive x-axis to the tangent. </li> <li> Set the angle value in <var>result</var>[<var>index</var>] to <var>angle</var> + <var>r</var>. </li> </ol> </dd> <dt>false</dt> <dd> <ol> <li> Let <var>n</var> be the normal unit vector pointing in the direction <var>t</var> - 90°. </li> <li> Let <var>o</var> be the vertical distance from the horizontal center line of the glyph to the alignment point. </li> <li> Then set the position in <var>result</var>[<var>index</var>] to <var>point</var> - <var>o</var>×<var>t</var> + <var>x</var>×<var>n</var>. </li> <li> Let <var>r</var> be the angle from the positive y-axis to the tangent. </li> <li> Set the angle value in <var>result</var>[<var>index</var>] to <var>angle</var> + <var>r</var>. </li> </ol> </dd> </dl> </li> </ol> </li> </ol> </li> <li> Otherwise, the "middle" flag of <var>result</var>[<var>index</var>] is true: <ol> <li> Set the position and angle values of <var>result</var>[<var>index</var>] to those in <var>result</var>[<var>index</var> − 1]. </li> </ol> </li> </ol> </li> <li> If the character at index <var>i</var> is not within a ‘<a href="text.html#TextPathElement">textPath</a>’ element and corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, then: This sets the starting point for rendering any characters that occur after a ‘<a href="text.html#TextPathElement">textPath</a>’ element to the end of the path. <ol> <li>If the "in path" flag is true: <ol> <li> Set the "in path" flag to false. </li> <li> Set the "after path" flag to true. </li> <li> Set <var>path_end</var> equal to the end point of the path referenced by ‘<a href="text.html#TextPathElement">textPath</a>’ − the position of <var>result</var>[<var>index</var>]. </li> </ol> </li> <li> If the "after path" is true. <ol> <li> If <var>anchored chunk</var> of <var>result</var>[<var>index</var>] is true, set the "after path" flag to false. </li> <li> Else, let <var>result.x</var>[<var>index</var>] = <var>result.x</var>[<var>index</var>] + <var>path_end.x</var> and <var>result.y</var>[<var>index</var>] = <var>result.y</var>[<var>index</var>] + <var>path_end.y</var>. </li> </ol> </li> </ol> </li> <li> Set <var>index</var> = <var>index</var> + 1. </li> </ol> </li> </ol> </li> <li> Return <var>result</var> </li> </ol> </div> <hr/> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Align with CSS for text layout functionality.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/07/29-svg-minutes.html#item08">SVG 2 Will use CSS3 definitions for text layout (white space, bidi, etc.) that is not specific to SVG.</a></td> </tr> <tr> <th>Purpose:</th> <td>To facilitate shared specification and implementation of text layout in HTML and SVG.</td> </tr> <tr> <th>Owner:</th> <td>Cameron and Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3004">ACTION-3004</a>, <a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3005">ACTION-3005</a>)</td> </tr> </table> </div> <h2 id="TextLayoutPre" class="heading">11.6. Pre-formatted text<a class="self-link" href="#TextLayoutPre"></a></h2> This option corresponds to basic SVG 1.1 text layout. This is the default text layout method and is used in the absence of an explicitly defined <a href="text.html#TermContentArea">content area</a>. It is also used as a first step in laying out text on a path (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 href="text.html#TermContentArea">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> Use a single ‘<a href="text.html#TextElement">text</a>’ element with <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> set to pre or pre-line. Line spacing is set by <a class="property" href="text.html#LineHeightProperty">line-height</a>. New in SVG 2. </li> <li> Use a single ‘<a href="text.html#TextElement">text</a>’ element with one or more ‘<a href="text.html#TextElement">tspan</a>’ child elements with appropriate values for attributes ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ to set new start positions for those characters which start new lines. </li> <li> Use multiple ‘<a href="text.html#TextElement">text</a>’ elements, one for each line of text. (Not recommended as this may prevent selection across multiple lines of text -- see <a href="text.html#TextSelection">Text selection and clipboard operations</a>.) </li> </ul> The following properties do not apply to pre-formatted text: <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-last-property">text-align-last</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#line-break-property">line-break</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#word-break-property">word-break</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#hyphens-property">hyphens</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">word-wrap</a>, and <a class="property" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">overflow-wrap</a>. <h3 id="TextLayoutPreMultiline" class="heading">11.6.1. Multi-line text via 'white-space'<a class="self-link" href="#TextLayoutPreMultiline"></a></h3> Multi-line pre-formatted text may be created by using the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> values pre or pre-line. In these cases, a line-feed or carriage return is preserved as a forced line break which creates a new <a href="text.html#TermLineBox">line box</a>. The <a href="text.html#TermLineBox">line boxes</a> are stacked following the rules of CSS. <h3 id="TextLayoutPreAdjustments" class="heading">11.6.2. Repositioning Glyphs<a class="self-link" href="#TextLayoutPreAdjustments"></a></h3> After text is laid out according to the basic CSS text layout rules, <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> can be repositioned using SVG specific rules. Absolute repositioning can be prescribed by giving absolute coordinates in the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes or by forced line breaks. Absolute repositioning may be influenced by the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property. Relative repositioning can be prescribed by giving relative coordinates in the ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">dy</a>’ attributes. The <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> may be arbitrarily rotated by giving a list of values in the ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attribute. Absolute repositioning (including any adjustment due to the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property) is done before relative repositioning and rotation. <h2 id="TextLayoutAuto" class="heading">11.7. Auto-wrapped text<a class="self-link" href="#TextLayoutAuto"></a></h2> Text is automatically wrapped when a <a href="text.html#TermContentArea">content area</a> is specified in the ‘<a href="text.html#TextElement">text</a>’ element. The <a href="text.html#TermContentArea">content area</a> defines the outermost container for wrapping text. A <a href="text.html#TermWrappingContext">wrapping context</a> (set of exclusion areas) may also be given. The actual <a href="text.html#TermWrappingArea">wrapping area</a> is defined by subtracting the <a href="text.html#TermWrappingContext">wrapping context</a> from the <a href="text.html#TermContentArea">content area</a>. The <a href="text.html#TermWrappingContext">wrapping context</a> may also be reduced by the value of the <a class="property" href="text.html#TextShapePadding">shape-padding</a> property. The effective area of an exclusion may be enlarged by the value of the <a class="property" href="text.html#TextShapeMargin">shape-margin</a> property. In the case where the <a href="text.html#TermContentArea">content area</a> is defined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property, the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes corresponding to the first rendered <a href="text.html#TermTypographicCharacterUnit">typographic character</a> define the initial <a href="text.html#TermCurrentTextPosition">current text position</a>. When the <a href="text.html#TermContentArea">content area</a> is inside a <a href="shapes.html#TermShapeElement">shape</a>, the initial <a href="text.html#TermCurrentTextPosition">current text position</a> is determined from the position of the first rendered <a href="text.html#TermTypographicCharacterUnit">typographic character</a> after laying out the first line box inside the shape. Except when used to determine the initial <a href="text.html#TermCurrentTextPosition">current text position</a>, all values ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ are ignored on ‘<a href="text.html#TextElement">text</a>’, and ‘<a href="text.html#TextElement">tspan</a>’ elements in auto-wrapped text. The attributes ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ can provide a natural fallback mechanism for SVG1.1 renderers for wrapped text. Content producers may wish to pre-layout text by breaking up lines into ‘<a href="text.html#TextElement">tspan</a>’ elements with ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes. Then, for example, if a fallback font is used to render the text, an SVG2 renderer will ignore the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes and reflow the text using the font metrics of the fallback font. An SVG1.1 renderer will use the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes in rendering the text which will usually result in readable text even if the rendering doesn't match the shape. Many of the text wrapping examples in this section rely on this mechanism to render text in browsers that have not implemented text wrapping. <h3 id="TextLayoutAutoNotes" class="heading">11.7.1. Notes on Text Wrapping<a class="self-link" href="#TextLayoutAutoNotes"></a></h3> The following examples illustrate a few issues with laying out text in a shape. <h4 id="TextLayoutAutoNotesStart" class="heading">11.7.1.1. First Line Positioning<a class="self-link" href="#TextLayoutAutoNotesStart"></a></h4> Given an arbitrary shaped <a href="text.html#TermWrappingArea">wrapping area</a>, the first <a href="text.html#TermLineBox">line box</a> may not fit flush against the top (or side for vertical text). In this case, the first <a href="text.html#TermLineBox">line box</a> is shifted until it fits. In CSS, the edge of a shape is treated as a series of 1 pixel × 1 pixel floats. A future CSS specification may define a line grid that could be used to control the position of the first line of text to allow alignment of text between different <a href="text.html#TermWrappingArea">wrapping areas</a>. <div class="figure"> <img class="bordered" src="images/text/text-layout-firstline.svg" alt="Image showing two lines of text, the first line is 'The' and the next line is 'first line'."/> The top <a href="text.html#TermLineBox">line box</a> (small light-blue rectangle), consisting of the smallest possible block of text, is moved down until the <a href="text.html#TermLineBox">line box</a> fits inside the <a href="text.html#TermWrappingArea">wrapping area</a> (light-blue path). Note, the <a href="text.html#TermLineBox">line box</a> includes the effect of the <a class="property" href="text.html#LineHeightProperty">line-height</a> property, here set to 1.25. The red rectangles tightly wrap the glyphs in each <a href="text.html#TermLineBox">line box</a>. </div> This appears to be different from the SVG 1.2 draft in which the top of the wrapping area served as the origin of a line grid. The first line was moved down by the line height until it fit inside the shape. <h4 id="TextLayoutAutoNotesBrokenLines" class="heading">11.7.1.2. Broken Lines<a class="self-link" href="#TextLayoutAutoNotesBrokenLines"></a></h4> Given an arbitrary shaped <a href="text.html#TermWrappingArea">wrapping area</a>, a single line of text might be broken into more than one part. In this case, a <a href="text.html#TermLineBox">line box</a> for each part is created. The height of all <a href="text.html#TermLineBox">line boxes</a> in a single line of text must be the same (ensuring all parts have the same baseline). This height is calculated by looking at all glyphs in the line of text. This default behavior was agreed to at the CSS/SVG joint working group meeting in Sydney 2016. A future CSS specification may allow one to control which parts of a shape broken into different parts is filled (e.g, fill only the right most parts, fill only the left most parts, etc.). <div class="figure"> <img class="bordered" src="images/text/text-layout-brokenline.svg" alt="Image showing text laidout inside a 'V' shape."/> The top line is split into two <a href="text.html#TermLineBox">line boxes</a> (light-blue rectangles), text in each <a href="text.html#TermLineBox">line box</a> is centered inside the box (due to 'text-align:center'). </div> <h2 id="TextLayoutPath" class="heading">11.8. Text on a path<a class="self-link" href="#TextLayoutPath"></a></h2> SVG can place text along a path defined either by a ‘<a href="paths.html#PathElement">path</a>’ element or the path equivalent of a <a href="shapes.html#TermBasicShapeElement">basic shape</a>. This is specified by including text within a ‘<a href="text.html#TextPathElement">textPath</a>’ element that has either an ‘<a href="text.html#TextPathElementHrefAttribute">href</a>’ attribute with an <a href="linking.html#TermURLReference">URL reference</a> pointing to a ‘<a href="paths.html#PathElement">path</a>’ element or <a href="shapes.html#TermBasicShapeElement">basic shape</a>, or by specifying a value for the ‘<a href="text.html#TextPathElementPathAttribute">path</a>’ attribute that specifies the path data directly. The ability to place text along a basic shape is new in SVG 2. Placing text along a basic shape was resolved at the <a href="http://www.w3.org/2015/02/12-svg-minutes.html#item05">Sydney (2015)</a> meeting. Directly using a 'd' attribute to specify the path was added to SVG 2. The 'd' attribute was renamed to 'path' by decision at the <a href="https://www.w3.org/2016/04/21-svg-minutes.html">London (2016)</a> editor's meeting at the same time 'd' was promoted to being a presentation attribute. Text on a path is conceptionally like a single line of <a href="text.html#TextLayoutPre">pre-formatted text</a> 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. <h3 id="TextPathElement" class="heading">11.8.1. The ‘textPath’ element<a class="self-link" href="#TextPathElement"></a></h3> <div class="element-summary"><div class="element-summary-name">‘<dfn data-dfn-type="element" data-export="" id="elementdef-textPath">textPath</dfn>’</div><dl><dt>Categories:</dt><dd><a href="struct.html#TermGraphicsElement">Graphics element</a>, <a href="render.html#TermRenderableElement">renderable element</a>, <a href="text.html#TermTextContentElement">text content element</a>, <a href="text.html#TermTextContentChildElement">text content child element</a></dd><dt>Content model:</dt><dd>Any number of the following elements or character data, in any order:<ul class="no-bullets"><li><a href="struct.html#TermDescriptiveElement">descriptive elements</a> — ‘<a href="struct.html#DescElement">desc</a>’, ‘<a href="struct.html#TitleElement">title</a>’, ‘<a href="struct.html#MetadataElement">metadata</a>’</li><li><a href="painting.html#TermPaintServerElement">paint server elements</a> — ‘<a href="pservers.html#LinearGradientElement">linearGradient</a>’, ‘<a href="pservers.html#RadialGradientElement">radialGradient</a>’, ‘<a href="pservers.html#PatternElement">pattern</a>’</li></ul><a href="linking.html#AElement">a</a>, <a href="https://svgwg.org/specs/animations/#AnimateElement">animate</a>, <a href="https://drafts.fxtf.org/css-masking-1/#ClipPathElement">clipPath</a>, <a href="painting.html#MarkerElement">marker</a>, <a href="https://drafts.fxtf.org/css-masking-1/#MaskElement">mask</a>, <a href="interact.html#ScriptElement">script</a>, <a href="https://svgwg.org/specs/animations/#SetElement">set</a>, <a href="styling.html#StyleElement">style</a>, <a href="text.html#TextElement">tspan</a></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="struct.html#TermARIAAttribute">aria attributes</a> — ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant">aria-activedescendant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-autocomplete">aria-autocomplete</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy">aria-busy</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-checked">aria-checked</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colcount">aria-colcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colindex">aria-colindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-colspan">aria-colspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-controls">aria-controls</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current">aria-current</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details">aria-details</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-dropeffect">aria-dropeffect</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage">aria-errormessage</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-flowto">aria-flowto</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-grabbed">aria-grabbed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-invalid">aria-invalid</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-level">aria-level</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-modal">aria-modal</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiline">aria-multiline</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable">aria-multiselectable</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-orientation">aria-orientation</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-owns">aria-owns</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-placeholder">aria-placeholder</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-readonly">aria-readonly</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription">aria-roledescription</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowcount">aria-rowcount</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowindex">aria-rowindex</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-rowspan">aria-rowspan</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-sort">aria-sort</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">aria-valuenow</a>’, ‘<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext">aria-valuetext</a>’, ‘<a href="struct.html#RoleAttribute">role</a>’</li><li><a href="struct.html#TermConditionalProcessingAttribute">conditional processing attributes</a> — ‘<a href="struct.html#RequiredExtensionsAttribute">requiredExtensions</a>’, ‘<a href="struct.html#SystemLanguageAttribute">systemLanguage</a>’</li><li><a href="struct.html#TermCoreAttribute">core attributes</a> — ‘<a href="struct.html#IDAttribute">id</a>’, ‘<a href="struct.html#SVGElementTabindexAttribute">tabindex</a>’, ‘<a href="struct.html#SVGElementAutofocusAttribute">autofocus</a>’, ‘<a href="struct.html#LangAttribute">lang</a>’, ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’, ‘<a href="styling.html#ClassAttribute">class</a>’, ‘<a href="styling.html#StyleAttribute">style</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers">global event attributes</a> — ‘<a href="interact.html#EventAttributes">oncancel</a>’, ‘<a href="interact.html#EventAttributes">oncanplay</a>’, ‘<a href="interact.html#EventAttributes">oncanplaythrough</a>’, ‘<a href="interact.html#EventAttributes">onchange</a>’, ‘<a href="interact.html#EventAttributes">onclick</a>’, ‘<a href="interact.html#EventAttributes">onclose</a>’, ‘<a href="interact.html#EventAttributes">oncuechange</a>’, ‘<a href="interact.html#EventAttributes">ondblclick</a>’, ‘<a href="interact.html#EventAttributes">ondrag</a>’, ‘<a href="interact.html#EventAttributes">ondragend</a>’, ‘<a href="interact.html#EventAttributes">ondragenter</a>’, ‘<a href="interact.html#EventAttributes">ondragexit</a>’, ‘<a href="interact.html#EventAttributes">ondragleave</a>’, ‘<a href="interact.html#EventAttributes">ondragover</a>’, ‘<a href="interact.html#EventAttributes">ondragstart</a>’, ‘<a href="interact.html#EventAttributes">ondrop</a>’, ‘<a href="interact.html#EventAttributes">ondurationchange</a>’, ‘<a href="interact.html#EventAttributes">onemptied</a>’, ‘<a href="interact.html#EventAttributes">onended</a>’, ‘<a href="interact.html#EventAttributes">onerror</a>’, ‘<a href="interact.html#EventAttributes">onfocus</a>’, ‘<a href="interact.html#EventAttributes">oninput</a>’, ‘<a href="interact.html#EventAttributes">oninvalid</a>’, ‘<a href="interact.html#EventAttributes">onkeydown</a>’, ‘<a href="interact.html#EventAttributes">onkeypress</a>’, ‘<a href="interact.html#EventAttributes">onkeyup</a>’, ‘<a href="interact.html#EventAttributes">onload</a>’, ‘<a href="interact.html#EventAttributes">onloadeddata</a>’, ‘<a href="interact.html#EventAttributes">onloadedmetadata</a>’, ‘<a href="interact.html#EventAttributes">onloadstart</a>’, ‘<a href="interact.html#EventAttributes">onmousedown</a>’, ‘<a href="interact.html#EventAttributes">onmouseenter</a>’, ‘<a href="interact.html#EventAttributes">onmouseleave</a>’, ‘<a href="interact.html#EventAttributes">onmousemove</a>’, ‘<a href="interact.html#EventAttributes">onmouseout</a>’, ‘<a href="interact.html#EventAttributes">onmouseover</a>’, ‘<a href="interact.html#EventAttributes">onmouseup</a>’, ‘<a href="interact.html#EventAttributes">onpause</a>’, ‘<a href="interact.html#EventAttributes">onplay</a>’, ‘<a href="interact.html#EventAttributes">onplaying</a>’, ‘<a href="interact.html#EventAttributes">onprogress</a>’, ‘<a href="interact.html#EventAttributes">onratechange</a>’, ‘<a href="interact.html#EventAttributes">onreset</a>’, ‘<a href="interact.html#EventAttributes">onresize</a>’, ‘<a href="interact.html#EventAttributes">onscroll</a>’, ‘<a href="interact.html#EventAttributes">onseeked</a>’, ‘<a href="interact.html#EventAttributes">onseeking</a>’, ‘<a href="interact.html#EventAttributes">onselect</a>’, ‘<a href="interact.html#EventAttributes">onshow</a>’, ‘<a href="interact.html#EventAttributes">onstalled</a>’, ‘<a href="interact.html#EventAttributes">onsubmit</a>’, ‘<a href="interact.html#EventAttributes">onsuspend</a>’, ‘<a href="interact.html#EventAttributes">ontimeupdate</a>’, ‘<a href="interact.html#EventAttributes">ontoggle</a>’, ‘<a href="interact.html#EventAttributes">onvolumechange</a>’, ‘<a href="interact.html#EventAttributes">onwaiting</a>’, ‘<a href="interact.html#EventAttributes">onwheel</a>’</li><li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers">document element event attributes</a> — ‘<a href="interact.html#EventAttributes">oncopy</a>’, ‘<a href="interact.html#EventAttributes">oncut</a>’, ‘<a href="interact.html#EventAttributes">onpaste</a>’</li><li><a href="styling.html#TermPresentationAttribute">presentation attributes</a> — </li><li><a href="linking.html#XLinkRefAttrs">deprecated xlink attributes</a> — ‘<a href="linking.html#XLinkHrefAttribute">xlink:href</a>’, ‘<a href="linking.html#XLinkTitleAttribute">xlink:title</a>’</li><li>‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’</li><li>‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’</li><li>‘<a href="text.html#TextPathElementPathAttribute">path</a>’</li><li>‘<a href="text.html#TextPathElementHrefAttribute">href</a>’</li><li>‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’</li><li>‘<a href="text.html#TextPathElementMethodAttribute">method</a>’</li><li>‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’</li><li>‘<a href="text.html#TextPathElementSideAttribute">side</a>’</li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="text.html#InterfaceSVGTextPathElement">SVGTextPathElement</a></li></ul></dd></dl></div> <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 method="stretch" on >'textPath' 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> Both the ‘<a href="text.html#TextPathElementPathAttribute">path</a>’ attribute and the ‘<a href="text.html#TextPathElementHrefAttribute">href</a>’ attribute specify a path along which the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> will be rendered. If both attributes are specified on a ‘<a href="text.html#TextPathElement">textPath</a>’ element, the path that is used must follow the following order of precedence: <ol> <li>‘<a href="text.html#TextPathElementPathAttribute">path</a>’ attribute</li> <li>‘<a href="text.html#TextPathElementHrefAttribute">href</a>’ attribute</li> <li>‘<a href="linking.html#XLinkHrefAttribute">xlink:href</a>’ attribute</li> </ol> If the ‘<a href="text.html#TextPathElementPathAttribute">path</a>’ attribute contains an error, the ‘<a href="text.html#TextPathElementHrefAttribute">href</a>’ attribute must be used. <h3 id="TextPathAttributes" class="heading">11.8.2. Attributes<a class="self-link" href="#TextPathAttributes"></a></h3> <dl class="attrdef-list-svg2"> <dt id="TextPathElementStartOffsetAttribute">startOffset</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, after converting the path to the ‘<a href="text.html#TextPathElement">textPath</a>’ element's coordinate system. If a <a href="https://www.w3.org/TR/css3-values/#lengths"><length></a> other than a percentage is given, then the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ represents a distance along the path measured in the current user coordinate system for the ‘<a href="text.html#TextPathElement">textPath</a>’ element. If a percentage is given, then the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ represents a percentage distance along the entire path. Thus, startOffset="0%" indicates the start point of the path and startOffset="100%" indicates the end point of the path. Negative values and values larger than the path length (e.g. 150%) are allowed. Limiting values to the range 0%-100% prevents easily creating effects like text moving along the path. Any <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> with mid-points that are not on the path are not rendered. <div class="figure"> <img alt="Three paths with various values of 'startOffset' showing clipping when glyphs are outside path region." src="images/text/text-path-startoffset.svg"/> Rendering for different values of the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ attribute. From top to bottom: default value, 50%, -50%. The bottom path should show only "path." on the left side of the path. Chrome and Safari both do not handle offsets outside the range 0% to 100%. Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=476554 </div> For paths consisting of a single <a href="paths.html#TermOpenSubpath">closed subpath</a> (including an equivalent path for a <a href="shapes.html#TermBasicShapeElement">basic shape</a>), <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> are rendered along one complete circuit of the path. The text is aligned as determined by the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property to a position along the path set by the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ attribute. For the start (end) value, the text is rendered from the start (end) of the line until the initial position along the path is reached again. For the middle, the text is rendered from the middle point in both directions until a point on the path equal distance in both directions from the initial position on the path is reached. <div class="figure"> <img alt="Two circular path with different values of 'startOffset' showing that all glyphs are rendered." src="images/text/text-path-startoffset2.svg"/> Rendering for text on a path referencing a ‘<a href="shapes.html#CircleElement">circle</a>’ with different values of the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ attribute. Left: 0. Right: 75% or -25%. The red circle marks the beginning of the path (after the canonical decomposition of the circle into a path). </div> <div class="figure"> <img alt="Three circular path with different values of 'text-anchor' showing how glyphs are rendered." src="images/text/text-path-startoffset3.svg"/> Rendering for text on a path referencing a ‘<a href="shapes.html#CircleElement">circle</a>’ with different values of the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> attribute. Left: 'start'. Middle: 'middle'. Right: 'end'. The red circles marks the beginning of the path (after the canonical decomposition of the circle into a path). The blue square marks the reference point for the start of rendering (shifted from the path start by a ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ value of 75%). The gray arrow(s) shows the direction of <a href="text.html#TermTypographicCharacterUnit">typographic character</a> placement and the point at which <a href="text.html#TermTypographicCharacterUnit">typographic character</a> placement stops. The arrow(s) would be reversed if the <a class="property" href="text.html#DirectionProperty">direction</a> property has a value of rtl. </div> Rendering all glyphs was agreed to for basic shapes at the <a href="http://www.w3.org/2015/02/12-svg-minutes.html#item05">Sydney (2015)</a> meeting (but missing in minutes). Limiting the wrapping to a path with a single closed sub-path and to one loop, effected by the 'startOffset' attribute agreed to at the <a href="https://www.w3.org/2016/04/22-svg-minutes.html#item02">London (2016)</a> Editor's Meeting. <dl class="attrdef-svg2"> <dt>Value</dt> <dd><a href="https://www.w3.org/TR/css-values/#typedef-length-percentage"><length-percentage></a> | <a href="https://www.w3.org/TR/css3-values/#numbers"><number></a></dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>0</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> <dt id="TextPathElementMethodAttribute">method</dt> <dd> Indicates the method by which text should be rendered along the path. A value of align indicates that the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> should be rendered using simple 2×3 matrix transformations such that there is no stretching/warping of the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a>. Typically, supplemental rotation, scaling and translation transformations are done for each <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> to be rendered. As a result, with align, in fonts where the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> are designed to be connected (e.g., cursive fonts), the connections may not align properly when text is rendered along a path. A value of stretch indicates that the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> 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 <a href="text.html#TermTypographicCharacterUnit">typographic characters</a>, such as in cursive scripts, will maintain their connections. (Non-vertical straight path segments should be converted to Bézier curves in such a way that horizontal straight paths have an (approximately) constant offset from the path along which the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> are rendered.) <div class="figure"> <img alt="English and Arabic text on arcs." src="images/text/text-path-method.png"/> Rendering of text on a path for different ‘<a href="text.html#TextPathElementMethodAttribute">method</a>’ values: Left: 'align'. Right: 'stretch'. </div> <dl class="attrdef-svg2"> <dt>Value</dt> <dd>align | stretch</dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>align</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> <dt id="TextPathElementSpacingAttribute">spacing</dt> <dd> Indicates how the user agent should determine the spacing between <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> that are to be rendered along a path. A value of exact indicates that the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> should be rendered exactly according to the spacing rules as specified in <a href="text.html#TextpathLayoutRules">Text on a path layout rules</a>. A value of auto indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> in order to achieve visually appealing results. <dl class="attrdef-svg2"> <dt>Value</dt> <dd>auto | exact</dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>exact</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> <dt id="TextPathElementSideAttribute">side</dt> <dd> Determines the side of the path the text is placed on (relative to the path direction). Specifying a value of right effectively reverses the path. <div class="figure"> <img alt="Two circular path with different values of 'side' showing glyphs rendered outside the circle for 'left' and inside the circle for 'right'." src="images/text/text-path-side.svg"/> Rendering for text on a path referencing a ‘<a href="shapes.html#CircleElement">circle</a>’ with different values of the ‘<a href="text.html#TextPathElementSideAttribute">side</a>’ attribute. Left: left. Right: right. </div> Added in SVG 2 to allow text either inside or outside <a href="paths.html#TermOpenSubpath">closed subpaths</a> and <a href="shapes.html#TermBasicShapeElement">basic shapes</a> (e.g. rectangles, circles, and ellipses). Adding 'side' was resolved at the <a href="http://www.w3.org/2015/02/12-svg-minutes.html#item05">Sydney (2015)</a> meeting. <dl class="attrdef-svg2"> <dt>Value</dt> <dd>left | right</dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>left</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> <dt id="TextPathElementPathAttribute">path</dt> <dd> A <a href="paths.html#PathDataBNF" class="syntax">path data</a> string describing the path onto which the <a href="text.html#TermTypographicCharacterUnit">typographic characters</a> will be rendered. An empty string indicates that there is no path data for the element. This means that the text within the ‘<a href="text.html#TextPathElement">textPath</a>’ does not render or contribute to the <a href="coords.html#TermBoundingBox">bounding box</a> of the ‘<a href="text.html#TextElement">text</a>’ element. If the attribute is not specified, the path specified with ‘<a href="text.html#TextPathElementHrefAttribute">href</a>’ is used instead. <dl class="attrdef-svg2"> <dt>Value</dt> <dd><a href="paths.html#PathDataBNF" class="syntax">path data</a></dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>(none)</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> <dt id="TextPathElementHrefAttribute">href</dt> <dd> An <a href="linking.html#URLReference">URL reference</a> to the ‘<a href="paths.html#PathElement">path</a>’ element or <a href="shapes.html#TermBasicShapeElement">basic shape</a> element onto which the glyphs will be rendered, if no ‘<a href="text.html#TextPathElementPathAttribute">path</a>’ attribute is provided. If the attribute is used, and the <url> is an invalid reference (e.g., no such element exists, or the referenced element is not a ‘<a href="paths.html#PathElement">path</a>’ element) or <a href="shapes.html#TermBasicShapeElement">basic shape</a>, then the ‘<a href="text.html#TextPathElement">textPath</a>’ element is in error and its entire contents shall not be rendered by the user agent. Refer to the common handling defined for <a href="linking.html#linkRefAttrs">URL reference attributes</a> and <a href="linking.html#XLinkRefAttrs">deprecated XLink attributes</a>. <dl class="attrdef-svg2"> <dt>Value</dt> <dd>URL <a href="types.html#attribute-url" class="syntax">[URL]</a></dd> <dt><a href="types.html#TermInitialValue">initial value</a></dt> <dd>See above.</dd> <dt><a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a></dt> <dd>yes</dd> </dl> </dd> </dl> The path data coordinates within the referenced ‘<a href="paths.html#PathElement">path</a>’ element or <a href="shapes.html#TermBasicShapeElement">basic shape</a> element are assumed to be in the same coordinate system as the current ‘<a href="text.html#TextElement">text</a>’ element, not in the coordinate system where the ‘<a href="paths.html#PathElement">path</a>’ element is defined. The <a class="property" href="coords.html#TransformProperty">transform</a> attribute on the referenced ‘<a href="paths.html#PathElement">path</a>’ element or <a href="shapes.html#TermBasicShapeElement">basic shape</a> element represents a supplemental transformation relative to the current user coordinate system for the current ‘<a href="text.html#TextElement">text</a>’ element, including any adjustments to the current user coordinate system due to a possible <a class="property" href="coords.html#TransformProperty">transform</a> property on the current ‘<a href="text.html#TextElement">text</a>’ element. For example, the following fragment of SVG content: <pre> <svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(25,25)"> <defs> <path id="path1" transform="scale(2)" path="M0,10 L40,20 80,10" fill="none" stroke="red"/> </defs> </g> <text transform="rotate(45)"> <textPath href="#path1">Text on a path</textPath> </text> </svg> </pre> should have the same effect as the following: <pre> <svg xmlns="http://www.w3.org/2000/svg"> <g transform="rotate(45)"> <defs> <path id="path1" transform="scale(2)" path="M0,10 L40,20 80,10" fill="none" stroke="red"/> </defs> <text> <textPath href="#path1">Text on a path</textPath> </text> </g> </svg> </pre> and be equivalent to: <pre> <svg xmlns="http://www.w3.org/2000/svg"> <text transform="rotate(45)"> <textPath path="M0,20 L80,40 160,20" >Text on a path</textPath> </text> </svg> </pre> Note that the <code style="font-weight:bold; color:red">transform="translate(25,25)"</code> has no effect on the ‘<a href="text.html#TextPathElement">textPath</a>’ element, whereas the <code style="font-weight:bold; color:blue">transform="rotate(45)"</code> applies to both the ‘<a href="text.html#TextElement">text</a>’ and the use of the ‘<a href="paths.html#PathElement">path</a>’ element as the referenced shape for text on a path. Further note that the <code style="font-weight:bold; color: green">transform="scale(2)"</code> scales the path (equivalent to multiplying every coordinate by 2 for simple linear paths), but does not scale the text placed along the path. Example toap01 provides a simple example of text on a path: <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap01 - simple text on a path</desc> <use href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath href="#MyPath"> We go up, then we go down, then up again </textPath> </text>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example toap01 — simple text on a path" src="images/text/toap01.png"/>Example toap01</div><a href="images/text/toap01.svg">View this example as SVG (SVG-enabled browsers only)</a></div> Example toap02 shows how ‘<a href="text.html#TextElement">tspan</a>’ elements can be included within ‘<a href="text.html#TextPathElement">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 href="text.html#TextElementDYAttribute">dy</a>’ is used to lift the word "up" from the baseline. The ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’, and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes can only be specified on ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements (but may effect the rendering of glyphs in text on a path — see <a href="text.html#TextpathLayoutRules">text on a path layout rules</a>). <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap02 - tspan within textPath</desc> <use href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath href="#MyPath"> We go <tspan dy="-30" fill="red" > up </tspan> <tspan dy="30"> , </tspan> then we go down, then up again </textPath> </text>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example toap02 — tspan within textPath" src="images/text/toap02.png"/>Example toap02</div><a href="images/text/toap02.svg">View this example as SVG (SVG-enabled browsers only)</a></div> Example toap03 demonstrates the use of the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ attribute on the ‘<a href="text.html#TextPathElement">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>). <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" /> </defs> <desc>Example toap03 - text on a path with startOffset attribute</desc> <use href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="42.5" fill="blue" > <textPath href="#MyPath" startOffset="80%"> We go up, then we go down, then up again </textPath> </text>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example toap03 — text on a path with startOffset attribute" src="images/text/toap03.png"/>Example toap03</div><a href="images/text/toap03.svg">View this example as SVG (SVG-enabled browsers only)</a></div> <h3 id="TextpathLayoutRules" class="heading">11.8.3. Text on a path layout rules<a class="self-link" href="#TextpathLayoutRules"></a></h3> 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#TextLayoutAlgorithm">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#TextLayoutAlgorithm">text layout</a> rules also apply to text on a path. The orientation of each glyph along a path is determined individually. For horizontal text layout flows, the default orientation (the <q>up</q> direction) for a given glyph is along 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 default orientation for a given glyph is along 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. <div class="figure"> <img class="bordered" src="images/text/glyph-textpath.svg" alt="Left, horizontal text with the character 'A' on a path. Right, vertical text with the character '字' on a path."/> Default glyph orientation along a path. Left, horizontal text. Right: vertical text. </div> Example toap04 will be used to illustrate the particular layout rules for text on a path that supplement the basic <a href="text.html#TextLayoutAlgorithm">text layout</a> rules for straight line horizontal or vertical text. <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="MyPath" d="M 100 125 C 150 125 250 175 300 175 C 350 175 450 125 500 125 C 550 125 650 175 700 175 C 750 175 850 125 900 125" /> </defs> <desc>Example toap04 - text on a path layout rules</desc> <use href="#MyPath" fill="none" stroke="red" /> <text font-family="Verdana" font-size="60" fill="blue" letter-spacing="2" > <textPath href="#MyPath"> Choose shame or get war </textPath> </text>  <rect x="1" y="1" width="998" height="298" fill="none" stroke="blue" stroke-width="2" /> </svg></pre><div class="figure"><img alt="Example toap04 — text on a path layout rules" src="images/text/toap04.png"/>Example toap04</div><a href="images/text/toap04.svg">View this example as SVG (SVG-enabled browsers only)</a></div> The following picture does an initial zoom in on the first glyph in the ‘<a href="text.html#TextElement">text</a>’ element. <img alt="Image that shows text on a path" src="images/text/toap05.png" width="288" height="91"/> 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" data-dfn-type="dfn" data-export="">charwidth</dfn> (i.e., the amount which the current text position advances horizontally when the glyph is drawn using horizontal text layout). The next picture zooms in further to demonstrate the detailed layout rules. <img alt="Image that shows text on a path" src="images/text/toap06.png" width="288" height="176"/> For left-to-right horizontal text layout along a path (i.e., when the glyph orientation is perpendicular to the <a href="text.html#TermInlineBaseDirection">inline-base direction</a> the layout rules are as follows: <ul> <li> Determine the <dfn id="StartPointOnPath" data-dfn-type="dfn" data-export="">startpoint-on-the-path</dfn> for the first glyph using attribute ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ and property <a class="property" href="text.html#TextAnchorProperty">text-anchor</a>. For text-anchor:start, startpoint-on-the-path is the point on the path which represents the point on the path which is ‘<a href="text.html#TextPathElementStartOffsetAttribute">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 text-anchor:middle, startpoint-on-the-path is the point on the path which represents the point on the path which is [ ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ minus half of the total advance values for all of the glyphs in the ‘<a href="text.html#TextPathElement">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 text-anchor:end, startpoint-on-the-path is the point on the path which represents the point on the path which is [ ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ minus the total advance values for all of the glyphs in the ‘<a href="text.html#TextPathElement">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 href="text.html#TextElementDXAttribute">dx</a>’ attribute value on a ‘<a href="text.html#TextElement">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" data-dfn-type="dfn" data-export="">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" data-dfn-type="dfn" data-export="">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" data-dfn-type="dfn" data-export="">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 class="property" href="text.html#AlignmentBaselineProperty">alignment-baseline</a> and any specified values for attribute ‘<a href="text.html#TextElementDYAttribute">dy</a>’ on a ‘<a href="text.html#TextElement">tspan</a>’ element. In the example above, the <a class="property" href="text.html#AlignmentBaselineProperty">alignment-baseline</a> property is unspecified, so the initial value of alignment-baseline:baseline will be used. There are no ‘<a href="text.html#TextElement">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 spacing properties (e.g. <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> and <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a>) and ‘<a href="text.html#TextElement">tspan</a>’ elements with values provided for attributes ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">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 the path are not rendered. </li> <li> Continue rendering glyphs until there are no more glyphs (or no more space on path). </li> </ul> 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#TermInlineBaseDirection">inline-base direction</a>, the layout rules are as follows: <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 href="text.html#TextElementDYAttribute">dy</a>’ attribute value on a ‘<a href="text.html#TextElement">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 class="property" href="text.html#AlignmentBaselineProperty">alignment-baseline</a> and any specified values for attribute ‘<a href="text.html#TextElementDXAttribute">dx</a>’ on a ‘<a href="text.html#TextElement">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 spacing properties and ‘<a href="text.html#TextElement">tspan</a>’ elements with values provided for attributes ‘<a href="text.html#TextElementDXAttribute">dx</a>’ and ‘<a href="text.html#TextElementDYAttribute">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 an <a href="paths.html#TermClosedSubpath">open subpath</a> are not rendered. </li> <li> Continue rendering glyphs until there are no more glyphs. </li> </ul> 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. When the <a href="text.html#TermInlineBaseDirection">inline-base direction</a> is horizontal, then any ‘x’ attributes on ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path. Any ‘y’ attributes on ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ elements are ignored. When the <a href="text.html#TermInlineBaseDirection">inline-base direction</a> is vertical, then any ‘y’ attributes on ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path. Any ‘x’ attributes on ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ elements are ignored. After positioning all characters within the ‘<a href="text.html#TextPathElement">textPath</a>’, the <a href="text.html#TermCurrentTextPosition">current text position</a> is set to the end point of the path, after adjusting for the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ in the case of paths that are a single closed loop. In other words, text that follows a ‘<a href="text.html#TextPathElement">textPath</a>’ element (but is still inside a ‘<a href="text.html#TextElement">text</a>’ element) that does not have explicit positioning information (‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes) is positioned from the end of the path. <div class="figure"> <img alt="Text on a path showing the starting point for rendering text after the <textPath> element." src="images/text/text-path-nonpath-text.svg"/> The starting point for text after the ‘<a href="text.html#TextPathElement">textPath</a>’ element without explicit positioning information is at the end of the path (red dot). </div> The choice of the end of the path over the position of the last character was chosen as it is more author predictable (not depending on font, etc.) Decided at the <a href="https://www.w3.org/2016/04/22-svg-minutes.html#item08">London (2016)</a> editor's meeting. See also <a href="https://github.com/w3c/svgwg/issues/104">GitHub Issue 84</a>. <h2 id="TextRenderingOrder" class="heading">11.9. Text rendering order<a class="self-link" href="#TextRenderingOrder"></a></h2> A ‘<a href="text.html#TextElement">text</a>’ element is rendered in one or more chunks. Each chunk (as produced by the <a href="#TextLayoutAlgorithm">text layout algorithm</a>) is rendered, one after the other, in document order. Each rendered chunk, which consists of one or more glyphs, is filled and stroked as if it were a single path. This means that all glyphs in the chunk should be filled, then all glyphs stroked at once, or the reverse according to the value of the <a class="property" href="painting.html#PaintOrderProperty">paint-order</a> property. For the purposes of painting, a ‘<a href="text.html#TextElement">text</a>’ has zero, one, or more <a href="paths.html#TermEquivalentPath">equivalent paths</a>, one for each chunk. Each equivalent path consists of one subpath per glyph within that chunk. Since the <a class="property" href="painting.html#FillRuleProperty">fill-rule</a> property does not apply to SVG text elements, the specific order of the subpaths within the <a href="paths.html#TermEquivalentPath">equivalent path</a> does not matter. The specific position of the start of each subpath, and the direction that the path progresses around glyph shape, is not defined. However, user agents should be consistent for a given font and glyph. This means that dashed strokes on text may not place the dash pattern at the same positions across different implementations. <h2 id="TextProperties" class="heading">11.10. Properties and pseudo-elements<a class="self-link" href="#TextProperties"></a></h2> CSS offers a multitude of properties for styling text. In general, only two sets of properties are applicable to SVG: those that determine which glyphs are to be rendered (<a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-family-prop">font-family</a>, <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-style-prop">font-style</a>, etc.) and those that apply at the paragraph level (<a class="property" href="text.html#DirectionProperty">direction</a>, <a class="property" href="text.html#WritingModeProperty">writing-mode</a>, <a class="property" href="text.html#LineHeightProperty">line-height</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a>, etc.). The list of CSS properties that must be supported on SVG text elements can be found in the <a href="styling.html#RequiredProperties">Styling</a> chapter. <ul> <li> Properties that apply only to pre-formatted text and auto-wrapped text where the <a href="text.html#TermWrappingArea">wrapping area</a> is defined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property: <a class="property" href="text.html#TextAnchorProperty">text-anchor</a>. </li> <li> Properties that apply only to auto-wrapped text except for text where the <a href="text.html#TermWrappingArea">wrapping area</a> is defined by the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property: <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-last-property">text-align-last</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#text-justify-property">text-justify</a>, </li> <li> Properties that apply only to auto-wrapped text: <a class="property" href="https://www.w3.org/TR/css-text-3/#text-indent-property">text-indent</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#line-break-property">line-break</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#word-break-property">word-break</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#hyphens-property">hyphens</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">word-wrap</a>, <a class="property" href="https://www.w3.org/TR/css-text-3/#overflow-wrap-property">overflow-wrap</a>. </li> </ul> Additionally, the @font-face rule must be supported for font selection as well as the ::first-line and ::first-letter pseudo-elements must be supported on ‘<a href="text.html#TextElement">text</a>’ elements. In interactive modes, the ::selection pseudo-element must also be supported. Other CSS properties that affect text layout and rendering may also be supported by an SVG user agent; their effect should be taken into account as part of the CSS text layout step of the overall SVG text layout process. For example, while SVG 2 does not require support for the <a class="property" href="https://www.w3.org/TR/css-writing-modes-3/#text-combine-upright">text-combine-upright</a> property, its behavior in an SVG context should be obvious. A number of CSS properties must not have any effect on SVG text elements: <ul> <li> Border properties (such as <a class="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-style">border-top-style</a>). Boxes generated by the CSS layout process must not be sized as if they had any borders. The used value for all of the <a class="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style">border-style</a> component longhand properties on SVG text elements is none. </li> <li> Display property values other than none and inline. Like all other SVG elements, any value of <a class="property" href="render.html#VisibilityControl">display</a> on an SVG text element other than none is handled just as if it were inline. Thus it is not possible for a single ‘<a href="text.html#TextElement">text</a>’ element to have any block children. </li> <li> The <a class="property" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-float">float</a> property, whose used value on SVG text elements is none. </li> <li> The <a class="property" href="https://www.w3.org/TR/css-position-3/#propdef-position">position</a> property, whose used value on SVG text elements is static. </li> <li> Margin properties (such as <a class="property" href="https://www.w3.org/TR/css-box-3/#propdef-margin-top">margin-top</a>), whose used values on SVG text elements are 0. </li> <li> The <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a> property when text is pre-formatted, whose used value on such SVG text elements is start. </li> <li> The <a class="property" href="https://www.w3.org/TR/css-content-3/#propdef-content">content</a> property, whose used value on SVG text elements is none. </li> </ul> Additionally, the ::before and ::after generated content pseudo-elements must not apply to SVG text elements. A future specification may introduce support for the ::before and ::after generated content pseudo-elements; authors should not rely on them being ignored. <h3 id="TextPropertiesSVG" class="heading">11.10.1. SVG properties<a class="self-link" href="#TextPropertiesSVG"></a></h3> This section covers properties that are not covered elsewhere in this specification and that are specific to SVG. <h4 id="TextAnchoringProperties" class="heading">11.10.1.1. Text alignment, the ‘text-anchor’ property<a class="self-link" href="#TextAnchoringProperties"></a></h4> The <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the <a href="text.html#TermWrappingArea">wrapping area</a> is determined from the <a class="property" href="text.html#InlineSizeProperty">inline-size</a> property relative to a given point. It is not applicable to other types of auto-wrapped text, see instead <a class="property" href="https://www.w3.org/TR/css-text-3/#text-align-property">text-align</a>. For multi-line text, the alignment takes place for each line. The <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property is applied to each individual <a href="text.html#TermTextChunk">text chunk</a> within a given ‘<a href="text.html#TextElement">text</a>’ element. Each text chunk has an initial <a href="text.html#TermCurrentTextPosition">current text position</a>, which represents the point in the user coordinate system resulting from (depending on context) application of the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes on the ‘<a href="text.html#TextElement">text</a>’ element, any ‘<a href="text.html#TextElementXAttribute">x</a>’ or ‘<a href="text.html#TextElementYAttribute">y</a>’ attribute values on a ‘<a href="text.html#TextElement">tspan</a>’ element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a ‘<a href="text.html#TextPathElement">textPath</a>’ element. Each text chunk also has a final <a href="text.html#TermCurrentTextPosition">current text position</a> which is the <a href="text.html#TermCurrentTextPosition">current text position</a> after placing the last glyph in the <a href="text.html#TermTextChunk">text chunk</a>. The positions are determined before applying the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property. <table class="propdef def"> <tr> <th>Name:</th> <td><dfn id="TextAnchorProperty" data-dfn-type="property" data-export="">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 href="text.html#TermTextContentElement">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 href="https://www.w3.org/TR/web-animations-1/#animation-type">Animation type</a>:</th> <td>discrete</td> </tr> </table> Values have the following meanings: <dl> <dt>start</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 class="property" href="text.html#DirectionProperty">direction</a> property value of "ltr" (typical for most European languages), the left side of the text is rendered at the initial text position. For an element with a <a class="property" href="text.html#DirectionProperty">direction</a> property value of "rtl" (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>middle</dt> <dd> The rendered characters are shifted such that the geometric middle of the resulting rendered text (determined from the initial and final <a href="text.html#TermCurrentTextPosition">current text position</a> before applying the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property) is at the initial current text position. </dd> <dt>end</dt> <dd> The rendered characters are shifted such that the end of the resulting rendered text (final <a href="text.html#TermCurrentTextPosition">current text position</a> before applying the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property) is at the initial current text position. For an element with a <a class="property" href="text.html#DirectionProperty">direction</a> property value of "ltr" (typical for most European languages), the right side of the text is rendered at the initial text position. For an element with a <a class="property" href="text.html#DirectionProperty">direction</a> property value of "rtl" (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"> An example of using <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> on multi-line text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"> <text x="150" y="30" style="font: 20px sans-serif; 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."/> The preserved line-feed creates two <a href="text.html#TermTextChunk">text chunks</a>, each anchored independently. </div> </div> <div class="example"> Another example of using <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> on multi-line text. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 200 150"> <path d="m 100,0 0,150" style="fill:none;stroke:#add8e6"/> <text x="100 100 100" y="50 95 140" style="font-size: 42px; text-anchor: middle">I❤SVG</text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-anchor-chunks.svg" alt="Image showing three lines of text divided as 'I', '❤', 'SVG'."/> The text is divided into three <a href="text.html#TermTextChunk">text chunks</a> (due to the three coordinates in the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes). Each <a href="text.html#TermTextChunk">text chunk</a> is independently anchored. </div> </div> <h4 id="GlyphOrientationHorizontalProperty" class="heading">11.10.1.2. The ‘glyph-orientation-horizontal’ property<a class="self-link" href="#GlyphOrientationHorizontalProperty"></a></h4> This property has been removed in SVG 2. <h4 id="GlyphOrientationVerticalProperty" class="heading">11.10.1.3. The ‘glyph-orientation-vertical’ property<a class="self-link" href="#GlyphOrientationVerticalProperty"></a></h4> This property applies only to vertical text. It has been obsoleted in SVG 2 and partially replaced by the <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a> property of CSS Writing Modes Level 3. The following SVG 1.1 values must still be supported by aliasing the property as a shorthand to <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a> as follows: <ul> <li> 'auto' to 'mixed'; </li> <li> '0deg', and '0', to 'upright'. </li> <li> '90deg', and '90', to 'sideways'. </li> </ul> Any other values must be treated as invalid. <h4 id="KerningProperty" class="heading">11.10.1.4. The ‘kerning’ property<a class="self-link" href="#KerningProperty"></a></h4> The ‘kerning’ property has been removed in SVG 2. SVG 1.1 uses the 'kerning' property to determine if the font kerning tables should be used to adjust inter-glyph spacing. It also allows a <length> value which if given is added to the spacing between glyphs (supplemental to any from the <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> property). This property is replaced in SVG 2 by the CSS <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-kerning-prop">font-kerning</a> property which solely controls turning on/off the use of the font kerning tables. Chrome's UseCounter data showed a use of 0.01% in 2014. See GitHub issue 80. <h3 id="TextPropertiesAdaptions" class="heading">11.10.2. SVG adaptions<a class="self-link" href="#TextPropertiesAdaptions"></a></h3> This section covers CSS properties that are not covered elsewhere in this specification and have either SVG specific adaptions or are significantly altered from SVG 1.1. <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Reference CSS3 Fonts.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/07/29-svg-minutes.html#item08">SVG 2 will depend on CSS3 Fonts.</a></td> </tr> <tr> <th>Purpose:</th> <td>Alignment with CSS 2.1 and CSS3 for Web font functionality, and to provide access to advanced typographic features of fonts.</td> </tr> <tr> <th>Owner:</th> <td>Chris (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3123">ACTION-3123</a>)</td> </tr> </table> </div> <h4 id="FontVariantProperty" class="heading">11.10.2.1. The ‘font-variant’ property<a class="self-link" href="#FontVariantProperty"></a></h4> This section is not normative The <a class="property" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-variant">font-variant</a> property gets defined by the CSS Font Module ([<a href="refs.html#ref-css-fonts-3">css-font-3</a>]). CSS Font Module changes the meaning of the <a class="property" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-variant">font-variant</a> property from that defined by CSS 2.1. It has been repurposed (and its functionality greatly expanded) as a shorthand for selecting font variants from within a single font. SVG 2 supports all <a class="property" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-variant">font-variant</a> longhand properties (e.g. <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop">font-variant-ligatures</a>). <h4 id="LineHeightProperty" class="heading">11.10.2.2. The ‘line-height’ property<a class="self-link" href="#LineHeightProperty"></a></h4> SVG uses the <a class="property" href="text.html#LineHeightProperty">line-height</a> property to determine the amount of leading space which is added between lines in multi-line text (both for horizontal and vertical text). It is not applicable to text on a path. Except for the additional information provided here, the <a href="https://www.w3.org/TR/CSS21/visudet.html#line-height">normative definition</a> of the <a class="property" href="text.html#LineHeightProperty">line-height</a> property is in the CSS 2.1 specification ([<a href="refs.html#ref-css2">CSS2</a>]). The <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Module Level 3</a> may update the definition of 'line-height'. <h4 id="WritingModeProperty" class="heading">11.10.2.3. The ‘writing-mode’ property<a class="self-link" href="#WritingModeProperty"></a></h4> This section is not normative. The <a class="property" href="text.html#WritingModeProperty">writing-mode</a> property gets defined by the CSS Writing Modes Module ([<a href="refs.html#ref-css-writing-modes-3">css-writing-modes-3</a>]). This property sets the <a href="text.html#TermBlockFlowDirection">block-flow direction</a>; or in-other-words, the direction in which lines of text are stacked. As a consequence it also determines if the text has a horizontal or vertical orientation. SVG 2 references <a href="https://www.w3.org/TR/css-writing-modes-3">CSS Writing Modes Level 3</a> for the definition of the <a href="https://www.w3.org/TR/css-writing-modes-3/#block-flow">'writing-mode'</a> property. That specification introduces new values for the property. The SVG 1.1 values are obsolete but must still be supported by converting the specified values to computed values as follows:  In SVG 1.0, this property could be interpreted as to also setting the <a href="text.html#TermInlineBaseDirection">inline-base direction</a> leading to confusion about its role relative to the <a class="property" href="text.html#DirectionProperty">direction</a> property. SVG 1.1 was a bit more specific about the role of <a class="property" href="text.html#DirectionProperty">direction</a> (e.g. that <a class="property" href="text.html#DirectionProperty">direction</a> set the reference point for the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> property) but still was open to interpretation. The fact that neither SVG 1.0 nor SVG 1.1 allowed multi-line text added to the confusion. <h4 id="DirectionProperty" class="heading">11.10.2.4. The ‘direction’ property<a class="self-link" href="#DirectionProperty"></a></h4> The property specifies the <a href="text.html#TermInlineBaseDirection">inline-base direction</a> of a ‘<a href="text.html#TextElement">text</a>’ or ‘<a href="text.html#TextElement">tspan</a>’ element. It defines the <q>start</q> and <q>end</q> points of a line of text as used by the <a class="property" href="text.html#TextAnchorProperty">text-anchor</a> and <a class="property" href="text.html#InlineSizeProperty">inline-size</a> properties. It also may affect the direction in which characters are positioned if the <a class="property" href="https://www.w3.org/TR/css-writing-modes-3/#unicode-bidi">unicode-bidi</a> property's value is either embed or bidi-override. The <a class="property" href="text.html#DirectionProperty">direction</a> property applies only to glyphs oriented perpendicular to the <a href="text.html#TermInlineBaseDirection">inline-base direction</a>, which includes the usual case of horizontally-oriented Latin or Arabic text and the case of narrow-cell Latin or Arabic characters rotated 90 degrees clockwise relative to a top-to-bottom <a href="text.html#TermInlineBaseDirection">inline-base direction</a>. <a class="self-link" href="#issue54"></a> Reviewers, please take special care to ensure this agrees with CSS3 Writing modes. Except for the additional information provided here, the <a href="https://www.w3.org/TR/css-writing-modes-3/#direction">normative definition</a> of the <a class="property" href="text.html#DirectionProperty">direction</a> property is in CSS Writing Modes Level 3 ([<a href="refs.html#ref-css-writing-modes-3">css-writing-modes-3</a>]). In many cases, the bidirectional algorithm from Unicode [<a href="refs.html#ref-unicode">UNICODE</a>] produces the desired result automatically, and in such cases the author does not need to use these properties. For other cases, such as when using right-to-left languages, it may be sufficient to add the <a class="property" href="text.html#DirectionProperty">direction</a> property to the <a href="struct.html#TermOutermostSVGElement">outermost svg element</a>, and allow that direction to inherit to all text elements, as in the following example (which may be used as a template): <div class="example"><pre class="xml"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 600 72" direction="rtl" xml:lang="fa"> <title direction="ltr" xml:lang="en">Right-to-left Text</title> <desc direction="ltr" xml:lang="en"> A simple example for using the 'direction' property in documents that predominantly use right-to-left languages. </desc> <text x="300" y="50" text-anchor="middle" font-size="36">داستان SVG 1.1 SE طولا ني است.</text> </svg></pre><div class="figure"><img alt="Example " src="images/text/rtl-text.png"/>Example </div><a href="images/text/rtl-text.svg">View this example as SVG (SVG-enabled browsers only)</a></div> Below is another example, where where implicit bidi reordering is not sufficient: <div class="example"><pre class="xml"><?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 600 72" direction="rtl" xml:lang="he"> <title direction="ltr" xml:lang="en">Right-to-left Text</title> <desc direction="ltr" xml:lang="en"> An example for using the 'direction' and 'unicode-bidi' properties in documents that predominantly use right-to-left languages. </desc> <text x="300" y="50" text-anchor="middle" font-size="36"> כתובת MAC:&#x200F; <tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan> </text> </svg></pre><div class="figure"><img alt="Example " src="images/text/rtl-complex.png"/>Example </div><a href="images/text/rtl-complex.svg">View this example as SVG (SVG-enabled browsers only)</a></div> <h4 id="DominantBaselineProperty" class="heading">11.10.2.5. The ‘dominant-baseline’ property<a class="self-link" href="#DominantBaselineProperty"></a></h4> This property is defined in the CSS Line Layout Module 3 specification. See <a href="https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline">'dominant-baseline'</a>. [<a href="refs.html#ref-css-inline-3">css-inline-3</a>] SVG 2 introduces some changes to the definition of this property. In particular: <ul> <li> The 'reset-size' value is no longer supported. Any change in <a class="property" href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">font-size</a> resets the dominant baseline table. </li> <li> The 'use-script' and 'no-change' values are no longer supported. </li> <li> The property is now inherited. (Behavior is effectively unchanged.) </li> </ul> SVG uses the value of the <a class="property" href="text.html#DominantBaselineProperty">dominant-baseline</a> property to align glyphs relative to the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes. For the <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a> value sideways, the auto value for <a class="property" href="text.html#DominantBaselineProperty">dominant-baseline</a> is alphabetic; however, for backwards compatibility, the glyphs should be aligned to the ‘<a href="text.html#TextElementXAttribute">x</a>’ and ‘<a href="text.html#TextElementYAttribute">y</a>’ attributes using the value central. <a class="self-link" href="#issue56"></a> We are interested in any actual use where one would prefer the old behavior.  <h4 id="AlignmentBaselineProperty" class="heading">11.10.2.6. The ‘alignment-baseline’ property<a class="self-link" href="#AlignmentBaselineProperty"></a></h4> This property is defined in the CSS Line Layout Module 3 specification. See <a href="https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline">'alignment-baseline'</a>. [<a href="refs.html#ref-css-inline-3">css-inline-3</a>] The <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> property shorthand should be preferred in new content. SVG 2 introduces some changes to the definition of this property. In particular: the values 'auto', 'before-edge', and 'after-edge' have been removed. For backwards compatibility, 'text-before-edge' should be mapped to 'text-top' and 'text-after-edge' should be mapped to 'text-bottom'. Neither 'text-before-edge' nor 'text-after-edge' should be used with the <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> property. <h4 id="BaselineShiftProperty" class="heading">11.10.2.7. The ‘baseline-shift’ property<a class="self-link" href="#BaselineShiftProperty"></a></h4> This property is defined in the CSS Line Layout Module 3 specification. See <a href="https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift">'baseline-shift'</a>. [<a href="refs.html#ref-css-inline-3">css-inline-3</a>] The <a class="property" href="https://drafts.csswg.org/css-inline/#transverse-alignment">vertical-align</a> property shorthand should be preferred in new content. The 'baseline' value was removed with the conversion of 'vertical-align' to a shorthand for 'alignment-baseline' and 'baseline-shift' as it is also a value for 'alignment-baseline' and it is redundant with a length value of '0'. <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Align with CSS for baseline alignment functionality.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2012/01/13-svg-irc#T03-24-06">SVG 2 will deprecate ‘baseline-shift’ and use ‘vertical-align’ instead.</a></td> </tr> <tr> <th>Purpose:</th> <td>To align with CSS.</td> </tr> <tr> <th>Owner:</th> <td>Cameron (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3281">ACTION-3281</a>)</td> </tr> </table> </div> <a href="https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift">'baseline-shift'</a> is important for aligning subscripts and superscripts (Inkscape relies on it for this purpose). It remains in the CSS Inline Layout Module Level 3. <a href="https://www.w3.org/TR/css-inline-3/#propdef-vertical-align">'vertical-align'</a> is a shorthand for changing multiple properties at once, including 'baseline-shift'. <h4 id="LetterSpacingProperty" class="heading">11.10.2.8. The ‘letter-spacing’ property<a class="self-link" href="#LetterSpacingProperty"></a></h4> Except as noted, see CSS Text Level 3 for the definition of the <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a>.([<a href="refs.html#ref-css-text-3">css-text-3</a>]). SVG 1.1 allowed percentage values in the <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> property. Percentage values based on the SVG viewport are not seen as useful, so this was removed in SVG 2. This brings the definition of 'letter-spacing' in line with CSS. <h4 id="WordSpacingProperty" class="heading">11.10.2.9. The ‘word-spacing’ property<a class="self-link" href="#WordSpacingProperty"></a></h4> Except as noted, see CSS Text Level 3 for the definition of the <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a>.([<a href="refs.html#ref-css-text-3">css-text-3</a>]). SVG 2 changes the meaning of percentage values for the <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a> property. In SVG 1.1, percentages define additional spacing as a percentage of the <a href="coords.html#TermSVGViewport">SVG viewport</a> size. Percentage values based on the SVG viewport are not seen as useful. In SVG 2, following CSS Text Level 3, percentages define additional spacing as a percentage of the affected character's width. This brings the definition of 'word-spacing' in line with CSS. <h4 id="TextOverflowProperty" class="heading">11.10.2.10. The ‘text-overflow’ property<a class="self-link" href="#TextOverflowProperty"></a></h4> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Add <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> functionality.</td> </tr> <tr> <th>Resolution:</th> <td><a href="http://www.w3.org/2011/03/03-svg-minutes.html#item04">We will add text-overflow in SVG 2.</a></td> </tr> <tr> <th>Purpose:</th> <td>To align with CSS, allow indicating that not all text is shown.</td> </tr> <tr> <th>Owner:</th> <td>Erik (<a href="http://www.w3.org/Graphics/SVG/WG/track/actions/3003">ACTION-3003</a>)</td> </tr> </table> </div> New in SVG 2. Added to allow user agents to handle text strings that overflow a predefined wrapping area in a more useful way. Aligns SVG and HTML/CSS text processing. See the CSS3 Overflow specification for the definition of <a href="https://www.w3.org/TR/css-overflow-3/#text-overflow">'text-overflow'</a>. [<a href="refs.html#ref-css-overflow-3">css-overflow-3</a>] SVG uses the <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> property to control how <a href="text.html#TermTextContentBlockElement">text content block elements</a> render when text overflows <a href="text.html#TermLineBox">line boxes</a> as, for example, can happen when the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property has the value nowrap. The property does not apply to pre-formatted text or text-on-a-path. In SVG <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> has an effect if there is a validly specified <a href="text.html#TermWrappingArea">wrapping area</a>, regardless of the computed value of the <a class="property" href="render.html#OverflowAndClipProperties">overflow</a> property on the <a href="text.html#TermTextContentBlockElement">text content block element</a>. If the <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> property has the value ellipsis then if the text that is to be rendered overflows the <a href="text.html#TermWrappingArea">wrapping area</a> an ellipsis is rendered such that it fits within the given area. For the purposes of rendering, the ellipsis is treated as if it replaced the characters at the point where it is inserted.  If the <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> property has the value clip then any text that overflows the <a href="text.html#TermWrappingArea">wrapping area</a> is clipped. Characters may be partially rendered. Any other value for <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> is treated as if it wasn't specified. Note that the effect of <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> is purely visual, the ellipsis itself does not become part of the DOM. For all the DOM methods it is as if <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> was not applied, and as if the <a href="text.html#TermWrappingArea">wrapping area</a> did not constrain the text. <div class="example"> The following example shows the use of <a class="property" href="text.html#TextOverflowProperty">text-overflow</a>. The top line shows text as it would normally be rendered (text overflows due to <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> value pre and is displayed due to <a class="property" href="render.html#OverflowAndClipProperties">overflow</a> value visible). The middle line shows text with <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> value clip, and the bottom line shows text with <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> value ellipsis. <pre> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"> <style> text { font: 25px sans-serif; white-space: pre; } path { fill: none; stroke: #add8e6; } </style> <path d="m 50,0 0,150"/> <path d="m 200,0 0,150"/> <text x="50" y="35" inline-size="100" style="overflow:visible">SVG is awesome</text> <text x="50" y="85" inline-size="100" style="text-overflow:clip">SVG is awesome</text> <text x="50" y="135" inline-size="100" style="text-overflow:ellipsis">SVG is awesome</text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-overflow-ref.svg" alt="Image showing the use of the text-overflow property."/> The <a class="property" href="text.html#TextOverflowProperty">text-overflow</a> property used on text elements, the bottom line showing text with an ellipsis applied. </div> </div> 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?). The text-overflow property only deals with text that overflows off the end of a line. It does not deal with text that overflows the off the end of the wrapping area. <h3 id="WhiteSpace" class="heading">11.10.3. White space<a class="self-link" href="#WhiteSpace"></a></h3> New in SVG 2. Added <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> to allow a more useful way to control white-space handling. Aligns SVG and HTML/CSS text processing. ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ deprecated in new content, retained for backwards compatibility. <h4 id="TextWhiteSpace" class="heading">11.10.3.1. SVG 2 Preferred white space handling, the ‘white-space’ property<a class="self-link" href="#TextWhiteSpace"></a></h4> Rendering of white space in SVG 2 is controlled by the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property. This specifies two things: <ul> <li>whether and how white space inside the element is collapsed</li> <li>whether lines may wrap at unforced soft wrap opportunities</li> </ul> Values and their meanings are defined in <a href="https://www.w3.org/TR/css-text-3/#white-space-property">CSS Text Module Level 3</a>.[<a href="refs.html#ref-css-text-3">css-text-3</a>] <div class="example"> An example of using the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> value pre-line. <pre> <svg xmlns="http://www.w3.org/2000/svg"> width="200" height="200" viewBox="0 0 200 200"> <text x="150" y="30" style="font: 20px IPAMincho; writing-mode: vertical-rl; white-space: pre-line;"> 千利奴流乎和加餘多連曽津祢那良牟有為能於久耶万計不己衣天阿佐伎喩女美之恵比毛勢須</text> </svg> </pre> <div class="figure"> <img class="bordered" src="images/text/text-whitespace-vertical.svg" alt="Japanese poem showing traditional line-breaking after every seven kanji."/> Example of multi-line vertical text with line breaks. The text is from the Japanese poem Iroha. The lines are broken at traditional places. </div> </div> <h4 id="LegacyXMLSpace" class="heading">11.10.3.2. Legacy white-space handling, the ‘xml:space’ property<a class="self-link" href="#LegacyXMLSpace"></a></h4> For compatibility, SVG 2 also supports the XML attribute ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ to specify the handling of white space characters within a given ‘<a href="text.html#TextElement">text</a>’ element's character data. New content should not use ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ but instead, use the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property. This section should be simplified to limit the discussion of xml:space and instead define it in the user agent style sheet using the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property. The <a href="https://drafts.csswg.org/css-text-4/">CSS Text 4</a> specification's preserve-spaces value for the <a class="property" href="https://drafts.csswg.org/css-text-4/#white-space-collapsing">'white-space-collapse'</a> property is intended to match xml:space=preserve. (<a href="https://log.csswg.org/irc.w3.org/css/2015-02-08/#e519951">fantasai agreed</a> to add an appropriate value for <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> to match SVG 1.1's odd xml:space="preserve" behavior.) Note that any child element of a ‘<a href="text.html#TextElement">text</a>’ element may also have an ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ attribute which will apply to that child element's text content. The SVG user agent has special processing rules associated with this attribute as described below. These are behaviors that occur subsequent to XML parsing [<a href="https://www.w3.org/TR/2008/REC-xml-20081126/">XML</a>] and any construction of a DOM. ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ is an inheritable attribute which can have one of two values: <dl> <dt>'default'</dt> <dd> (The initial/default value for ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’.) When xml:space="default", the SVG user agent will do the following using a copy of the original character data content. First, it will remove all newline characters. Then it will convert all tab characters into space characters. Then, it will strip off all leading and trailing space characters. Then, all contiguous space characters will be consolidated. </dd> <dt>'preserve'</dt> <dd> When xml:space="preserve", the SVG user agent will do the following using a copy of the original character data content. It will convert all newline and tab characters into space characters. Then, it will draw all space characters, including leading, trailing and multiple contiguous space characters. Thus, when drawn with xml:space="preserve", the string <code>"a b"</code> (three spaces between "a" and "b") will produce a larger separation between "a" and "b" than <code>"a b"</code> (one space between "a" and "b"). </dd> </dl> The following example illustrates that line indentation can be important when using xml:space="default". The fragment below show two pairs of similar ‘<a href="text.html#TextElement">text</a>’ elements, with both ‘<a href="text.html#TextElement">text</a>’ elements using xml:space="default". For these examples, there is no extra white space at the end of any of the lines (i.e., the line break occurs immediately after the last visible character). <pre> [01] <text xml:space='default'> [02] WS example [03] indented lines [04] </text> [05] <text xml:space='preserve'>WS example indented lines</text> [06] [07] <text xml:space='default'> [08]WS example [09]non-indented lines [10] </text> [11] <text xml:space='preserve'>WS examplenon-indented lines</text> </pre> The first pair of ‘<a href="text.html#TextElement">text</a>’ elements above show the effect of indented character data. The attribute xml:space="default" in the first ‘<a href="text.html#TextElement">text</a>’ element instructs the user agent to: <ul> <li>convert all tabs (if any) to space characters,</li> <li>strip out all line breaks (i.e., strip out the line breaks at the end of lines [01], [02] and [03]),</li> <li>strip out all leading space characters (i.e., strip out space characters before "WS example" on line [02]),</li> <li>strip out all trailing space characters (i.e., strip out space characters before "</text>" on line [04]),</li> <li>consolidate all intermediate space characters (i.e., the space characters before "indented lines" on line [03]) into a single space character.</li> </ul> The second pair of ‘<a href="text.html#TextElement">text</a>’ elements above show the effect of non-indented character data. The attribute xml:space="default" in the third ‘<a href="text.html#TextElement">text</a>’ element instructs the user agent to: <ul> <li>convert all tabs (if any) to space characters,</li> <li>strip out all line breaks (i.e., strip out the line breaks at the end of lines [07], [08] and [09]),</li> <li>strip out all leading space characters (there are no leading space characters in this example),</li> <li>strip out all trailing space characters (i.e., strip out space characters before "</text>" on line [10]),</li> <li>consolidate all intermediate space characters into a single space character (in this example, there are no intermediate space characters).</li> </ul> Note that XML parsers are required to convert the standard representations for a newline indicator (e.g., the literal two-character sequence "U+000D U+000A", CARRIAGE-RETURN LINE-FEED or the stand-alone literals U+000D or U+000A) into the single character U+000A before passing character data to the application. Thus, each newline in SVG will be represented by the single character U+000A, no matter what representation for newlines might have been used in the original resource. (See <a href="https://www.w3.org/TR/2008/REC-xml-20081126/#sec-line-ends">XML end-of-line handling</a>.) Any features in the SVG language or the SVG DOM that are based on character position number, such as the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’ and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ attributes on the ‘<a href="text.html#TextElement">text</a>’ and ‘<a href="text.html#TextElement">tspan</a>’ elements, are based on character position after applying the white space handling rules described here. In particular, if xml:space="default", it is often the case that white space characters are removed as part of processing. Character position numbers index into the text string after the white space characters have been removed per the rules in this section. Note that a glyph corresponding to a white-space character should only be displayed as a visible but blank space, even if the glyph itself happens to be non-blank. See <a href="http://www.unicode.org/faq/unsup_char.html">display of unsupported characters</a> [<a href="refs.html#ref-unicode">UNICODE</a>]. The ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ attribute is: <a href="https://svgwg.org/specs/animations/#Animatable">Animatable</a>: no. <h4 id="DuplicateWhiteSpace" class="heading">11.10.3.3. Duplicate white-space directives<a class="self-link" href="#DuplicateWhiteSpace"></a></h4> Older, SVG 1.1 content will use ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’. New content, and older content that is being reworked, will use <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> and remove any existing ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’. However, user agents may come across content which uses both methods on the same element. If the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property is set on any element, then the value of ‘<a href="struct.html#XMLSpaceAttribute">xml:space</a>’ is ignored. <h2 id="TextDecorationProperties" class="heading">11.11. Text decoration<a class="self-link" href="#TextDecorationProperties"></a></h2> Text in SVG can be decorated with an underline, overline, and/or strike-through. The position and style of the decoration is determined respectively by the <a class="property" href="text.html#TextDecorationProperties">text-decoration-line</a> and <a class="property" href="text.html#TextDecorationProperties">text-decoration-style</a> properties, or by the <a class="property" href="text.html#TextDecorationProperties">text-decoration</a> shorthand property as defined in the <a href="https://www.w3.org/TR/css-text-decor-3/#line-decoration">Line Decoration</a> section of the <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a> [(<a href="refs.html#ref-css-text-decor-3">css-text-decor-3</a>)] specification. The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared (see example below). The <a class="property" href="text.html#TextDecorationProperties">text-decoration-line</a> and <a class="property" href="text.html#TextDecorationProperties">text-decoration-style</a> properties are new in SVG 2. The SVG 1.1/CSS 2.1 <a class="property" href="text.html#TextDecorationProperties">text-decoration</a> property is transformed in a backwards compatible way to a short hand for these properties. The order in which the text and decorations are drawn is defined by the <a href="https://www.w3.org/TR/css-text-decor-3/#painting-order">Painting Order of Text Decorations</a> section of <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. The paint order of the text decoration itself (fill/stroke) is determined by the value of the <a class="property" href="painting.html#PaintOrderProperty">paint-order</a> property at the point where the text decoration is declared. Example textdecoration01 provides examples for <a class="property" href="text.html#TextDecorationProperties">text-decoration</a>. The first line of text has no value for <a class="property" href="text.html#TextDecorationProperties">text-decoration</a>, so the initial value of text-decoration:none is used. The second line shows text-decoration:line-through. The third line shows text-decoration:underline. 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 class="property" href="text.html#TextDecorationProperties">text-decoration</a> is specified. Since <a class="property" href="text.html#TextDecorationProperties">text-decoration</a> is specified on the ‘<a href="text.html#TextElement">text</a>’ element, all text within the ‘<a href="text.html#TextElement">text</a>’ element has its underline rendered with the same fill and stroke properties as exist on the ‘<a href="text.html#TextElement">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 class="property" href="text.html#TextDecorationProperties">text-decoration</a>; thus, its underline is rendered using the fill and stroke properties as the ‘<a href="text.html#TextElement">tspan</a>’ element that surrounds the word "different" (i.e., yellow fill, darkgreen stroke): <div class="example"><pre class="xml"><?xml version="1.0" standalone="no"?> <svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example textdecoration01 - behavior of 'text-decoration' property</desc> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <g font-size="60" fill="blue" stroke="red" stroke-width="1" > <text x="100" y="75">Normal text</text> <text x="100" y="165" text-decoration="line-through" >Text with line-through</text> <text x="100" y="255" text-decoration="underline" >Underlined text</text> <text x="100" y="345" text-decoration="underline" > <tspan>One </tspan> <tspan fill="yellow" stroke="purple" >word </tspan> <tspan fill="yellow" stroke="black" >has </tspan> <tspan fill="yellow" stroke="darkgreen" text-decoration="underline" >different </tspan> <tspan fill="yellow" stroke="blue" >underlining</tspan> </text> </g> </svg></pre><div class="figure"><img alt="Example textdecoration01 — behavior of 'text-decoration' property" src="images/text/textdecoration01.png"/>Example textdecoration01</div><a href="images/text/textdecoration01.svg">View this example as SVG (SVG-enabled browsers only)</a></div> <h2 id="TextSelection" class="heading">11.12. Text selection and clipboard operations<a class="self-link" href="#TextSelection"></a></h2> <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: <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> A text selection operation starts when all of the following occur: <ul> <li> the user positions the pointing device over a glyph that has been rendered as part of a ‘<a href="text.html#TextElement">text</a>’ element, initiates a select operation (e.g., pressing the standard system mouse button for select operations) and then moves the pointing device while continuing the select 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="interact.html">events</a> have been assigned to the ‘<a href="text.html#TextElement">text</a>’, ‘<a href="text.html#TextElement">tspan</a>’ or ‘<a href="text.html#TextPathElement">textPath</a>’ element(s) (or their ancestors) associated with the given glyph. </li> </ul> 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 applying styles for the <code>::selection</code> pseudo-class. 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 href="text.html#TextElement">text</a>’ element whose glyph cell is closest to the pointer. All characters within the ‘<a href="text.html#TextElement">text</a>’ element whose position within the ‘<a href="text.html#TextElement">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. 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). Detailed rules for determining which characters to highlight during a text selection operation are provided in <a href="#TextSelectionImplementationNotes">Text selection implementation notes</a>. 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 font properties associated with the given text string. 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 bidirectional 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. SVG authors and <a href="conform.html#TermSVGGenerator">SVG generators</a> should order their text strings to facilitate properly ordered text selection within SVG viewing applications such as Web browsers; in other words, the DOM order of the text should match the natural reading order of the text. <h3 id="TextSelectionImplementationNotes" class="heading">11.12.1. Text selection implementation notes<a class="self-link" href="#TextSelectionImplementationNotes"></a></h3> The following implementation notes describe the algorithm for deciding which characters are selected during a <a href="#TextSelection">text selection</a> operation. As the text selection operation occurs (e.g., while the user clicks and drags the mouse to identify the selection), the user agent determines a start selection position and an end selection position, each of which represents a position in the text string between two characters. After determining start selection position and end selection position, the user agent selects the appropriate characters, where the resulting text selection consists of either: <ul> <li>no selection or</li> <li>a start character, an end character (possibly the same character), and all of the characters within the same ‘<a href="text.html#TextElement">text</a>’ element whose position in the DOM is logically between the start character and end character.</li> </ul> On systems with pointer devices, to determine the start selection position, the SVG user agent determines which boundary between characters corresponding to rendered glyphs is the best target (e.g., closest) based on the current pointer location at the time of the event that initiates the selection operation (e.g., the mouse down event). The user agent then tracks the completion of the selection operation (e.g., the mouse drag, followed ultimately by the mouse up). At the end of the selection operation, the user agent determines which boundary between characters is the best target (e.g., closest) for the end selection position. If no character reordering has occurred due to bidirectionality, then the selection consists of all characters between the start selection position and end selection position. For example, if a ‘<a href="text.html#TextElement">text</a>’ element contains the string "abcdef" and the start selection position and end selection positions are 0 and 3 respectively (assuming the left side of the "a" is position zero), then the selection will consist of "abc". When the user agent is implementing selection of bidirectional text, and when the selection starts (or ends) between characters which are not contiguous in logical order, then there might be multiple potential combinations of characters that can be considered part of the selection. The algorithms to choose among the combinations of potential selection options shall choose the selection option which most closely matches the text string's visual rendering order. When multiple characters map inseparably to a given set of one or more glyphs, the user agent can either disallow the selection to start in the middle of the glyph set or can attempt to allocate portions of the area taken up by the glyph set to the characters that correspond to the glyph. For systems which support pointer devices such as a mouse, the user agent is required to provide a mechanism for selecting text even when the given text has associated event handlers or links, which might block text selection due to event processing precedence rules (see <a href="interact.html#PointerEvents">Pointer events</a>). One implementation option: For platforms which support a pointer device such as a mouse, the user agent may provide for a small additional region around character cells which initiates text selection operations but does not initiate event handlers or links. <h2 id="DOMInterfaces" class="heading">11.13. DOM interfaces<a class="self-link" href="#DOMInterfaces"></a></h2> <div class="annotation svg2-requirement"> <table> <tr> <th>SVG 2 Requirement:</th> <td>Have a DOM method to convert a ‘<a href="text.html#TextElement">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 ‘text’ element to outline path data, possibly moving the functionality to the FXTF.</a></td> </tr> <tr> <th>Purpose:</th> <td>To allow manipulation 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> <tr> <th>Status:</th> <td><a href="https://github.com/w3c/svgwg/issues/221">Future wish list</a></td> </tr> </table> </div> <div class="ready-for-wider-review"> <h3 id="InterfaceSVGTextContentElement" class="heading">11.13.1. Interface SVGTextContentElement<a class="self-link" href="#InterfaceSVGTextContentElement"></a></h3> The <a class="idlinterface" href="text.html#InterfaceSVGTextContentElement">SVGTextContentElement</a> interface is implemented by elements that support rendering child text content. 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 class="idlinterface" href="https://dom.spec.whatwg.org/#interface-characterdata">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 href="text.html#TextElement">text</a>’ element is a single non-BMP character, such as U+10000, then invoking <a href="text.html#__svg__SVGTextContentElement__getNumberOfChars">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. <pre class="idl">[Exposed=Window] interface SVGTextContentElement : <a class="idlinterface" href="types.html#InterfaceSVGGraphicsElement">SVGGraphicsElement</a> { // lengthAdjust Types const unsigned short <a href="text.html#__svg__SVGTextContentElement__LENGTHADJUST_UNKNOWN">LENGTHADJUST_UNKNOWN</a> = 0; const unsigned short <a href="text.html#__svg__SVGTextContentElement__LENGTHADJUST_SPACING">LENGTHADJUST_SPACING</a> = 1; const unsigned short <a href="text.html#__svg__SVGTextContentElement__LENGTHADJUST_SPACINGANDGLYPHS">LENGTHADJUST_SPACINGANDGLYPHS</a> = 2; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="text.html#__svg__SVGTextContentElement__textLength">textLength</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="text.html#__svg__SVGTextContentElement__lengthAdjust">lengthAdjust</a>; long <a href="text.html#__svg__SVGTextContentElement__getNumberOfChars">getNumberOfChars</a>(); float <a href="text.html#__svg__SVGTextContentElement__getComputedTextLength">getComputedTextLength</a>(); float <a href="text.html#__svg__SVGTextContentElement__getSubStringLength">getSubStringLength</a>(unsigned long charnum, unsigned long nchars); <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#dom-dompoint">DOMPoint</a> <a href="text.html#__svg__SVGTextContentElement__getStartPositionOfChar">getStartPositionOfChar</a>(unsigned long charnum); <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#dom-dompoint">DOMPoint</a> <a href="text.html#__svg__SVGTextContentElement__getEndPositionOfChar">getEndPositionOfChar</a>(unsigned long charnum); <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#DOMRect">DOMRect</a> <a href="text.html#__svg__SVGTextContentElement__getExtentOfChar">getExtentOfChar</a>(unsigned long charnum); float <a href="text.html#__svg__SVGTextContentElement__getRotationOfChar">getRotationOfChar</a>(unsigned long charnum); long <a href="text.html#__svg__SVGTextContentElement__getCharNumAtPosition">getCharNumAtPosition</a>(optional <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#dictdef-dompointinit">DOMPointInit</a> point = {}); undefined <a href="text.html#__svg__SVGTextContentElement__selectSubString">selectSubString</a>(unsigned long charnum, unsigned long nchars); };</pre> The numeric length adjustment type constants defined on <a class="idlinterface" href="text.html#InterfaceSVGTextContentElement">SVGTextContentElement</a> are used to represent the keyword values that the ‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’ attribute can take. Their meanings are as follows: <table class="vert"> <tr><th>Constant</th><th>Meaning</th></tr> <tr><td>LENGTHADJUST_SPACING</td><td>The spacing keyword.</td></tr> <tr><td>LENGTHADJUST_SPACINGANDGLYPHS</td><td>The spacingAndGlyphs keyword.</td></tr> <tr><td>LENGTHADJUST_UNKNOWN</td><td>Some other value.</td></tr> </table> The textLength IDL attribute <a href="types.html#TermReflect">reflects</a> the ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ content attribute. The initial value of the ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’ content attribute is defined to equal the user-agent's calculated length for the element. In other words, when the content attribute is not present, the IDL property is initialized with a base length equal to the return-value of <a href="text.html#__svg__SVGTextContentElement__getComputedTextLength">getComputedTextLength</a> on the same element, as a length in user units. The lengthAdjust IDL attribute <a href="types.html#TermReflect">reflects</a> the ‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’ content attribute. The <a href="types.html#TermNumericTypeValue">numeric type values</a> for ‘<a href="text.html#TextElementLengthAdjustAttribute">lengthAdjust</a>’ are as described above in the numeric length adjust type constant table. <div class="ready-for-wider-review"> The getNumberOfChars method returns the total number of <a href="text.html#TermAddressableCharacter">addressable characters</a> available for rendering within the current element, regardless of whether they will be rendered. When getNumberOfChars() is called, the following steps are run: <ol class="algorithm"> <li>Let <var>node</var> be the element or node upon which this method was called</li> <li>If <var>node</var> is a DOM text node, return the length of the text content of <var>node</var>, after normalizing whitespace according to the value of the <a class="property" href="https://www.w3.org/TR/css-text-3/#white-space-property">white-space</a> property on its parent element. </li> <li>If <var>node</var> is an <a class="idlinterface" href="https://dom.spec.whatwg.org/#interface-element">Element</a>: <ul> <li>If the element is <a href="render.html#Rendered-vs-NonRendered">not rendered</a> (e.g., because the <a class="property" href="render.html#VisibilityControl">display</a> property has the used value none), then return 0;</li> <li>Otherwise, set <var>count</var> to 0, and for each child of <var>node</var>: <ul> <li>Recursively call this algorithm and add the returned value to <var>count</var>.</li> </ul> Return <var>count</var>. </li> </ul> </li> <li>For all other node types (e.g., DOM comments), return 0.</li> </ol> </div> The getComputedTextLength method is used to compute a "length" for the text within the element. When getComputedTextLength() is called, the following steps are run: <ol class="algorithm"> <li>Let <var>count</var> be the value that would be returned if the <a href="#__svg__SVGTextContentElement__getNumberOfChars">getNumberOfChars</a> method were called on this element.</li> <li>Let <var>length</var> be the value that would be returned if the <a href="#__svg__SVGTextContentElement__getSubStringLength">getSubStringLength</a> method were called on this element, passing 0 and <var>count</var> as arguments.</li> <li>Return <var>length</var>.</li> </ol> The getSubStringLength method is used to compute the formatted text advance distance for a substring of text within the element. When getSubStringLength(<var>charnum</var>, <var>nchars</var>) is called, the following steps are run: <ol class="algorithm"> <li>Assign an index to each <a href="text.html#TermAddressableCharacter">addressable character</a> in the DOM within this element, where the first character has index 0.</li> <li>If <var>charnum</var> is greater than the highest index assigned to a character or if <var>nchars</var> is negative, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Let <var>length</var> be a length in user units, initialized to 0.</li> <li>For each <a href="text.html#TermAddressableCharacter">addressable character</a> in the DOM within this element that has an index such that <var>charnum</var> ≤ index < (<var>charnum</var> + <var>nchars</var>): <ol> <li>If the character corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> and it is the first character in document order to correspond to that <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, then: <ol> <li>Add the advance of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> to <var>length</var>, adjusted for any font kerning in effect.</li> <li>If the <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> or <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a> properties contributed space just after the <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, then add that space to <var>length</var>.</li> </ol> This means that, for example, if there is a ligature that is only partly included in the substring, then the advance of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> and any subsequent <a class="property" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">letter-spacing</a> or <a class="property" href="https://www.w3.org/TR/css-text-3/#word-spacing-property">word-spacing</a> space will be assigned to the first character's text length. </li> </ol> </li> <li>Return <var>length</var>.</li> </ol> Previous versions of SVG required that this method and <a href="#__svg__SVGTextContentElement__getComputedTextLength">getComputedTextLength</a> also include positioning adjustments in the inline direction due to ‘<a href="text.html#TextElementDXAttribute">dx</a>’ or ‘<a href="text.html#TextElementDYAttribute">dy</a>’ on child elements, so that the returned value would be equivalent to the user agent's calculation for ‘<a href="text.html#TextElementTextLengthAttribute">textLength</a>’. However, it was poorly specified, poorly implemented, and of dubious benefit, so has been simplified to match implementations. Change to text length methods <a href="https://lists.w3.org/Archives/Public/www-svg/2015Aug/att-0009/SVGWG-F2F-minutes-20150824.html#item04">resolved at August 2015 Paris face-to-face</a>. To <dfn id="TermFindTypographicCharacterForCharacter" data-dfn-type="dfn" data-export="">find the typographic character for a character</dfn> at index <var>index</var> within an element <var>element</var>, the following steps are run: <ol class="algorithm"> <li>Assign an index to each <a href="text.html#TermAddressableCharacter">addressable character</a> in the DOM within this element, where the first character has index 0.</li> <li>Let <var>last</var> be the highest index assigned to a character.</li> <li>While <var>charnum</var> < <var>last</var> and the character at index <var>charnum</var> does not correspond to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a>: <ol> <li>Set <var>charnum</var> to <var>charnum</var> + 1.</li> </ol> </li> <li>If <var>charnum</var> is greater than the highest index assigned to a character or, then return null.</li> <li>Otherwise, return the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> that corresponds to <var>charnum</var>.</li> </ol> The getStartPositionOfChar method is used to get the position of a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> after text layout has been performed. When getStartPositionOfChar(<var>charnum</var>) is called, the following steps are run: <ol class="algorithm"> <li>Let <var>cluster</var> be the result of <a href="#TermFindTypographicCharacterForCharacter">finding the typographic character for the character</a> at index <var>charnum</var> within the current element.</li> <li>If <var>cluster</var> is null, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Let <var>p</var> be the <a href="text.html#TermAlignmentPoint">alignment point</a> of the <a href="text.html#TermTypographicCharacterUnit">typographic character</a> that correspond to the character at index <var>charnum</var>, in the coordinate system of the current element.</li> <li>Return a newly created, <a href="shapes.html#PointMode">detached</a> <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#dom-dompoint">DOMPoint</a> object representing the point <var>p</var>.</li> </ol> The getEndPositionOfChar method is used to get the trailing position of a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> after text layout has been performed. When getEndPositionOfChar(<var>charnum</var>) is called, the following steps are run: <ol class="algorithm"> <li>Let <var>cluster</var> be the result of <a href="#TermFindTypographicCharacterForCharacter">finding the typographic character for the character</a> at index <var>charnum</var> within the current element.</li> <li>If <var>cluster</var> is null, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Let <var>p</var> be the <a href="text.html#TermAlignmentPoint">alignment point</a> of <var>cluster</var> that correspond to the character at index <var>charnum</var>, in the coordinate system of the current element.</li> <li>Let <var>direction</var> be a unit vector in the direction of the <var>cluster</var>'s advance. This direction takes into account the writing mode being used, the direction of the character, the <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a>, <a class="property" href="text.html#GlyphOrientationHorizontalProperty">glyph-orientation-horizontal</a> and <a class="property" href="text.html#GlyphOrientationVerticalProperty">glyph-orientation-vertical</a> properties, any ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value that applies to <var>cluster</var>, and any rotation applied to due a ‘<a href="text.html#TextPathElement">textPath</a>’.</li> <li>Let <var>advance</var> be <var>cluster</var>'s advance.</li> <li>Set <var>p</var> to <var>p</var> + <var>advance</var> · <var>direction</var>.</li> <li>Return a newly created, <a href="shapes.html#PointMode">detached</a> <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#dom-dompoint">DOMPoint</a> object representing the point <var>p</var>.</li> </ol> The getExtentOfChar method is used to compute a tight bounding box of the glyph cell that corresponds to a given <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. When getExtentOfChar(<var>charnum</var>) is called, the following steps are run: <ol class="algorithm"> <li>Let <var>cluster</var> be the result of <a href="#TermFindTypographicCharacterForCharacter">finding the typographic character for the character</a> at index <var>charnum</var> within the current element.</li> <li>If <var>cluster</var> is null, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Let <var>quad</var> be the potentially rotated rectangle in the current element's coordinate system that is the glyph cell for <var>cluster</var>.</li> <li>Let <var>rect</var> be the rectangle that forms the tightest bounding box around <var>quad</var> in the current element's coordinate system.</li> <li>Return a newly created <a class="idlinterface" href="https://www.w3.org/TR/geometry-1/#DOMRect">DOMRect</a> object representing the rectangle <var>rect</var>.</li> </ol> The getRotationOfChar method is used to get the rotation of <a href="text.html#TermTypographicCharacterUnit">typographic character</a>. When getRotationOfChar(<var>charnum</var>) is called, the following steps are run: <ol class="algorithm"> <li>Let <var>cluster</var> be the result of <a href="#TermFindTypographicCharacterForCharacter">finding the typograhic character for the character</a> at index <var>charnum</var> within the current element.</li> <li>If <var>cluster</var> is null, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Let <var>direction</var> be the angle in degrees that represents the direction of the <var>cluster</var>'s advance. This direction takes into account the writing mode being used, the direction of the character, the <a class="property" href="https://www.w3.org/TR/css3-writing-modes/#text-orientation">text-orientation</a>, <a class="property" href="text.html#GlyphOrientationHorizontalProperty">glyph-orientation-horizontal</a> and <a class="property" href="text.html#GlyphOrientationVerticalProperty">glyph-orientation-vertical</a> properties, any ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ value that applies to <var>cluster</var>, and any rotation applied to due a ‘<a href="text.html#TextPathElement">textPath</a>’.</li> <li>Return <var>direction</var>.</li> </ol> The getCharNumAtPosition method is used to find which character caused a text glyph to be rendered at a given position in the coordinate system. Because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant <a href="text.html#TermTypographicCharacterUnit">typographic character</a> is returned When getCharNumAtPosition(<var>point</var>) is called, the following steps are run: <ol class="algorithm"> <li>Assign an index to each character in the DOM within this element, where the first character has index 0.</li> <li>Let <var>last</var> be the highest index assigned to a character.</li> <li>Let <var>charnum</var> be 0.</li> <li>Let <var>result</var> be -1.</li> <li>While <var>charnum</var> < <var>last</var>: <ol> <li>If the character at index <var>charnum</var> corresponds to a <a href="text.html#TermTypographicCharacterUnit">typographic character</a> and it is the first character in document order to correspond to that <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, and <var>point</var> in this element's coordinate system is within the glyph cell for the <a href="text.html#TermTypographicCharacterUnit">typographic character</a>, then set <var>result</var> to <var>charnum</var>.</li> </ol> </li> <li>Return <var>result</var>.</li> </ol> </div> <div class="ready-for-wider-review"> The selectSubString method is used to select text within the element. When selectSubString(<var>charnum</var>, <var>nchars</var>) is called, the following steps are run: Selects a substring of the text in this element, beginning at character index <var>charnum</var> and extending forwards <var>nchars</var> characters. The following steps must be followed when this method is called: <ol> <li>Let <var>node</var> be this text content element.</li> <li>Let <var>count</var> be the number of characters in this text content element.</li> <li>Let <var>end</var> = <var>charnum</var> + <var>nchars</var>.</li> <li>If <var>charnum</var> ≥ <var>count</var> or <var>end</var> ≥ <var>count</var>, then <a href="https://heycam.github.io/webidl/#dfn-throw">throw</a> an <a href="https://heycam.github.io/webidl/#indexsizeerror">IndexSizeError</a>.</li> <li>Remove all <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range">ranges</a> from the document's <a href="http://w3c.github.io/selection-api/#dfn-selection">selection</a>. [<a href="refs.html#ref-dom">DOM</a>][<a href="refs.html#ref-editing">EDITING</a>]</li> <li>Set the <a href="http://w3c.github.io/selection-api/#dfn-selection">selection</a>'s <a href="http://w3c.github.io/selection-api/#dfn-direction">direction</a> to forwards.</li> <li>Add to the <a href="http://w3c.github.io/selection-api/#dfn-selection">selection</a> a new <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range">range</a> whose <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range-start">start</a> is the <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range-bp">boundary point</a> tuple (<var>node</var>, <var>charnum</var>) and <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range-end">end</a> is the <a href="https://www.w3.org/TR/2014/WD-dom-20140204/#concept-range-bp">boundary point</a> tuple (<var>node</var>, <var>end</var>).</li> </ol> <div class="note"> Ignoring the argument checking and exception throwing, this is equivalent to performing the following: <pre>var selection = document.getSelection(); selection.removeAllRanges(); var range = new Range(); range.setStart(textContentElement, charnum); range.setEnd(textContentElement, charnum + nchars); selection.addRange(range);</pre> </div> This method is deprecated, as it duplicates functionality from the Selection API. </div> <div class="ready-for-wider-review"> <h3 id="InterfaceSVGTextPositioningElement" class="heading">11.13.2. Interface SVGTextPositioningElement<a class="self-link" href="#InterfaceSVGTextPositioningElement"></a></h3> The <a class="idlinterface" href="text.html#InterfaceSVGTextPositioningElement">SVGTextPositioningElement</a> interface is implemented by elements that support attributes that position individual text glyphs. It is inherited by <a class="idlinterface" href="text.html#InterfaceSVGTextElement">SVGTextElement</a> and <a class="idlinterface" href="text.html#InterfaceSVGTSpanElement">SVGTSpanElement</a>. <pre class="idl">[Exposed=Window] interface SVGTextPositioningElement : <a class="idlinterface" href="text.html#InterfaceSVGTextContentElement">SVGTextContentElement</a> { [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLengthList">SVGAnimatedLengthList</a> <a href="text.html#__svg__SVGTextPositioningElement__x">x</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLengthList">SVGAnimatedLengthList</a> <a href="text.html#__svg__SVGTextPositioningElement__y">y</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLengthList">SVGAnimatedLengthList</a> <a href="text.html#__svg__SVGTextPositioningElement__dx">dx</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLengthList">SVGAnimatedLengthList</a> <a href="text.html#__svg__SVGTextPositioningElement__dy">dy</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a> <a href="text.html#__svg__SVGTextPositioningElement__rotate">rotate</a>; };</pre> The x, y, dx, dy and rotate IDL attributes <a href="types.html#TermReflect">reflect</a> the ‘<a href="text.html#TextElementXAttribute">x</a>’, ‘<a href="text.html#TextElementYAttribute">y</a>’, ‘<a href="text.html#TextElementDXAttribute">dx</a>’, ‘<a href="text.html#TextElementDYAttribute">dy</a>’ and ‘<a href="text.html#TextElementRotateAttribute">rotate</a>’ content attributes, respectively. <h3 id="InterfaceSVGTextElement" class="heading">11.13.3. Interface SVGTextElement<a class="self-link" href="#InterfaceSVGTextElement"></a></h3> An <a class="idlinterface" href="text.html#InterfaceSVGTextElement">SVGTextElement</a> object represents a ‘<a href="text.html#TextElement">text</a>’ element in the DOM. <pre class="idl">[Exposed=Window] interface SVGTextElement : <a class="idlinterface" href="text.html#InterfaceSVGTextPositioningElement">SVGTextPositioningElement</a> { };</pre> <h3 id="InterfaceSVGTSpanElement" class="heading">11.13.4. Interface SVGTSpanElement<a class="self-link" href="#InterfaceSVGTSpanElement"></a></h3> An <a class="idlinterface" href="text.html#InterfaceSVGTSpanElement">SVGTSpanElement</a> object represents a ‘<a href="text.html#TextElement">tspan</a>’ element in the DOM. <pre class="idl">[Exposed=Window] interface SVGTSpanElement : <a class="idlinterface" href="text.html#InterfaceSVGTextPositioningElement">SVGTextPositioningElement</a> { };</pre> <h3 id="InterfaceSVGTextPathElement" class="heading">11.13.5. Interface SVGTextPathElement<a class="self-link" href="#InterfaceSVGTextPathElement"></a></h3> An <a class="idlinterface" href="text.html#InterfaceSVGTextPathElement">SVGTextPathElement</a> object represents a ‘<a href="text.html#TextPathElement">textPath</a>’ element in the DOM. <pre class="idl">[Exposed=Window] interface SVGTextPathElement : <a class="idlinterface" href="text.html#InterfaceSVGTextContentElement">SVGTextContentElement</a> { // textPath Method Types const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_METHODTYPE_UNKNOWN">TEXTPATH_METHODTYPE_UNKNOWN</a> = 0; const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_METHODTYPE_ALIGN">TEXTPATH_METHODTYPE_ALIGN</a> = 1; const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_METHODTYPE_STRETCH">TEXTPATH_METHODTYPE_STRETCH</a> = 2; // textPath Spacing Types const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_SPACINGTYPE_UNKNOWN">TEXTPATH_SPACINGTYPE_UNKNOWN</a> = 0; const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_SPACINGTYPE_AUTO">TEXTPATH_SPACINGTYPE_AUTO</a> = 1; const unsigned short <a href="text.html#__svg__SVGTextPathElement__TEXTPATH_SPACINGTYPE_EXACT">TEXTPATH_SPACINGTYPE_EXACT</a> = 2; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="text.html#__svg__SVGTextPathElement__startOffset">startOffset</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="text.html#__svg__SVGTextPathElement__method">method</a>; [SameObject] readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="text.html#__svg__SVGTextPathElement__spacing">spacing</a>; }; <a class="idlinterface" href="text.html#InterfaceSVGTextPathElement">SVGTextPathElement</a> includes <a class="idlinterface" href="types.html#InterfaceSVGURIReference">SVGURIReference</a>;</pre> The numeric method type constants defined on <a class="idlinterface" href="text.html#InterfaceSVGTextPathElement">SVGTextPathElement</a> are used to represent the keyword values that the ‘<a href="text.html#TextPathElementMethodAttribute">method</a>’ attribute can take. Their meanings are as follows: <table class="vert"> <tr><th>Constant</th><th>Meaning</th></tr> <tr><td>TEXTPATH_METHODTYPE_ALIGN</td><td>The align keyword.</td></tr> <tr><td>TEXTPATH_METHODTYPE_STRETCH</td><td>The stretch keyword.</td></tr> <tr><td>TEXTPATH_METHODTYPE_UNKNOWN</td><td>Some other value.</td></tr> </table> The numeric spacing type constants defined on <a class="idlinterface" href="text.html#InterfaceSVGTextPathElement">SVGTextPathElement</a> are used to represent the keyword values that the ‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’ attribute can take. Their meanings are as follows: <table class="vert"> <tr><th>Constant</th><th>Meaning</th></tr> <tr><td>TEXTPATH_SPACINGTYPE_AUTO</td><td>The auto keyword.</td></tr> <tr><td>TEXTPATH_SPACINGTYPE_EXACT</td><td>The exact keyword.</td></tr> <tr><td>TEXTPATH_SPACINGTYPE_UNKNOWN</td><td>Some other value.</td></tr> </table> The startOffset IDL attribute <a href="types.html#TermReflect">reflects</a> the ‘<a href="text.html#TextPathElementStartOffsetAttribute">startOffset</a>’ content attribute. The method IDL attribute <a href="types.html#TermReflect">reflects</a> the ‘<a href="text.html#TextPathElementMethodAttribute">method</a>’ content attribute. The <a href="types.html#TermNumericTypeValue">numeric type values</a> for ‘<a href="text.html#TextPathElementMethodAttribute">method</a>’ are as described above in the numeric method type constant table. The spacing IDL attribute <a href="types.html#TermReflect">reflects</a> the ‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’ content attribute. The <a href="types.html#TermNumericTypeValue">numeric type values</a> for ‘<a href="text.html#TextPathElementSpacingAttribute">spacing</a>’ are as described above in the numeric spacing type constant table. </div> <script src="//www.w3.org/scripts/TR/2016/fixup.js"></script><script src="style/expanders.js" type="text/javascript"></script></body> </html>