O'Reilly logo

SVG Text Layout by Kurt Cagle, Amelia Bellamy-Royds

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required