Beyond Straight Lines

Chapter 9 looks at the <textPath> element and how it can be used to create curved or complex text layouts.

The links below will open the live example files or high-res PNG or JPEG screenshots in a new browser tab. Alternatively, you can download the entire collection as a zip archive or fork it as a GitHub repository. Be sure to read the O’Reilly Media policy on the use of example code.

Example 9-1 & Figure 9-1 (curved text using absolute positioning):
- SVG file
- screenshot
Example 9-2 & Figure 9-2 (curved text using <textPath>):
- SVG file
- screenshot
Figure 9-3 (centering text on a path):
- SVG file
- screenshot
Example 9-3 & Figure 9-4, 9-5, & 9-8 (Arabic text on a path):
- SVG file (displays incorrectly in most browsers)
- screenshot, in Firefox
- SVG file, using strokes instead of shadows (displays incorrectly in most browsers)
- screenshot of stroked text, in Firefox
- zoomed-in screenshot of shadowed text, in Firefox
Example 9-4 & Figure 9-6 (<tspan> inside <textPath> for styling):
- SVG file
- screenshot
Example 9-5 & Figure 9-7 (<tspan> inside <textPath> for positioning adjustments):
- SVG file
- screenshot
Example 9-6 & Figure 9-9 (using multiple <textPath> elements for multiline text):
- SVG file
- screenshot