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 9. Beyond Straight Lines

Baselines ensure that glyphs are positioned to create a pleasing line of text. However, we’ve already said that, in graphical layout, you don’t always want text to display in perfectly straight lines. Sometimes it’s fun to make text move out of those boring lines and into more complex curves—circles, spirals, around the edges of various objects, and so forth.

This chapter introduces the <textPath> element, which allows you to use SVG path geometry to describe complex text layouts.

Creating Curved Text

We’ve shown (in Chapter 5) how you can position and rotate individual characters. For some simple designs, that’s enough. Example 9-1 spaces the letters of the word “Sunrise” in a semicircle, each letter positioned every 30° and rotated to match, as shown in Figure 9-1.

Example 9-1. Arranging letters around a shape with character position attributes
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xml:lang="en"
     width="4in" height="2.3in" viewBox="0 0 400 230">
    <title>Text Positioned in a Curve</title>
    <style type="text/css">
        text {
            font: bold italic 48px "Times New Roman", Times, serif;
            fill: gold;
            stroke: orangeRed;
        }
    </style>
    <rect fill="#CEE" width="100%" height="100%" />
    <g transform="translate(200,180)">                1
        <text x="-150 -130 -75 0 75 130 150"
              y="0 -75 -130 -150 -130 -75 0"
              rotate="-90 -60 -30 0 30 60 90"
              >Sunrise ...

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