--- a/master/text.html Mon Feb 10 15:20:28 2014 +0100
+++ b/master/text.html Tue Feb 11 07:32:18 2014 +1100
@@ -88,32 +88,33 @@
<p>
Each <a>'text'</a> element causes a section of text to be
rendered. The text can be rendered:
- <ul>
- <li>pre-formatted (with limited line wrapping),</li>
- <li>auto-wrapped (if a <a>content area</a> is provided),</li>
- <li>on a path (if a <a>'textPath'</a> element is provided).</li>
- </ul>
- </p>
+ </p>
+ <ul>
+ <li>pre-formatted (with limited line wrapping),</li>
+ <li>auto-wrapped (if a <a>content area</a> is provided),</li>
+ <li>on a path (if a <a>'textPath'</a> element is provided).</li>
+ </ul>
<p>
SVG supports the following international text processing features for
all text:
- <ul>
- <li>horizontal and vertical orientation of text,</li>
-
- <li>left-to-right or bidirectional text (i.e., languages
- which intermix right-to-left and left-to-right text, such as
- Arabic and Hebrew),</li>
-
- <li>when <a href="fonts.html#SVGFontsOverview">SVG fonts</a> are
- used, automatic selection of the correct glyph corresponding
- to the current form for
- <a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a>
- and <a href="fonts.html#GlyphElementLangAttribute">Han</a>
- text.</li>
- <p class="issue">What about Hebrew, Hindi, etc.?</p>
- </ul>
- </p>
+ </p>
+ <ul>
+ <li>horizontal and vertical orientation of text,</li>
+
+ <li>left-to-right or bidirectional text (i.e., languages
+ which intermix right-to-left and left-to-right text, such as
+ Arabic and Hebrew),</li>
+
+ <li>when <a href="fonts.html#SVGFontsOverview">SVG fonts</a> are
+ used, automatic selection of the correct glyph corresponding
+ to the current form for
+ <a href="fonts.html#GlyphElementArabicFormAttribute">Arabic</a>
+ and <a href="fonts.html#GlyphElementLangAttribute">Han</a>
+ text.
+ <p class="issue">What about Hebrew, Hindi, etc.?</p>
+ </li>
+ </ul>
<p>
The section <a href="text.html#TextLayout">Text layout</a> gives an
@@ -143,28 +144,28 @@
<p>
Because SVG text is packaged as XML character data:
-
- <ul>
- <li>
- Text data in SVG content is readily accessible to the visually
- impaired (see <a href="access.html">Accessibility
- Support</a>),
- </li>
-
- <li>
- In many viewing scenarios, the user will be able to search for
- and select text strings and copy selected text strings to the
- system clipboard (see <a href="text.html#TextSelection">Text
- selection and clipboard operations</a>),
- </li>
-
- <li>
- XML-compatible Web search engines will find text strings in
- SVG content with no additional effort over what they need to
- do to find text strings in other XML documents.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ Text data in SVG content is readily accessible to the visually
+ impaired (see <a href="access.html">Accessibility
+ Support</a>),
+ </li>
+
+ <li>
+ In many viewing scenarios, the user will be able to search for
+ and select text strings and copy selected text strings to the
+ system clipboard (see <a href="text.html#TextSelection">Text
+ selection and clipboard operations</a>),
+ </li>
+
+ <li>
+ XML-compatible Web search engines will find text strings in
+ SVG content with no additional effort over what they need to
+ do to find text strings in other XML documents.
+ </li>
+ </ul>
<p>
Multi-language SVG content is possible by
@@ -458,17 +459,17 @@
<p>
The discussion of vertical text (CJK and Mongolian) is
lacking. Here are some notes:
- <ul>
- <li>Some Japanese opentype fonts have different glyphs for horizontal and vertical text.</li>
- <li>Kanji is set in a box 1 zenkaku width x 1 zenkaku width.</li>
- <li>Kanji baseline divides box into 88:12 ratio.</li>
- <li>Japanese/Latin mixed, 1 zenkaku should be slightly smaller than 1 em (ex. 10pt: 3.25mm vs 3.51mm).</li>
- <li>See: <a href="http://ajt.ktug.org/2008/0201okumura.pdf">pTEX and Japanese Typesetting</a>.</li>
- <li>Vertical kana can have ligatures!</li>
- <li>At least one proportional (horizontal and vertical) Japanese font exists.</li>
- <li>See: <a href="http://www.imug.org/presentations/imug-lunde-09162010.pdf">Kazuraki: Adobe Systems' Groundbreaking New Japanese Typeface</a>.</li>
- </ul>
</p>
+ <ul>
+ <li>Some Japanese opentype fonts have different glyphs for horizontal and vertical text.</li>
+ <li>Kanji is set in a box 1 zenkaku width x 1 zenkaku width.</li>
+ <li>Kanji baseline divides box into 88:12 ratio.</li>
+ <li>Japanese/Latin mixed, 1 zenkaku should be slightly smaller than 1 em (ex. 10pt: 3.25mm vs 3.51mm).</li>
+ <li>See: <a href="http://ajt.ktug.org/2008/0201okumura.pdf">pTEX and Japanese Typesetting</a>.</li>
+ <li>Vertical kana can have ligatures!</li>
+ <li>At least one proportional (horizontal and vertical) Japanese font exists.</li>
+ <li>See: <a href="http://www.imug.org/presentations/imug-lunde-09162010.pdf">Kazuraki: Adobe Systems' Groundbreaking New Japanese Typeface</a>.</li>
+ </ul>
</div>
@@ -1378,111 +1379,110 @@
<p>
Rotation of red text inside the <a>'text'</a> element:
-
- <ul>
- <li>
- The <a>'rotate'</a> value will rotate the characters in the text
- <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space that follows the
- text <em>"Not"</em>, to the space in between the text in the
- "child1" and "child5" <a>'tspan'</a> elements, and to the space
- before the text <em>"rotation"</em>.
- </li>
- <li>
- The next current <a>'rotate'</a> value specified is 45 followed
- by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
- element is incremented as subsequent characters in the text of the
- child <a>'tspan'</a> elements are processed.
- </li>
- <li>
- The next immediate <a>'tspan'</a> element specifies rotate values
- for the text, hence the current <a>'rotate'</a> value will change to
- the next value in the list (but is not used) as each character is
- processed until the last value of 55 degrees is reached.
- </li>
- <li>
- The last <a>'rotate'</a> value of 55 degrees will be applied to all
- the characters in the text <em>"rotation"</em>.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the characters in the text
+ <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"Not"</em>, to the space in between the text in the
+ "child1" and "child5" <a>'tspan'</a> elements, and to the space
+ before the text <em>"rotation"</em>.
+ </li>
+ <li>
+ The next current <a>'rotate'</a> value specified is 45 followed
+ by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
+ element is incremented as subsequent characters in the text of the
+ child <a>'tspan'</a> elements are processed.
+ </li>
+ <li>
+ The next immediate <a>'tspan'</a> element specifies rotate values
+ for the text, hence the current <a>'rotate'</a> value will change to
+ the next value in the list (but is not used) as each character is
+ processed until the last value of 55 degrees is reached.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of 55 degrees will be applied to all
+ the characters in the text <em>"rotation"</em>.
+ </li>
+ </ul>
<p>
Rotation of the orange text inside the "child1" <a>'tspan'</a>element:
-
- <ul>
- <li>
- The <a>'rotate'</a> value will rotate the first 4 characters in the
- text <em>"all characters "</em> by -10, -20, -30 and -40
- respectively.
- </li>
- <li>
- The last <a>'rotate'</a> value of -40 becomes the current
- <a>'rotate'</a> value and will be applied to all subsequent
- characters in the <a>'tspan'</a> element and to any child
- <a>'tspan'</a> elements that do not specify <a>'rotate'</a>
- values.
- </li>
- <li>
- The "child4" <a>'tspan'</a> element does not specify any
- <a>'rotate'</a> values and thus uses the current <a>'rotate'</a> of
- its ancestor ("child1" <a>'tspan'</a> element). All the characters
- in the text <em>"text"</em> specified within the "child4"
- <a>'tspan'</a> element will be rotated by -40 degrees.
- </li>
- <li>
- The last <a>'rotate'</a> value of -40 degrees will be applied to all
- the characters in the text <em>"have a"</em>.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space in between the text
- in the "child2" and "child4" <a>'tspan'</a> elements, and to the
- space before the text <em>"have a"</em>.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the first 4 characters in the
+ text <em>"all characters "</em> by -10, -20, -30 and -40
+ respectively.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 becomes the current
+ <a>'rotate'</a> value and will be applied to all subsequent
+ characters in the <a>'tspan'</a> element and to any child
+ <a>'tspan'</a> elements that do not specify <a>'rotate'</a>
+ values.
+ </li>
+ <li>
+ The "child4" <a>'tspan'</a> element does not specify any
+ <a>'rotate'</a> values and thus uses the current <a>'rotate'</a> of
+ its ancestor ("child1" <a>'tspan'</a> element). All the characters
+ in the text <em>"text"</em> specified within the "child4"
+ <a>'tspan'</a> element will be rotated by -40 degrees.
+ </li>
+ <li>
+ The last <a>'rotate'</a> value of -40 degrees will be applied to all
+ the characters in the text <em>"have a"</em>.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space in between the text
+ in the "child2" and "child4" <a>'tspan'</a> elements, and to the
+ space before the text <em>"have a"</em>.
+ </li>
+ </ul>
<p>
Rotation of the yellow text inside the "child2" <a>'tspan'</a>element:
-
- <ul>
- <li>
- The <a>'rotate'</a> value will rotate the characters in the (yellow)
- text <em>"in "</em> by 70, 60, and 50 degrees respectively.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space that follows the
- text <em>"in"</em>.
- </li>
- <li>
- There are more <a>'rotate'</a> values specified than characters,
- thus the additional <a>'rotate'</a> values will be applied to the
- "child3" <a>'tspan'</a> element which does not specified any
- <a>'rotate'</a> values.
- </li>
- <li>
- The characters in the text <em>"the"</em> specified within the
- "child3" <a>'tspan'</a> element will be rotated 40, 30 and 20
- degrees respectively.
- </li>
- </ul>
- </p>
-
- <p>Rotation of the blue text inside the "child5" <a>'tspan'</a> element:
-
- <ul>
- <li>
- The <a>'rotate'</a> value will rotate all the characters in text
- <em>"specified"</em> by -10 degrees.
- </li>
- <li>
- Only one <a>'rotate'</a> value is specified and is thus
- applied to all characters in the <a>'tspan'</a> element.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate the characters in the (yellow)
+ text <em>"in "</em> by 70, 60, and 50 degrees respectively.
+ </li>
+ <li>
+ A <a>'rotate'</a> value is applied to the space that follows the
+ text <em>"in"</em>.
+ </li>
+ <li>
+ There are more <a>'rotate'</a> values specified than characters,
+ thus the additional <a>'rotate'</a> values will be applied to the
+ "child3" <a>'tspan'</a> element which does not specified any
+ <a>'rotate'</a> values.
+ </li>
+ <li>
+ The characters in the text <em>"the"</em> specified within the
+ "child3" <a>'tspan'</a> element will be rotated 40, 30 and 20
+ degrees respectively.
+ </li>
+ </ul>
+
+ <p>Rotation of the blue text inside the "child5" <a>'tspan'</a> element:</p>
+
+ <ul>
+ <li>
+ The <a>'rotate'</a> value will rotate all the characters in text
+ <em>"specified"</em> by -10 degrees.
+ </li>
+ <li>
+ Only one <a>'rotate'</a> value is specified and is thus
+ applied to all characters in the <a>'tspan'</a> element.
+ </li>
+ </ul>
<p>
The following diagram illustrates how the rotation values propagate to
@@ -3157,18 +3157,20 @@
establish a new current text position at which the next glyph
shall be rendered. The adjustment to the current text position is
based on:
- <ul>
- <li>The current
- <a href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>.</li>
- <li>Glyph-specific advance values corresponding to
- the <a href="text.html#GlyphOrientation">glyph orientation</a> of
- the glyph just rendered.</li>
- <li>Kerning tables in the font.</li>
- <li>The current values of various attributes and properties, such as
- the <a href="text.html#SpacingProperties">spacing properties</a>.</li>
- <!-- Removed in SVG2: <li>For pre-formatted and text on a a path, the ‘x’, ‘y’, ‘dx’, and ‘dy’ attributes on ‘text’, ‘tspan’, ‘tref’, or ‘altGlyph’ elements.</li>-->
- <li>New lines in pre-formatted or auto-wrapped text.<!-- Added in SVG2--></li>
- </ul>
+ </p>
+ <ul>
+ <li>The current
+ <a href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>.</li>
+ <li>Glyph-specific advance values corresponding to
+ the <a href="text.html#GlyphOrientation">glyph orientation</a> of
+ the glyph just rendered.</li>
+ <li>Kerning tables in the font.</li>
+ <li>The current values of various attributes and properties, such as
+ the <a href="text.html#SpacingProperties">spacing properties</a>.</li>
+ <!-- Removed in SVG2: <li>For pre-formatted and text on a a path, the ‘x’, ‘y’, ‘dx’, and ‘dy’ attributes on ‘text’, ‘tspan’, ‘tref’, or ‘altGlyph’ elements.</li>-->
+ <li>New lines in pre-formatted or auto-wrapped text.<!-- Added in SVG2--></li>
+ </ul>
+ <p>
If a glyph does not provide explicit advance values corresponding
to the current <a href="text.html#GlyphOrientation">glyph
orientation</a>, then an appropriate approximation should be
@@ -3235,20 +3237,20 @@
<dfn id='relative-position-adjustment'>relative position
adjustments</dfn>. An absolute position adjustment occurs in the
following circumstances:
-
- <ul>
- <li>At the start of a <a>'text'</a> element</li>
- <li>At the start of each <a>'textPath'</a> element</li>
- <li>For each character within a <a>'text'</a>, <a>'tspan'</a>,
- <a>'tref'</a> and <a>'altGlyph'</a> element which for
- pre-formatted text has an explicit
- <span class='attr-name'>'x'</span> or
- <span class='attr-name'>'y'</span> value,
- or for text on a path has an explicit
- <span class='attr-name'>'x'</span> value if horizontal or
- <span class='attr-name'>'y'</span> value if vertical.</li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>At the start of a <a>'text'</a> element</li>
+ <li>At the start of each <a>'textPath'</a> element</li>
+ <li>For each character within a <a>'text'</a>, <a>'tspan'</a>,
+ <a>'tref'</a> and <a>'altGlyph'</a> element which for
+ pre-formatted text has an explicit
+ <span class='attr-name'>'x'</span> or
+ <span class='attr-name'>'y'</span> value,
+ or for text on a path has an explicit
+ <span class='attr-name'>'x'</span> value if horizontal or
+ <span class='attr-name'>'y'</span> value if vertical.</li>
+ </ul>
<p>
All other position adjustments to the current text position are
@@ -3259,53 +3261,52 @@
Each absolute position adjustment defines a new
<dfn>text chunk</dfn>. Absolute position adjustments impact text
layout in the following ways:
-
- <ul>
- <li>
- Ligatures only occur when a set of characters which might map
- to a ligature are all in the same text chunk.
- </li>
- <li>
- Each text chunk represents a separate block of text for
- alignment due to <a>'text-anchor'</a> property values.
- </li>
- <li>
- Reordering of characters due to
- <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
- only occurs within a text chunk. Reordering does <em>not</em>
- happen across text chunks.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ Ligatures only occur when a set of characters which might map
+ to a ligature are all in the same text chunk.
+ </li>
+ <li>
+ Each text chunk represents a separate block of text for
+ alignment due to <a>'text-anchor'</a> property values.
+ </li>
+ <li>
+ Reordering of characters due to
+ <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
+ only occurs within a text chunk. Reordering does <em>not</em>
+ happen across text chunks.
+ </li>
+ </ul>
<p>
The following additional rules apply to ligature formation:
-
- <ul>
- <li>
- As <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#spacing-props">defined
- in CSS 2.1</a>, ([<a href="refs.html#ref-CSS21">CSS21</a>],
- section 16.4), when the resultant space between two characters
- is not the same as the default space, user agents should not
- use ligatures; thus, if there is a non-default value for
- <a>'letter-spacing'</a>, the user agent should not use
- ligatures.
- </li>
-
- <li>
- Ligature formation should not be enabled for the glyphs
- corresponding to characters within different DOM text nodes;
- thus, characters separated by markup should not use ligatures.
- </li>
-
- <li>
- As mentioned above, ligature formation should not be
- enabled for the glyphs corresponding to characters within
- different text chunks.
- </li>
- </ul>
-
- </p>
+ </p>
+
+ <ul>
+ <li>
+ As <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#spacing-props">defined
+ in CSS 2.1</a>, ([<a href="refs.html#ref-CSS21">CSS21</a>],
+ section 16.4), when the resultant space between two characters
+ is not the same as the default space, user agents should not
+ use ligatures; thus, if there is a non-default value for
+ <a>'letter-spacing'</a>, the user agent should not use
+ ligatures.
+ </li>
+
+ <li>
+ Ligature formation should not be enabled for the glyphs
+ corresponding to characters within different DOM text nodes;
+ thus, characters separated by markup should not use ligatures.
+ </li>
+
+ <li>
+ As mentioned above, ligature formation should not be
+ enabled for the glyphs corresponding to characters within
+ different text chunks.
+ </li>
+ </ul>
<h3 id="WhiteSpace">White Space</h3>
@@ -3316,16 +3317,16 @@
for backwards compatibility.
</p>
- <h4 id="TextWhiteSpace">SVG 2 Preferred white space handling, the <a>'white-space'</a> property</h4>
+ <h4 id="TextWhiteSpace">SVG 2 Preferred white space handling, the <span class='prop'>'white-space'</span> property</h4>
<p>
Rendering of white space in SVG 2 is controlled by the <a>'white-space'</a>
property. This specifies two things:
- <ul>
- <li>whether and how white space inside the element is collapsed</li>
- <li>whether lines may wrap at unforced soft wrap opportunities</li>
- </ul>
- </p>
+ </p>
+ <ul>
+ <li>whether and how white space inside the element is collapsed</li>
+ <li>whether lines may wrap at unforced soft wrap opportunities</li>
+ </ul>
<table class="propdef">
<tr>
@@ -3408,7 +3409,7 @@
</div>
-<h4 id="LegacyXMLSpace">Legacy whitespace handling, the <a>'xml:space'</a> property</h4>
+<h4 id="LegacyXMLSpace">Legacy whitespace handling, the <span class='prop'>'xml:space'</span> property</h4>
<p id="XMLSpaceAttribute">
For compatibility, SVG 2 also supports the XML attribute
@@ -3492,40 +3493,40 @@
effect of indented character data. The attribute
<span class="attr-value">xml:space="default"</span> in the first
<a>'text'</a> element instructs the user agent to:
-
- <ul>
- <li>convert all tabs (if any) to space characters,</li>
- <li>strip out all line breaks (i.e., strip out the line
- breaks at the end of lines [01], [02] and [03]),</li>
- <li>strip out all leading space characters (i.e., strip out
- space characters before "WS example" on line [02]),</li>
- <li>strip out all trailing space characters (i.e., strip out
- space characters before "</text>" on line [04]),</li>
- <li>consolidate all intermediate space characters (i.e., the
- space characters before "indented lines" on line [03]) into a
- single space character.</li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [01], [02] and [03]),</li>
+ <li>strip out all leading space characters (i.e., strip out
+ space characters before "WS example" on line [02]),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [04]),</li>
+ <li>consolidate all intermediate space characters (i.e., the
+ space characters before "indented lines" on line [03]) into a
+ single space character.</li>
+ </ul>
<p>
The second pair of <a>'text'</a> elements above show the
effect of non-indented character data. The attribute
<span class="attr-value">xml:space="default"</span> in the third
<a>'text'</a> element instructs the user agent to:
-
- <ul>
- <li>convert all tabs (if any) to space characters,</li>
- <li>strip out all line breaks (i.e., strip out the line
- breaks at the end of lines [07], [08] and [09]),</li>
- <li>strip out all leading space characters (there are no
- leading space characters in this example),</li>
- <li>strip out all trailing space characters (i.e., strip out
- space characters before "</text>" on line [10]),</li>
- <li>consolidate all intermediate space characters into a
- single space character (in this example, there are no
- intermediate space characters).</li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>convert all tabs (if any) to space characters,</li>
+ <li>strip out all line breaks (i.e., strip out the line
+ breaks at the end of lines [07], [08] and [09]),</li>
+ <li>strip out all leading space characters (there are no
+ leading space characters in this example),</li>
+ <li>strip out all trailing space characters (i.e., strip out
+ space characters before "</text>" on line [10]),</li>
+ <li>consolidate all intermediate space characters into a
+ single space character (in this example, there are no
+ intermediate space characters).</li>
+ </ul>
<p>
Note that XML parsers are required to convert the standard
@@ -3667,18 +3668,18 @@
<p>
Two properties affect the space between characters and words:
-
- <ul>
- <li>
- <a>'letter-spacing'</a> indicates an amount of space that is
- to be added between text characters.
- </li>
-
- <li>
- <a>'word-spacing'</a> indicates the spacing behavior between words.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ <a>'letter-spacing'</a> indicates an amount of space that is
+ to be added between text characters.
+ </li>
+
+ <li>
+ <a>'word-spacing'</a> indicates the spacing behavior between words.
+ </li>
+ </ul>
<p class='issue'>
Note that the <span class='property'>'kerning'</span> property
@@ -4120,7 +4121,7 @@
</dd>
</dl>
-<h4 id='DominantBaseline'>The <a>'dominant-baseline'</a> property</h4>
+<h4 id='DominantBaseline'>The <span class='prop'>'dominant-baseline'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
@@ -4344,7 +4345,7 @@
desired baseline.
</p>
-<h4 id='AlignmentBaseline'>The <a>'alignment-baseline'</a> property</h4>
+<h4 id='AlignmentBaseline'>The <span class='prop'>'alignment-baseline'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
@@ -4462,7 +4463,7 @@
aligned with the "mathematical" baseline of the parent <a>text content element</a>.</dd>
</dl>
-<h4 id='BaselineShift'>The <a>'baseline-shift'</a> property</h4>
+<h4 id='BaselineShift'>The <span class='prop'>'baseline-shift'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
@@ -4629,35 +4630,35 @@
single line inside a rectangular <a>content area</a> of infinite
width and height. Multiple lines of text can be obtained by
precomputing line breaks and using one of the following methods:
-
- <ul>
- <li>
- Use a single <a>'text'</a> element with <a>'white-space'</a> set
- to <span class="prop-value">pre</span>
- or <span class="prop-value">pre-line</span>. Line spacing is set
- by <a>'line-height'</a>.
-
- <p class="note">New in SVG 2.</p>
- <p class="issue">In Firefox. Needs to be fully specified.</p>
- </li>
-
- <li>
- Use a single <a>'text'</a> element with one or more <a>'tspan'</a>
- child elements with appropriate values for attributes
- <a>'tspan/x'</a>, <a>'tspan/y'</a>,
- <a>'tspan/dx'</a> and <a>'tspan/dy'</a> to set new start positions
- for those characters which start new lines.
- </li>
-
- <li>
- Use multiple <a>'text'</a> elements, one for each line of
- text. (Not recommended as this prevents selection across multiple
- lines of text -- see
- <a href="text.html#TextSelection">Text selection and clipboard
- operations</a>.)
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ Use a single <a>'text'</a> element with <a>'white-space'</a> set
+ to <span class="prop-value">pre</span>
+ or <span class="prop-value">pre-line</span>. Line spacing is set
+ by <a>'line-height'</a>.
+
+ <p class="note">New in SVG 2.</p>
+ <p class="issue">In Firefox. Needs to be fully specified.</p>
+ </li>
+
+ <li>
+ Use a single <a>'text'</a> element with one or more <a>'tspan'</a>
+ child elements with appropriate values for attributes
+ <a>'tspan/x'</a>, <a>'tspan/y'</a>,
+ <a>'tspan/dx'</a> and <a>'tspan/dy'</a> to set new start positions
+ for those characters which start new lines.
+ </li>
+
+ <li>
+ Use multiple <a>'text'</a> elements, one for each line of
+ text. (Not recommended as this prevents selection across multiple
+ lines of text -- see
+ <a href="text.html#TextSelection">Text selection and clipboard
+ operations</a>.)
+ </li>
+ </ul>
<p class="note">
The following properties do not apply to <em>pre-formatted</em> text:
@@ -4676,29 +4677,28 @@
break</a>. When a renderer encounters a <a>forced line break</a>,
the <a>current text
position</a> is set as follows:
- <ul>
- <li>
- For horizontal text: <span class="val">x</span> is reset to
- the initial <a>current
- text position</a> while <span class="val">y</span> is
- incremented by the computed value of the <a>'line-height'</a>
- property.
- </li>
- <li>
- For vertical text: <span class="val">y</span> is reset to the
- initial value while <span class="val">x</span> is decremented
- (for right-to-left block-progression-direction) or incremented
- (for left-to-right block-progression-direction) by the computed
- value of <a>'line-height'</a>.
- <p class="issue">
- SVG 1.1 only has right-to-left vertical text but CSS Writing
- Modes Module Level 3 also has left-to-right. This is required
- for Mongolian.
- </p>
- </li>
- </ul>
-
- </p>
+ </p>
+ <ul>
+ <li>
+ For horizontal text: <span class="val">x</span> is reset to
+ the initial <a>current
+ text position</a> while <span class="val">y</span> is
+ incremented by the computed value of the <a>'line-height'</a>
+ property.
+ </li>
+ <li>
+ For vertical text: <span class="val">y</span> is reset to the
+ initial value while <span class="val">x</span> is decremented
+ (for right-to-left block-progression-direction) or incremented
+ (for left-to-right block-progression-direction) by the computed
+ value of <a>'line-height'</a>.
+ <p class="issue">
+ SVG 1.1 only has right-to-left vertical text but CSS Writing
+ Modes Module Level 3 also has left-to-right. This is required
+ for Mongolian.
+ </p>
+ </li>
+ </ul>
<h3 id="TextLayoutPreAdjustments">Adjusting Text Chunks</h3>
@@ -4719,7 +4719,7 @@
Expand on how 'x' and 'y' effect characters.
</p>
-<h4 id="TextAnchoringProperties">Text alignment, the <a>'text-anchor'</a> property</h4>
+<h4 id="TextAnchoringProperties">Text alignment, the <span class='prop'>'text-anchor'</span> property</h4>
<p>
The <a>'text-anchor'</a> property is used to align (start-,