Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 7
The Art of the Word: Graphical Text Layout

This chapter briefly introduces the three main types of SVG text layout:

The features described here are relatively well-supported in web browsers, at least for Western languages. If you are using right-to-left languages such as Hebrew or Arabic, or scripted languages that use complex text shaping (changing or re-arranging the appearance of characters based on their context), beware of browsers making a mess of your text when using character positioning or text on a path.

We also include tips on working with web fonts and fallback system fonts.

The font-selection properties in SVG are entirely borrowed from core CSS. If you’re familiar with styling text with CSS (and we’re assuming you are) you are halfway to styling SVG text. You can even use web fonts declared with an @font-face rule, although external font files—like external stylesheets—are restricted in some SVG contexts.

SVG text layout, in contrast, does not reuse CSS layout. When used to style HTML, CSS lays out text by dividing the page into boxes and then wrapping streams of text within them. If you change the styles of a section of HTML text so that it takes up more space, the rest of the text is pushed out of the way, or wraps to a new line. SVG text doesn’t (yet) work like that.

In SVG, each <text> element is independent, positioned exactly where you place it, even if it overlaps other content. There are ways to make SVG text flow in continuous streams, but it takes much more work than the equivalent CSS layout. SVG text is therefore best reserved for its intended purposes: figure labels and short snippets of precisely positioned decorative text.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Figure 7-1. SVG text, with minimal style and layout
Example 7-1. Defining basic text in an SVG
Example 7-2. Using CSS rules to style text in an SVG
Figure 7-2. SVG text, filled in red and stroked in black
Figure 7-3. The labeled photograph
Example 7-3. Using SVG text to label a photograph
Figure 7-4. The labeled photograph, scaled down, with and without font-size media queries
Figure 7-X1. The interactive labels, revealed one at a time
Example 7-X1. Making SVG text labels interactive on mouseover
Figure 7-5. SVG text in a comic book bubble
Example 7-4. Positioning graphical SVG text
Figure 7-6. SVG text in a comic book bubble, displayed in default handwriting fonts
Figure 7-7. SVG text in a comic book bubble, after text anchors are adjusted, displayed in default handwriting fonts
Figure 7-8. SVG text in a comic book bubble, after text anchors are adjusted and fallback fonts are specified
Figure 7-9. SVG comic book text, with fallback fonts in mobile browsers
Figure 7-10. Styled SVG text in a comic book bubble
Example 7-5. Using <tspan> to modify text styles
Figure 7-11. Styled and vertically staggered SVG text in a comic book bubble
Figure 7-12. SVG text with staggered letters
Example 7-6. Using multiple values in text positioning attributes
Figure 7-X2. Rotated letters in SVG comic book text
Example 7-X2. Using rotate to alter the angle of individual characters
Figure 7-13. Curved text positioned using <textPath>
Figure 7-14. Curved text positioned using multiple <textPath> elements (titled “Curved text positioned using <textPath>” in initial printings of the book)
Example 7-7. Arranging text using <textPath> elements
Figure 7-15. The paths used to position the curved text
Figure 7-16. Curved text positioned using multiple lines offset from a single <textPath>
Example 7-8. Positioning multiple lines of text above and below the same path
Figure 7-17. <textPath> lines adjusted with startOffset
Figure 7-X3. Circular text using <textPath> and textLength
Example 7-X3. Controlling text length for text on a closed path

Online Extras#