baseline-shift

  • Revision slug: Web/SVG/Attribute/baseline-shift
  • Revision title: baseline-shift
  • Revision id: 427179
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment page created, 243 words addedMoved From SVG/Attribute/baseline-shift to Web/SVG/Attribute/baseline-shift

Revision Content

« SVG Attribute reference home

The baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("baseline-shift","CSS baseline-shift") }} for further information.

Usage context

Categories Presentation attribute
Value auto | baseline | sup | sub | <percentage> | <length> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
baseline
There is no baseline shift; the dominant-baseline remains in its original position.
sub
The dominant-baseline is shifted to the default position for subscripts.
super
The dominant-baseline is shifted to the default position for superscripts.
<percentage>
The resulting value of the property is this percentage multiplied by the {{ SVGAttr("line-height") }} of the {{ SVGElement("text") }} element. The dominant-baseline is shifted in the shift direction (positive value) or opposite to the shift direction (negative value) of the parent text content element by the resulting value. A value of "0%" is equivalent to "baseline".
<length>
The dominant-baseline is shifted in the shift direction (positive value) or opposite to the shift direction (negative value) of the parent text content element by the <length> value. A value of "0cm" is equivalent to "baseline".

Example

Elements

The following elements can use the baseline-shift attribute

  • {{ SVGElement("tspan") }}
  • {{ SVGElement("tref") }}
  • {{ SVGElement("altGlyph") }}
  • {{ SVGElement("textPath") }}

See also

  • {{ cssxref("baseline-shift","CSS baseline-shift") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>baseline-shift</code> attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("baseline-shift","CSS baseline-shift") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong>auto</strong> | baseline | sup | sub | &lt;percentage&gt; | <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty" title="http://www.w3.org/TR/SVG11/text.html#BaselineShiftProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>baseline</dt> <dd>There is no baseline shift; the dominant-baseline remains in its original position.</dd> <dt>sub</dt> <dd>The dominant-baseline is shifted to the default position for subscripts.</dd> <dt>super</dt> <dd>The dominant-baseline is shifted to the default position for superscripts.</dd> <dt>&lt;percentage&gt;</dt> <dd>The resulting value of the property is this percentage multiplied by the {{ SVGAttr("line-height") }} of the {{ SVGElement("text") }} element. The dominant-baseline is shifted in the shift direction (positive value) or opposite to the shift direction (negative value) of the parent text content element by the resulting value. A value of "0%" is equivalent to "baseline".</dd> <dt><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></dt> <dd>The dominant-baseline is shifted in the shift direction (positive value) or opposite to the shift direction (negative value) of the parent text content element by the <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> value. A value of "0cm" is equivalent to "baseline".</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>baseline-shift</code> attribute</p>
<ul> <li>{{ SVGElement("tspan") }}</li> <li>{{ SVGElement("tref") }}</li> <li>{{ SVGElement("altGlyph") }}</li> <li>{{ SVGElement("textPath") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("baseline-shift","CSS baseline-shift") }}</li>
</ul>
Revert to this revision