SVG Text Layout

Chapter 8. Lining Up

Text layout, as we have seen, involves both vertical and horizontal positioning. It only stands to reason that there should be control over both vertical and horizontal alignment.

The text-anchor property controls how a string of characters (text chunk) is aligned around the anchor point, in the direction of text flow (the “inline progression direction” in the specifications). In other words, it sets horizontal alignment for horizontal text and vertical alignment for vertical text. However, you often also want to control how the text is aligned in the perpendicular direction—for horizontal text, you want to control the vertical alignment.

This is especially true in graphical layouts. In flow diagrams or system architecture diagrams, one of the more complex tasks in putting things together is accurately centering lines of text. Not only do you have to center the content horizontally, but also vertically. Setting a y="50%" value is not sufficient, as it makes the text appear top-heavy: in most scripts, the part above the baseline is much larger than the part below.

It isn’t only a problem in technical drawings. The quintessential interface device, the button, usually consists of text within a shape. Centering text within such buttons can be difficult at the best of times.

Again, the matter of alignment is complicated by the many different writing systems in use around the world—and around the World Wide Web. Latin letters (such as the ones you’re now reading) ...