SVG Text Layout

Chapter 5. Off-Kilter Characters

If you want full control over the layout of graphical text, why stop at positioning lines of text? Sometimes, for fun or fussy designs, you’ll want to position individual characters.

If you want to style individual letters with CSS, each one needs to be its own element. You might therefore expect that it would be necessary to wrap each character in its own <tspan> element in order to position individual letters in SVG. You could do this—but you don’t have to. The SVG text positioning options allow you to position individual characters within a larger text element.

You’re also not restricted to strict horizontal and vertical positions. This chapter introduces the rotate attribute for controlling the angle of individual characters.

Multiple Positions

All the text-positioning attributes (x, y, dx, and dy) can take a list of values, which will get assigned character by character to the content.

Tip

As with most of SVG, the list of values can be either space-separated or comma-separated.

Any whitespace characters at the start of the text string are normally removed before assigning positions. Spaces in the middle of the text are collapsed, so that any amount of whitespace in the code counts as a single space character for positioning. These behaviors can be changed, as described in “Working with Whitespace”.

Example 5-1 creates a simple example of this effect, using x and y lists to explicitly position the letters of the word “Wiggle” in an up-and-down ...