SVG Text Layout

Appendix B. Text and Font Style Properties

This appendix summarizes all the text and font-related style properties that currently have an impact on SVG 1.1 text elements. Except where explicitly noted otherwise, they can all be defined either with CSS stylesheets, inline style attributes, or presentation attributes. Most properties are inherited by default; those that aren’t are clearly indicated. Any property can be forced to inherit with the inherit keyword, or reset to the default value with initial.

You’ll need to consult the main text or the specifications for details about the effect of each style value; this is primarily intended as a reference that you can flip to whenever you need to confirm the default for a property or the spelling of a keyword.

As multiline text is introduced for SVG 2, many other CSS properties will become relevant. In addition, new style properties introduced for CSS 3 may apply to SVG text.

alignment-baseline

Defines which point in each text glyph, perpendicular to the inline text layout orientation, should be aligned with the equivalent point in the parent text content.

• Allowed values:

  • One of the baseline keywords: alphabetic, ideographic, hanging, mathematical, central, middle, text-before-edge, text-after-edge (CSS 3 replaces the last two with text-top and text-bottom)

  • auto or baseline

  • In CSS 3: top, bottom, and center, which would use the total block dimensions instead of font baselines

• Default: in SVG 1.1, auto (not well implemented); ...