Off-Kilter Characters

Chapter 5 explores SVG’s ability to control the position and orientation of individual text characters.

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 5-1 & Figure 5-1 (positioning individual characters):
  • SVG file
  • screenshot
  • SVG file, using relative attributes
• Example 5-2 & Figure 5-2 (conflicting character positions on nested elements):
  • SVG file
  • screenshot
• Example 5-3 & Figure 5-3 (rotating characters):
  • SVG file
  • screenshot
• Example 5-4 & Figure 5-4 (comic book text):
  • SVG file
  • screenshot, in Firefox
  • screenshot, in Internet Explorer (Chromium and WebKit are similar)
  • side-by-side screenshots comparing the gradient effect
  • See also Chapter 10 for examples of font effects on layout

Return to the main table of contents.