- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Mon, 10 Feb 2014 12:44:09 -0800
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/94d1fc2e7ceb
branches:
changeset: 632:94d1fc2e7ceb
user: Cameron McCormack <cam@mcc.id.au>
date: Tue Feb 11 07:32:18 2014 +1100
description:
Markup fixes.
details: https://svgwg.org/hg/svg2/rev/f5b5d2b39376
branches:
changeset: 633:f5b5d2b39376
user: Cameron McCormack <cam@mcc.id.au>
date: Tue Feb 11 07:41:59 2014 +1100
description:
More markup fixes.
diffstat:
master/animate.html | 16 +-
master/coords.html | 6 +-
master/embedded.html | 2 +
master/interact.html | 5 +-
master/linking.html | 4 +-
master/mimereg.html | 2 +-
master/painting.html | 2 +-
master/paths.html | 5 +-
master/refs.html | 2 +
master/style/default_svg.css | 4 -
master/text.html | 652 +++++++++++++++++++++---------------------
11 files changed, 345 insertions(+), 355 deletions(-)
diffs (1406 lines):
diff --git a/master/animate.html b/master/animate.html
--- a/master/animate.html
+++ b/master/animate.html
@@ -1782,20 +1782,20 @@ In particular, see <a href="http://www.w
<td><dfn data-dfn-type="element-attr" data-dfn-for="set" id="SetElementToAttribute">to</dfn></td>
<td><value></td>
<td>(none)</td>
<td>no</td>
</tr>
</table>
</dt>
<dd>
- <dd>Specifies the value for the attribute during the
+ Specifies the value for the attribute during the
duration of the <a>'set'</a>
element. The argument value must match the attribute
- type.</dd>
+ type.
</dd>
</dl>
<p>For a list of attributes and properties that can be animated
using the <a>'set'</a> element, see
<a href="animate.html#AnimationAttributesAndProperties">Elements,
attributes and properties that can be animated</a>.</p>
@@ -2517,121 +2517,109 @@ is not possible.</p>
</thead>
<tbody>
<tr>
<th><a><angle></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a
href="types.html#DataTypeColor"><color></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
- <td>yes</td>
<td>no</td>
<td>Only additive if each value can be converted to an RGB color.</td>
</tr>
<tr>
<th><a
href="types.html#DataTypeFrequency"><frequency></a></th>
<td>no</td>
<td>no</td>
<td>no</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a
href="types.html#DataTypeInteger"><integer></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a><length></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></th>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a><number></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a
href="types.html#DataTypePaint"><paint></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
- <td>yes</td>
<td>no</td>
<td>Only additive if each value can be converted to an RGB color.</td>
</tr>
<tr>
<th><a><percentage></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a href="types.html#DataTypeTime"><time></a></th>
<td>no</td>
<td>no</td>
<td>no</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th><a href="types.html#DataTypeIRI"><iri></a></th>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
<tr>
<th>All other data types used in animatable attributes and
properties</th>
<td>no</td>
<td>yes</td>
<td>yes</td>
<td>no</td>
- <td>no</td>
<td> </td>
</tr>
</tbody>
</table>
<p>Any deviation from the above table or other special note
about the animation capabilities of a particular attribute or
property is included in the section of the specification where
diff --git a/master/coords.html b/master/coords.html
--- a/master/coords.html
+++ b/master/coords.html
@@ -1084,22 +1084,22 @@ excluded from the bounding box.</p>
element, not usually rendered like a <a>'symbol'</a> element or not
currently present in the document tree – it still has a bounding box.
A call to <a href="types.html#__svg__SVGGraphicsElement__getBBox">getBBox</a>
on the element will return the same rectangle as if the element were
rendered. However, an element that is not in the rendering tree
does not contribute to the bounding box of any ancestor element.</p>
<div class='example'>
- <p>The following example defines a number of elements. The <a>object bounding box</a>
- for each element with an ID is shown below.</p>
+ <p>The following example defines a number of elements. The expected
+ <a>object bounding box</a> for each element with an ID is shown below.</p>
<edit:includefile href='images/coords/bbox-calc.svg'/>
- <table class='vert' summary="Bounding box results for different elements, depending on context.">
+ <table class='vert'>
<thead>
<tr>
<th>Element ID</th>
<th>Bounding Box Result</th>
</tr>
</thead>
<tbody>
<tr>
diff --git a/master/embedded.html b/master/embedded.html
--- a/master/embedded.html
+++ b/master/embedded.html
@@ -358,16 +358,17 @@ elements within an SVG file.</p>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="iframe" id="FrameHeightAttribute">frameHeight</dfn></td>
<td><a><length></a></td>
<td>0</td>
<td>yes</td>
</tr>
</table>
</dt>
+ <dd></dd>
</dl>
</edit:with>
<h2 id="CanvasElement">The <span class='element-name'>'canvas'</span> element</h2>
<edit:with element='canvas'>
<edit:elementsummary name='canvas'/>
@@ -401,16 +402,17 @@ elements within an SVG file.</p>
<tr>
<td><dfn data-dfn-type="element-attr" data-dfn-for="canvas" id="CanvasHeightAttribute">canvasHeight</dfn></td>
<td><a><length></a></td>
<td>0</td>
<td>yes</td>
</tr>
</table>
</dt>
+ <dd></dd>
</dl>
</edit:with>
<h2 id="ForeignObjectElement">The <span class='element-name'>'foreignObject'</span> element</h2>
<p><a>'foreignObject'</a></p>
<p class='issue'>Stakagi: Should 'foreignObject' be in an Embedded Content chapter? Or should it still be an Extensibility chapter? </p>
diff --git a/master/interact.html b/master/interact.html
--- a/master/interact.html
+++ b/master/interact.html
@@ -1097,17 +1097,18 @@ the wording from that spec.</p>
context</a> is focused, its <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context-container">browsing conrtext
container</a> must also have focus.</p>
<p class="note">When an element is focused, the element matches the
CSS <code>:focus</code> pseudo-class.</p>
</div>
<h3 id="sequential-focus-navigation-and-the-tabindex-attribute">Sequential focus navigation and the <span class="attr-name">'tabindex'</span> attribute</h3>
-
+
+<dl class='attrdef-list'>
<dt>
<table class="propdef attrdef">
<tr>
<th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
@@ -1125,17 +1126,17 @@ the wording from that spec.</p>
order of the element for the purposes of sequential focus
navigation</p>
<p>The name "tab index" comes from the common use of the
"tab" key to navigate through the focusable elements. The term
"tabbing" refers to moving forward through the focusable elements
that can be reached using sequential focus navigation.
</p>
</dd>
-
+</dl>
<div class="impl">
<p>Each element can have a <dfn id="specially-focusable">tabindex focus flag</dfn> set, as defined
below. This flag is a factor that contributes towards determining whether an element is
<a href="#focusable">focusable</a>, as described in the next section.</p>
<dl><dt>If the tabindex attribute is omitted or an invalid <number> </dt>
diff --git a/master/linking.html b/master/linking.html
--- a/master/linking.html
+++ b/master/linking.html
@@ -518,17 +518,17 @@ or frame to be replaced by the W3C home
<h2 id="LinksIntoSVG">Linking into SVG content: IRI fragments and SVG views</h2>
<p>Because SVG content often represents a picture or drawing
of something, a common need is to link into a particular
<em>view</em> of the document, where a view indicates
the initial transformations so as to present a closeup of a particular
section of the document.</p>
-<dl class="ready-for-wider-review">
+<div class="ready-for-wider-review">
<h3 id="SVGFragmentIdentifiers">SVG fragment identifiers</h3>
<div class="annotation svg2-requirement">
<table>
<tr>
<th>SVG 2 Requirement:</th>
<td>Merge the SVG 1.1 SE text and the SVG Tiny 1.2 text on fragment identifiers link traversal and add media fragments.</td>
</tr>
@@ -704,17 +704,17 @@ as follows:</p>
specification attributes on that <a>'svg'</a> element.</li>
<li>If the SVG fragment identifier addresses a combination of the above
non-time related identifiers with a time-related identifier (ie. a timesegment),
the behavior of each identifier is applied.
</li>
</ul>
-</dl>
+</div>
<h3 id="ViewElement">Predefined views: the <span class="element-name">'view'</span> element</h3>
<edit:with element='view'>
<p>The <span class="element-name">'view'</span> element is defined as follows:</p>
<edit:elementsummary name='view'/>
diff --git a/master/mimereg.html b/master/mimereg.html
--- a/master/mimereg.html
+++ b/master/mimereg.html
@@ -147,25 +147,25 @@ Additional information:</dt>
fourth letter).
<p>Note that the Macintosh file type code 'svgz' (all lowercase) is used as an alias for GZIP
<cite>[<a href="refs.html#ref-RFC1952">RFC1952</a>]</cite> compressed "svg ", <em>i.e.</em>
octet streams of type image/svg+xml, subsequently compressed with gzip.</p></dd>
<dt>Macintosh Universal Type Identifier code: </dt>
<dd><code>org.w3c.svg</code> conforms to <code>public.image</code> and to <code>public.xml</code></dd>
<dt>Windows Clipboard Name:</dt>
<dd>"SVG Image"</dd>
+</dl>
<dl class="ready-for-wider-review">
<dt>Fragment Identifiers</dt>
<dd>For documents labeled as application/svg+xml, the fragment identifier
notation is either Shorthand Pointers (formerly called barenames),
the SVG-specific <a href="linking.html#LinksIntoSVG">SVG Views</a> syntax or a Media Fragment Identifier;
all described in the <a href="linking.html#SVGFragmentIdentifiers">fragment
identifiers section of the SVG specification</a>.</dd>
</dl>
- </dl>
</dd>
<dt>
Person & email address to contact for further information:</dt>
<dd>
<p>
Chris Lilley, Doug Schepers (member-svg-media-type@w3.org).
</p>
diff --git a/master/painting.html b/master/painting.html
--- a/master/painting.html
+++ b/master/painting.html
@@ -191,32 +191,32 @@ paint servers.</p>
is specified.
If the reference is not valid (e.g., it points to an element that
does not exist, no element was matched, or the element is not a valid paint
server), then the fallback value is used (if the paint server reference is the last
paint specified and if the fallback color is provided); otherwise,
it must be treated as if <span class='prop-value'>none</span> was specified.
<p class="annotation">Changed from SVG 1.1 behavior where document is in error
if paint server missing or invalid.</p>
- </dd>
<div class="example">
<pre><![CDATA[
<rect width="100" height="100" fill="url(#MyHatch1), url(#MyHatch2) powderblue">
]]></pre>
<div class="figure">
<img
alt="An example with a fallback solid paint fill."
src="images/painting/multiple_paints2.svg"/>
<p class="caption">The left rectangle shows the expected fill if both MyHatch1 and MyHatch2 are defined. The right rectangle shows the expected fill if MyHatch1 is defined but MyHatch2 is missing.</p>
</div>
</div>
<p class="issue">How should 'child' behave with allowing multiple paints?</p>
<p class="issue">This section needs additional examples, especially one with 'child'.</p>
+ </dd>
<dt>context-fill</dt>
<dt>context-stroke</dt>
<dd>The same paint as the computed value of the <a>'fill'</a> or <a>'stroke'</a>
property, respectively, of the <a>context element</a>. If there
is no context element, then no paint is applied. If the referenced paint
is a gradient or a pattern, then the coordinate space to use and the
object used for any <span class='attr-value'>'objectBoundingBox'</span>-relative
diff --git a/master/paths.html b/master/paths.html
--- a/master/paths.html
+++ b/master/paths.html
@@ -957,20 +957,20 @@ elliptical-arc:
elliptical-arc-argument-sequence:
elliptical-arc-argument
| elliptical-arc-argument comma-wsp? elliptical-arc-argument-sequence
elliptical-arc-argument:
number comma-wsp? number comma-wsp?
number comma-wsp flag comma-wsp? flag comma-wsp? coordinate-pair
bearing:
( "B" | "b") wsp* bearing-argument-sequence
-<div class="ready-for-wg-review">bearing-argument-sequence:
+bearing-argument-sequence:
number
- | number comma-wsp? bearing-argument-sequence</div><!--
--->coordinate-pair:
+ | number comma-wsp? bearing-argument-sequence
+coordinate-pair:
coordinate comma-wsp? coordinate
coordinate:
number
nonnegative-number:
integer-constant
| floating-point-constant
number:
sign? integer-constant
diff --git a/master/refs.html b/master/refs.html
--- a/master/refs.html
+++ b/master/refs.html
@@ -272,29 +272,31 @@
<dt id="ref-GML" class="normref">[GML]</dt>
<dd>
<cite><a href="http://portal.opengeospatial.org/files/?artifact_id=20509">OpenGIS Geography Markup Language (GML) Encoding Standard, version 3.2.1</a></cite>,
C. Portele, ed.
Open GIS Consortium, 27 August 2007.
<br/>Available at http://portal.opengeospatial.org/files/?artifact_id=20509.
</dd>
+</dl>
<dl class="references ready-for-wider-review">
<dt id="ref-MEDIAFRAGMENTSURI" class="normref">[MEDIAFRAGMENTSURI]</dt>
<dd>
<cite class="w3crec"><a href="http://www.w3.org/TR/2012/REC-media-frags-20120925/">Media Fragments URI 1.0 (basic)</a></cite>,
R. Troncy, E. Mannens, S. Pfeiffer, D. Van Deursen, eds.
World Wide Web Consoritum, 25 September 2012.
<br/>This edition of Media Fragments URI is http://www.w3.org/TR/2012/REC-media-frags-20120925/.
<br/>The <a href="http://www.w3.org/TR/media-frags/">latest edition of Media Fragments URI</a> is available at
http://www.w3.org/TR/media-frags/.
</dd>
</dl>
+<dl>
<dt id="ref-PNG" class="normref">[PNG]</dt>
<dd>
<cite class="w3crec"><a href="http://www.w3.org/TR/2003/REC-PNG-20031110/">Portable Network Graphics (PNG) Specification (Second Edition)</a>:
Information technology — Computer graphics and image processing — Portable Network Graphics (PNG): Functional specification, ISO/IEC 15948:2003 (E)</cite>,
D. Duce, ed. World Wide Web Consortium, 10 November 2003.
<br/>This edition of PNG is http://www.w3.org/TR/2003/REC-PNG-20031110/.
<br/>The <a href="http://www.w3.org/TR/PNG/">latest edition of PNG</a> is available at
http://www.w3.org/TR/PNG/.
diff --git a/master/style/default_svg.css b/master/style/default_svg.css
--- a/master/style/default_svg.css
+++ b/master/style/default_svg.css
@@ -301,20 +301,16 @@ h2.ready-for-wider-review,
h3.ready-for-wider-review,
.ready-for-wider-review > h1,
.ready-for-wider-review > h2,
.ready-for-wider-review > h3,
.ready-for-wider-review {
background-color: white ! important;
}
-.chapter-Overview,
-.chapter-Overview h1,
-.chapter-Overview h2,
-.chapter-Overview h3,
h1.ready-for-wider-review,
h2.ready-for-wider-review,
h3.ready-for-wider-review,
.ready-for-wider-review > h1,
.ready-for-wider-review > h2,
.ready-for-wider-review > h3,
div.ready-for-wider-review {
margin-left: -16px;
diff --git a/master/text.html b/master/text.html
--- a/master/text.html
+++ b/master/text.html
@@ -83,42 +83,43 @@
<a>'text'</a> elements in the same way as they apply to
<a>shapes</a> such as
<a href="paths.html">paths</a> and <a href="shapes.html#RectElement">rectangles</a>.
</p>
<p>
Each <a>'text'</a> element causes a section of text to be
rendered. The text can be rendered:
- <ul>
- <li>pre-formatted (with limited line wrapping),</li>
- <li>auto-wrapped (if a <a>content area</a> is provided),</li>
- <li>on a path (if a <a>'textPath'</a> element is provided).</li>
- </ul>
- </p>
+ </p>
+ <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
introduction to text layout. It is followed by sections covering
<a href="text.html#TextLayoutContentArea">content areas</a>,
<a href="text.html#TextLayoutDirections">writing directions</a> and
<a href="text.html#TextLayoutPositioning">general glyph
positioning</a>. The specialized layout rules corresponding to
@@ -138,38 +139,38 @@
while making it more obvious that rendering agents can use the
same code to both render text in HTML and in SVG. It also allows
the easy extension of SVG text layout to include things like
automatic text wrapping.
</p>
<p>
Because SVG text is packaged as XML character data:
-
- <ul>
- <li>
- Text data in SVG content is readily accessible to the visually
- impaired (see <a href="access.html">Accessibility
- Support</a>),
- </li>
-
- <li>
- In many viewing scenarios, the user will be able to search for
- and select text strings and copy selected text strings to the
- system clipboard (see <a href="text.html#TextSelection">Text
- selection and clipboard operations</a>),
- </li>
-
- <li>
- XML-compatible Web search engines will find text strings in
- SVG content with no additional effort over what they need to
- do to find text strings in other XML documents.
- </li>
- </ul>
- </p>
+ </p>
+
+ <ul>
+ <li>
+ Text data in SVG content is readily accessible to the visually
+ impaired (see <a href="access.html">Accessibility
+ Support</a>),
+ </li>
+
+ <li>
+ In many viewing scenarios, the user will be able to search for
+ and select text strings and copy selected text strings to the
+ system clipboard (see <a href="text.html#TextSelection">Text
+ selection and clipboard operations</a>),
+ </li>
+
+ <li>
+ XML-compatible Web search engines will find text strings in
+ SVG content with no additional effort over what they need to
+ do to find text strings in other XML documents.
+ </li>
+ </ul>
<p>
Multi-language SVG content is possible by
<a href="i18n.html#I18nTextSubstitution">substituting different
text strings based on the user's preferred language</a>.
</p>
<p>
@@ -453,27 +454,27 @@
which combines, usually with some re-ordering, multiple consonants
and vowel glyphs.
</p>
<div class="issue">
<p>
The discussion of vertical text (CJK and Mongolian) is
lacking. Here are some notes:
- <ul>
- <li>Some Japanese opentype fonts have different glyphs for horizontal and vertical text.</li>
- <li>Kanji is set in a box 1 zenkaku width x 1 zenkaku width.</li>
- <li>Kanji baseline divides box into 88:12 ratio.</li>
- <li>Japanese/Latin mixed, 1 zenkaku should be slightly smaller than 1 em (ex. 10pt: 3.25mm vs 3.51mm).</li>
- <li>See: <a href="http://ajt.ktug.org/2008/0201okumura.pdf">pTEX and Japanese Typesetting</a>.</li>
- <li>Vertical kana can have ligatures!</li>
- <li>At least one proportional (horizontal and vertical) Japanese font exists.</li>
- <li>See: <a href="http://www.imug.org/presentations/imug-lunde-09162010.pdf">Kazuraki: Adobe Systems' Groundbreaking New Japanese Typeface</a>.</li>
- </ul>
</p>
+ <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>
<h2 id="TextElement">The <span class="element-name">'text'</span> element</h2>
<edit:with element='text'>
<p>
@@ -1373,121 +1374,120 @@
to be rendered. The example demonstrates the propagation of the
<a>'rotate'</a> attribute.
</p>
<edit:example href='images/text/tspan05.svg' name='tspan05' description="propagation of rotation values to nested tspan elements" image='yes' link='yes'/>
<p>
Rotation of red text inside the <a>'text'</a> element:
-
- <ul>
- <li>
- The <a>'rotate'</a> value will rotate the characters in the text
- <em>"Not "</em> by 5, 15, 25 and 35 degrees respectively.
- </li>
- <li>
- A <a>'rotate'</a> value is applied to the space that follows the
- text <em>"Not"</em>, to the space in between the text in the
- "child1" and "child5" <a>'tspan'</a> elements, and to the space
- before the text <em>"rotation"</em>.
- </li>
- <li>
- The next current <a>'rotate'</a> value specified is 45 followed
- by 55. The current <a>'rotate'</a> value in the <a>'text'</a>
- element is incremented as subsequent characters in the text of the
- child <a>'tspan'</a> elements are processed.
- </li>
- <li>
- The next immediate <a>'tspan'</a> element specifies rotate values
- for the text, hence the current <a>'rotate'</a> value will change to
- the next value in the list (but is not used) as each character is
- processed until the last value of 55 degrees is reached.
- </li>
- <li>
- The last <a>'rotate'</a> value of 55 degrees will be applied to all
- the characters in the text <em>"rotation"</em>.
- </li>
- </ul>
- </p>
+ </p>
+
+ <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
<a>'tspan'</a> elements nested withing a <a>'text'</a> element:
</p>
<img alt="Image that shows propagation of rotation values" src="images/text/tspan05-diagram.png" width="528" height="918" />
@@ -3152,28 +3152,30 @@
<span class="issue">FIX FOR AUTO-WRAPPED TEXT IN SHAPE</span>
</p>
<p>
The current text position is adjusted after each glyph to
establish a new current text position at which the next glyph
shall be rendered. The adjustment to the current text position is
based on:
- <ul>
- <li>The current
- <a href="text.html#SettingInlineProgressionDirection">inline-progression-direction</a>.</li>
- <li>Glyph-specific advance values corresponding to
- the <a href="text.html#GlyphOrientation">glyph orientation</a> of
- the glyph just rendered.</li>
- <li>Kerning tables in the font.</li>
- <li>The current values of various attributes and properties, such as
- the <a href="text.html#SpacingProperties">spacing properties</a>.</li>
- <!-- 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
used. For vertical text, a suggested approximation is the sum of
the ascent and descent values for the glyph. Another suggested
approximation for an advance value for both horizontal and
vertical text is the size of an <em>em</em> (see
<a href="fonts.html#FontFaceElementUnitsPerEmAttribute">units-per-em</a>).
@@ -3230,107 +3232,106 @@
Once all the glyphs in a <a>'text'</a> element are laid out
according to the above rules, the position of the glyphs maybe
adjusted according to SVG specific rules.
Adjustments to the current text position are either
<dfn id='absolute-position-adjustment'>absolute position adjustments</dfn> or
<dfn id='relative-position-adjustment'>relative position
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
relative position adjustments.
</p>
<p id="TextChunk">
Each absolute position adjustment defines a new
<dfn>text chunk</dfn>. Absolute position adjustments impact text
layout in the following ways:
-
- <ul>
- <li>
- Ligatures only occur when a set of characters which might map
- to a ligature are all in the same text chunk.
- </li>
- <li>
- Each text chunk represents a separate block of text for
- alignment due to <a>'text-anchor'</a> property values.
- </li>
- <li>
- Reordering of characters due to
- <a href="text.html#RelationshipWithBiDirectionality">bidirectionality</a>
- only occurs within a text chunk. Reordering does <em>not</em>
- happen across text chunks.
- </li>
- </ul>
- </p>
+ </p>
+
+ <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>
<p class="note">
New in SVG 2. Added <a>'white-space'</a> to allow a more useful
way to control whitespace handling. Aligns SVG and HTML/CSS text
processing. <a>'xml:space'</a> deprecated in new content, retained
for backwards compatibility.
</p>
- <h4 id="TextWhiteSpace">SVG 2 Preferred white space handling, the <a>'white-space'</a> property</h4>
+ <h4 id="TextWhiteSpace">SVG 2 Preferred white space handling, the <span class='property'>'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>
<th>Name:</th>
<td><dfn id="WhiteSpaceProperty">white-space</dfn></td>
</tr>
<tr>
<th>Value:</th>
@@ -3403,17 +3404,17 @@
is from the Japanese poem <em>Iroha</em>. The lines are broken
at traditional places. <span class="issue">Example does not
render properly in Firefox. It is SVG 1.1 text. Bad Firefox.</span>
</p>
</div>
</div>
-<h4 id="LegacyXMLSpace">Legacy whitespace handling, the <a>'xml:space'</a> property</h4>
+<h4 id="LegacyXMLSpace">Legacy whitespace handling, the <span class='property'>'xml:space'</span> property</h4>
<p id="XMLSpaceAttribute">
For compatibility, SVG 2 also supports the XML attribute
<a>'xml:space'</a> to specify the handling of white space
characters within a given <a>'text'</a> element's character
data. New content should not use <a>'xml:space'</a> but
instead, use the <a>'white-space'</a> property.
</p>
@@ -3487,50 +3488,50 @@
[11] <text xml:space='preserve'>WS examplenon-indented lines</text>
</pre>
<p>
The first pair of <a>'text'</a> elements above show the
effect of indented character data. The attribute
<span class="attr-value">xml:space="default"</span> in the first
<a>'text'</a> element instructs the user agent to:
-
- <ul>
- <li>convert all tabs (if any) to space characters,</li>
- <li>strip out all line breaks (i.e., strip out the line
- breaks at the end of lines [01], [02] and [03]),</li>
- <li>strip out all leading space characters (i.e., strip out
- space characters before "WS example" on line [02]),</li>
- <li>strip out all trailing space characters (i.e., strip out
- space characters before "</text>" on line [04]),</li>
- <li>consolidate all intermediate space characters (i.e., the
- space characters before "indented lines" on line [03]) into a
- single space character.</li>
- </ul>
- </p>
+ </p>
+
+ <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
representations for a newline indicator (e.g., the literal
two-character sequence "#xD#xA" or the stand-alone literals #xD or
#xA) into the single character #xA before passing character data
to the application. Thus, each newline in SVG will be represented
by the single character #xA, no matter what representation for
@@ -3662,28 +3663,28 @@
[<a href="refs.html#ref-CSS3LINEBOX">CSS3LINEBOX</a>]
<span class="issue">CSS 3 adds the value 'none'.</span>
</p>
<h3 id="SpacingProperties">Spacing within lines</h3>
<p>
Two properties affect the space between characters and words:
-
- <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
from SVG 1.1 has been removed in favor of using
<a>'letter-spacing'</a> to add or remove spacing between glyphs
and the <span class='property'>'font-kerning'</span> property to
disable kerning based on information from the font.
</p>
@@ -4115,17 +4116,17 @@
<dt id="TextBottomBaselineDefinition"><b>text-bottom</b></dt>
<dd>
This baseline is the same as the "text-after-edge"
baseline in a horizontal writing-mode and is undefined in a
vertical writing mode.
</dd>
</dl>
-<h4 id='DominantBaseline'>The <a>'dominant-baseline'</a> property</h4>
+<h4 id='DominantBaseline'>The <span class='property'>'dominant-baseline'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
<a href="http://dev.w3.org/csswg/css-inline/#dominant-baseline-prop">'dominant-baseline'</a>.
[<a href="refs.html#ref-CSS21">CSSXX</a>]
</p>
<table class="propdef">
@@ -4339,17 +4340,17 @@
<p>
If there is no baseline table in the nominal font or if the
baseline table lacks an entry for the desired baseline, then the
user agent may use heuristics to determine the position of the
desired baseline.
</p>
-<h4 id='AlignmentBaseline'>The <a>'alignment-baseline'</a> property</h4>
+<h4 id='AlignmentBaseline'>The <span class='property'>'alignment-baseline'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
<a href="http://dev.w3.org/csswg/css-inline/#alignment-baseline">'alignment-baseline'</a>.
[<a href="refs.html#ref-CSS21">CSSXX</a>]
</p>
<table class="propdef">
@@ -4457,17 +4458,17 @@
<dd>The alignment-point of the object being aligned is
aligned with the "hanging" baseline of the parent <a>text content element</a>.</dd>
<dt><b>mathematical</b></dt>
<dd>The alignment-point of the object being aligned is
aligned with the "mathematical" baseline of the parent <a>text content element</a>.</dd>
</dl>
-<h4 id='BaselineShift'>The <a>'baseline-shift'</a> property</h4>
+<h4 id='BaselineShift'>The <span class='property'>'baseline-shift'</span> property</h4>
<p class="note">
See the CSS Line Layout Module 3 specification for the definition of
<a href="http://dev.w3.org/csswg/css-inline/#baseline-shift">'baseline-shift'</a>.
[<a href="refs.html#ref-CSS21">CSSXX</a>]
</p>
<table class="propdef">
@@ -4624,45 +4625,45 @@
This is the default text layout method and is used in the absence
of an explicitly defined <a>content area</a>. It is also used as a
first step in laying out <em>text on a path</em> (with slightly
modified rules). In this layout method, no automatic line breaking
or word wrapping is done. Nominally, the text is rendered as a
single line inside a rectangular <a>content area</a> of infinite
width and height. Multiple lines of text can be obtained by
precomputing line breaks and using one of the following methods:
-
- <ul>
- <li>
- 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:
<a>'text-align'</a>, <a>'text-align-last'</a>, <a>'line-break'</a>,
<a>'word-break'</a>, <a>'hyphens'</a>, <a>'word-wrap'</a>,
and <a>'overflow-wrap'</a>.
</p>
@@ -4671,39 +4672,38 @@
<p>
Multi-line pre-formatted text may be created by using the
<a>'white-space'</a> values <span class="prop-value">pre</span>
or <span class="prop-value">pre-line</span>. In these cases, a
line-feed or carriage return is preserved as a <a>forced line
break</a>. When a renderer encounters a <a>forced line break</a>,
the <a>current text
position</a> is set as follows:
- <ul>
- <li>
- For horizontal text: <span class="val">x</span> is reset to
- the initial <a>current
- text position</a> while <span class="val">y</span> is
- incremented by the computed value of the <a>'line-height'</a>
- property.
- </li>
- <li>
- For vertical text: <span class="val">y</span> is reset to the
- initial value while <span class="val">x</span> is decremented
- (for right-to-left block-progression-direction) or incremented
- (for left-to-right block-progression-direction) by the computed
- value of <a>'line-height'</a>.
- <p class="issue">
- SVG 1.1 only has right-to-left 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>
<p>
After text is laid out according to the basic CSS text layout
rules, glyphs can be repositioned using SVG specific rules. Two
types of adjustments can be made. The first uses the
<a>'tspan/x'</a>, <a>'tspan/y'</a>, <a>'tspan/dx'</a>,
@@ -4714,17 +4714,17 @@
</p>
<h4 id="TextLayoutPreXY">Repositioning Glyphs</h4>
<p class="issue">
Expand on how 'x' and 'y' effect characters.
</p>
-<h4 id="TextAnchoringProperties">Text alignment, the <a>'text-anchor'</a> property</h4>
+<h4 id="TextAnchoringProperties">Text alignment, the <span class='property'>'text-anchor'</span> property</h4>
<p>
The <a>'text-anchor'</a> property is used to align (start-,
middle- or end-alignment) a string of <em>pre-formatted</em> text
relative to a given point. It is not applicable to
<em>auto-wrapped text</em>, see instead <a>'text-align'</a>. For
multi-line text, the alignment takes place for each line.
</p>
Received on Monday, 10 February 2014 20:44:45 UTC