This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

alignment-baseline

Summary

Specifies how an element is aligned with respect to its parent; that is, specifies which baseline of the element is to be aligned with the corresponding baseline of the parent. Defaults to the baseline with the same name as the computed value of the alignment-baseline property.

Applies to svg/attributes
Name: alignment-baseline Value: baseline

Examples

Using ‘middle’ for both alignment-baseline and text-anchor is convenient for positioning text centered upon a spot regardless of size and length.

<text x="80" y="30" font-size="20"
  text-anchor="middle" alignment-baseline="middle">
    Right in the middle!
</text>

Notes

Remarks

This property specifies how an object is aligned with respect to its parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. That is, the position of “ideographic” alignment-point in the block-progression-direction is the position of the “ideographic” baseline in the baseline-table of the object being aligned. One of the characteristics of international text is that there are different baselines (different alignment points) for glyphs in different scripts. For example, in horizontal writing, ideographic scripts, such as Han Ideographs, Katakana, Hiragana, and Hangul, alignment occurs with a baseline near the bottoms of the glyphs; alphabetic based scripts, such as Latin, Cyrillic, Hebrew, Arabic, align a point that is the bottom of most glyphs, but some glyphs descend below the baseline; and Indic based scripts are aligned at a point that is near the top of the glyphs. The “EM box” is a relative measure of the height of the glyphs in the font. The “M” character fits in a box 1 EM high and 1 EM wide.

Syntax

alignment-baseline: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit

Standards information

Related specifications

SVG 1.1
W3C Recommendation

See also

Related pages

Attributions