Compare Revisions


Change Revisions

Revision 235636:

Revision 235636 by ratcliffe_mike on

Revision 66723:

Revision 66723 by ratcliffe_mike on

SVG, NeedsTechnicalReview, NeedsExample, "SVG Attribute", NeedsCompatTable
SVG, NeedsTechnicalReview, NeedsExample, "SVG Attribute", NeedsCompatTable

Revision 235636
Revision 66723
n8      This page has no content. Enrich MDN by contributing.n8      « <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 
 >Attribute reference home</a>
tt10    <p>
11      The <code>dominant-baseline</code> attribute is used to det
 >ermine or re-determine a scaled-baseline-table. A scaled-baseline
 >-table is a compound value with three components: a baseline-iden
 >tifier for the dominant-baseline, a baseline-table and a baseline
 >-table font-size. Some values of the property re-determine all th
 >ree values; other only re-establish the baseline-table font-size.
 > When the initial value, <span class="prop-value">auto</span>, wo
 >uld give an undesired result, this property can be used to explic
 >itly set the desire scaled-baseline-table.
12    </p>
13    <p>
14      If there is no baseline table in the nominal font or if the
 > baseline table lacks an entry for the desired baseline, then the
 > browser may use heuristics to determine the position of the desi
 >red baseline.
15    </p>
16    <p>
17      As a presentation attribute, it also can be used as a prope
 >rty directly inside a CSS stylesheet, see {{ cssxref("dominant-ba
 >seline","CSS dominant-baseline") }} for further information.
18    </p>
19    <h2 id="Usage_context">
20      Usage context
21    </h2>
22    <table class="standard-table">
23      <tbody>
24        <tr>
25          <th scope="row">
26            Categories
27          </th>
28          <td>
29            Presentation attribute
30          </td>
31        </tr>
32        <tr>
33          <th scope="row">
34            Value
35          </th>
36          <td>
37            <strong>auto</strong> | use-script | no-change | rese
 >t-size | ideographic | alphabetic | hanging | mathematical | cent
 >ral | middle | text-after-edge | text-before-edge | inherit
38          </td>
39        </tr>
40        <tr>
41          <th scope="row">
42            Animatable
43          </th>
44          <td>
45            Yes
46          </td>
47        </tr>
48        <tr>
49          <th scope="row">
50            Normative document
51          </th>
52          <td>
53            <a class="external" href="
 >text.html#DominantBaselineProperty" title="
 >VG11/text.html#DominantBaselineProperty">SVG 1.1 (2nd Edition)</a
54          </td>
55        </tr>
56      </tbody>
57    </table>
58    <dl>
59      <dt>
60        auto
61      </dt>
62      <dd>
63        <p>
64          If this property occurs on a {{ SVGElement("text") }} e
 >lement, then the computed value depends on the value of the {{ SV
 >GAttr("writing-mode") }} attribute. If the {{ SVGAttr("writing-mo
 >de") }} is horizontal, then the value of the dominant-baseline co
 >mponent is <code>alphabetic</code>, else if the {{ SVGAttr("writi
 >ng-mode") }} is vertical, then the value of the dominant-baseline
 > component is <code>central</code>.&nbsp;
65        </p>
66        <p>
67          If this property occurs on a {{ SVGElement("tspan") }},
 > {{ SVGElement("tref") }}, {{ SVGElement("altGlyph") }} or {{ SVG
 >Element("textPath") }} element, then the dominant-baseline and th
 >e baseline-table components remain the same as those of the paren
 >t text content element. If the computed {{ SVGAttr("baseline-shif
 >t") }} value actually shifts the baseline, then the baseline-tabl
 >e font-size component is set to the value of the {{ SVGAttr("font
 >-size") }} attribute on the element on which the <code>dominant-b
 >aseline</code> attribute occurs, otherwise the baseline-table fon
 >t-size remains the same as that of the element. If there is no pa
 >rent text content element, the scaled-baseline-table value is con
 >structed as above for {{ SVGElement("text") }} elements.
68        </p>
69      </dd>
70      <dt>
71        use-script
72      </dt>
73      <dd>
74        The dominant-baseline and the baseline-table components a
 >re set by determining the predominant script of the character dat
 >a content. The {{ SVGAttr("writing-mode") }}, whether horizontal 
 >or vertical, is used to select the appropriate set of baseline-ta
 >bles and the dominant baseline is used to select the baseline-tab
 >le that corresponds to that baseline. The baseline-table font-siz
 >e component is set to the value of the {{ SVGAttr("font-size") }}
 > attribute on the element on which the <code>dominant-baseline</c
 >ode> attribute occurs.
75      </dd>
76      <dt>
77        no-change
78      </dt>
79      <dd>
80        The dominant-baseline, the baseline-table, and the baseli
 >ne-table font-size remain the same as that of the parent text con
 >tent element.
81      </dd>
82      <dt>
83        reset-size
84      </dt>
85      <dd>
86        The dominant-baseline and the baseline-table remain the s
 >ame, but the baseline-table font-size is changed to the value of 
 >the {{ SVGAttr("font-size") }} attribute on this element. This re
 >-scales the baseline-table for the current {{ SVGAttr("font-size"
 >) }}.
87      </dd>
88      <dt>
89        ideographic
90      </dt>
91      <dd>
92        The baseline-identifier for the dominant-baseline is set 
 >to be <code>ideographic</code>, the derived baseline-table is con
 >structed using the <code>ideographic</code> baseline-table in the
 > font, and the baseline-table font-size is changed to the value o
 >f the {{ SVGAttr("font-size") }} attribute on this element.
93      </dd>
94      <dt>
95        alphabetic
96      </dt>
97      <dd>
98        The baseline-identifier for the dominant-baseline is set 
 >to be <code>alphabetic</code>, the derived baseline-table is cons
 >tructed using the <code>alphabetic</code> baseline-table in the f
 >ont, and the baseline-table font-size is changed to the value of 
 >the {{ SVGAttr("font-size") }} attribute on this element.
99      </dd>
100      <dt>
101        hanging
102      </dt>
103      <dd>
104        The baseline-identifier for the dominant-baseline is set 
 >to be <code>hanging</code>, the derived baseline-table is constru
 >cted using the <code>hanging</code> baseline-table in the font, a
 >nd the baseline-table font-size is changed to the value of the {{
 > SVGAttr("font-size") }} attribute on this element.
105      </dd>
106      <dt>
107        mathematical
108      </dt>
109      <dd>
110        The baseline-identifier for the dominant-baseline is set 
 >to be <code>mathematical</code>, the derived baseline-table is co
 >nstructed using the <code>mathematical</code> baseline-table in t
 >he font, and the baseline-table font-size is changed to the value
 > of the {{ SVGAttr("font-size") }} attribute on this element.
111      </dd>
112      <dt>
113        central
114      </dt>
115      <dd>
116        The baseline-identifier for the dominant-baseline is set 
 >to be <code>central</code>. The derived baseline-table is constru
 >cted from the defined baselines in a baseline-table in the font. 
 >That font baseline-table is chosen using the following priority o
 >rder of baseline-table names: <code>ideographic</code>, <code>alp
 >habetic</code>, <code>hanging</code>, <code>mathematical</code>. 
 >The baseline-table font-size is changed to the value of the {{ SV
 >GAttr("font-size") }} attribute on this element.
117      </dd>
118      <dt>
119        middle
120      </dt>
121      <dd>
122        The baseline-identifier for the dominant-baseline is set 
 >to be <code>middle</code>. The derived baseline-table is construc
 >ted from the defined baselines in a baseline-table in the font. T
 >hat font baseline-table is chosen using the following priority or
 >der of baseline-table names: <code>alphabetic</code>, <code>ideog
 >raphic</code>, <code>hanging</code>, <code>mathematical</code>. T
 >he baseline-table font-size is changed to the value of the {{ SVG
 >Attr("font-size") }} attribute on this element.
123      </dd>
124      <dt>
125        text-after-edge
126      </dt>
127      <dd>
128        The baseline-identifier for the dominant-baseline is set 
 >to be <code>text-after-edge</code>. The derived baseline-table is
 > constructed from the defined baselines in a baseline-table in th
 >e font. The choice of which font baseline-table to use from the b
 >aseline-tables in the font is browser dependent. The baseline-tab
 >le font-size is changed to the value of the {{ SVGAttr("font-size
 >") }} attribute on this element.
129      </dd>
130      <dt>
131        text-before-edge
132      </dt>
133      <dd>
134        The baseline-identifier for the dominant-baseline is set 
 >to be <code>text-before-edge</code>. The derived baseline-table i
 >s constructed from the defined baselines in a baseline-table in t
 >he font. The choice of which baseline-table to use from the basel
 >ine-tables in the font is browser dependent. The baseline-table f
 >ont-size is changed to the value of the {{ SVGAttr("font-size") }
 >} attribute on this element.
135      </dd>
136    </dl>
137    <h2 id="Example">
138      Example
139    </h2>
140    <h2 id="Elements">
141      Elements
142    </h2>
143    <p>
144      The following elements can use the <code>dominante-baseline
 >-shift</code> attribute
145    </p>
146    <ul>
147      <li>
148        <a href="/en/SVG/Element#Text_content_elements" title="ht
 >>Text content elements</a> »
149      </li>
150    </ul>
151    <h2 id="See_also">
152      See also
153    </h2>
154    <ul>
155      <li>{{ cssxref("dominant-baseline","CSS dominant-baseline")
 > }}
156      </li>
157    </ul>

Back to History