Staggered and Fainting Text with SVG

Positioning individual letters or words above and below the baseline - the invisible horizon on which capital letters “rest” - can be challenging to achieve in HTML and CSS, with the possible exception of specialized ordinal characters. Thankfully, SVG has its own unique controls for positioning letters, making it ideal for creating staggered text.

As a means of demonstrating these effects, this article continues my earlier piece on making SVG comic book dialogue. This time, I’ll be creating “wavy balloon” dialog, commonly used to indicate near-unconsciousness or last words.

tspan

Very much like HTML’s <span> element, SVG has <tspan>, which fulfills much the same function: wrapping around words, glyphs or phrases to provide a different appearance. Just like <span>, <tspan> makes no difference applied by itself; some sort of styling or other information must be added.

x & y, dx and dy

Frequently used as attributes for the <text> and <tspan> elements, dx and dy indicate a relative shift in position (horizontal and vertical, respectively) for the associated text: that is, a movement of the text away from the character’s normal, default position.

By comparison, x and y attribute values can be thought of as absolute positions, measured from the origin point of the viewBox, unless the <text> element is inside another transformed element, in which case it measures itself from that element. Values without a measurement unit (in, %, etc) will be assumed to be in pixels.

Wavy Bubbles

The previous comic book dialog examples used HTML text with an SVG speech balloon background; in this case, everything is inside an SVG document, in order to enable its exact positioning:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 200">
    <path d=" … " />
    <text x="210" y="85">
        <tspan>…TALKING… LIKE</tspan>
        <tspan x="250" y="120" class="shatner">SHATNER…</tspan>
    </text>
</svg>

(Since the path that forms the word bubble is not our central interest here, I’ve removed its details, but you can learn more on the associated CodePen demo)

The CSS:

text { 
    font-family: SequentialistBB, cursive; 
    font-size: 36px;
}
path {
    stroke-width: 3px;
}
.shatner {
    font-style: italic;
    font-weight: bolder;
}

The <text> element positions the group of text as a whole; the <tspan> elements within it position the individual lengths of text.

Juggling Characters

To move characters up and down on the baseline, we could wrap them in individual <tspan> elements with dx (horizontal offset) and/or dy (vertical offset) values:

<text>
    <tspan dy="-4">T</tspan>ALKING… LIKE
…
</text>

One interesting aspect of positioning characters in SVG is that changes “ripple” through the remaining characters in the string: that is, raising the T in “TALKING” will also move up the remaining characters, keeping them all in line. In order to order to make the letters “jump” up and down we’d have to wrap the “A” that follows with another <tspan> element, and provide that with a new y or dy value.

This effort may be worthwhile for effects that only involve a single character, such as SVG dropcaps, but creating staggered text would require a lot of extra markup. Thankfully, SVG provides a better method: a list of space or comma-separated values in the parent <text> or <tspan> elements:

<text x="210" y="85" dy="0 0 -5 5 5 0 0 -5 5 0 0 0 -3 5 0 3 -3 -3 3 3 -2">
    <tspan>…TALKING… LIKE</tspan>
    <tspan x="250" y="120" class="shatner">SHATNER…</tspan>
</text>

The first dy value operates on the first character (the ellipsis), the second on the T, the third on the A, and so on (whitespace characters are ignored); if there are more characters than there are values, the remaining characters are kept inline with the last change.

Diminishing Text

Reducing text is usually used in comics to indicate a fainting or “last gasp” dialog. Again, it is easily achieved with some <text> elements:

<path d="…" />
<text font-size="20" y="45" x="30">FROM HELL’s HEART</text>
<text font-size="18" y="65" x="80">I STAB</text>
<text font-size="14" y="80" x="80">AT THEE…</text>

Conclusion

Comic book speech bubbles are great (and staggered text an excellent, practical application of dx and dy), but tend to be very specialized in application. The next article will look at the more common and widely applicable visual language of sound effects in comics, and how to recreate them in SVG, providing even more design possibilities.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/mPeaLJ