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

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

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