How To Work With The SVG Text Spacing Properties

Posted: 08 Dec 2015 05:30 AM PST

Most of the time the default spacing between characters and words is perfectly fine, but when working with display type in headlines and subheads you may want to adjust the spacing in your text. SVG provides a way to do just that.

Last week I walked you through the different font selection properties available for use as attributes on SVG text elements. This week I want to talk about some other typographic related properties, specifically the SVG spacing properties.

Spacing Within Lines of Text

SVG 1.1 provides three different spacing properties, kerning, letter-spacing, and word-spacing. Kerning is being removed in SVG 2.0, though I'll include it in the discussion here in case you run across it.

Here are definitions for each. I'll offer a couple of examples showing the properties in use momentarily.

kerning—adjusts the space between specific letter pairs such as AV.
letter-spacing —adjusts the space between all letters. It's equivalent to tracking in non-CSS talk.
word-spacing —adjusts the space between words and not individual characters.

You may already be familiar with and have used the latter two properties, letter-spacing ad word-spacing, in your CSS. In fact we usually consider letter-spacing to be the CSS version of kerning, which isn't exactly true.

Letter spacing deals with every letter and kerning deals with specific pairs of letters that require adjusting. However while kerning and letter spacing are different things, they're going to do the same thing when you set their values. They're going to move letters further apart (positive value) or closer together (negative value).

Here's an example to illustrate.

1  2  3  4  5  6

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="80" y="50" font-family="georgia" kerning="-2">Is this kerning or letter spacing?</text>      <text x="80" y="80" font-family="georgia" letter-spacing="-2">Is this kerning or letter spacing?</text>      <text x="80" y="150" font-family="georgia" kerning="2">Is this kerning or letter spacing?</text>      <text x="80" y="180" font-family="georgia" letter-spacing="2">Is this kerning or letter spacing?</text>    </svg>

In each pair the first line of text uses kerning and the second uses letter-spacing. The lines in the top pair both have values of –2 and the lines in the bottom pair both have a value of 2.

You can see both pairs look the same. It's really up to you to use them properly. Kerning should be applied to specific pairs of letters, so you'd want to wrap the letters in a tspan and then apply kerning.

Whether to use one or the other is a non-issue in SVG 2.0 as kerning is being removed from the spec so you probably shouldn't use it at all at this point, but I thought I should mention it in case you come across it.

The word-spacing property adjusts the spaces between words and not letters themselves. Here's an example. I've used the same line of text inside two different <text> elements. The only difference between them is the word-spacing. It's set to –2 in the first line and 2 in the second.

1  2  3  4

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="100" y="100" font-family="georgia" word-spacing="-2">This is a word-spacing of -2</text>      <text x="100" y="130" font-family="georgia" word-spacing="2">This is a word-spacing of 2</text>    </svg>

You can see that the word "This" has the same amount of space between characters and then the space between "This" and "is" varies due to the different word-spacing values. The same is true of the other words and spaces, though it's easiest to see with the first couple of words.

White Space

One thing SVG text doesn't do is wrap text automatically. Instead SVG text will keep going and going in a straight line. Remember that the viewport we set using the width and height attributes is the size of the window that lets us peer into an infinite SVG canvas. The canvas is still infinite though, and while you may not see the text outside the viewport, it can still render outside the viewport.

If you want longer blocks of text to remain inside the viewport, you can use tspans and position them where you want. Other than explicitly positioning bits of text or using the properties I've discussed so far in this post, you have little control over the white space in your text.

SVG 2.0 is supporting the CSS white-space property, though at the moment I don't think any browser is supporting it as an SVG attribute. It's meant to replace the SVG 1.1 xml:space property, which while limited in what it can do, does work.

Let me briefly explain the idea of the white-space property and then I'll show you an example using xml:space.

The white-space property will specify:

whether and how white space inside the element is collapsed
whether lines may wrap at unforced soft wrap opportunities

The property takes any of five values. The spec didn't see fit to offer definitions and instead points you to definitions for six values in the CSS3 Text Module Level 3 spec. Below is an image of the table that summarizes the behavior of each value.

Here's a bit more definition from W3Schools. Scroll down to the Property Values section for the definitions.

The idea is that some white space is collapsed and some is preserved and sometimes a line of text can wrap and sometimes it can't. That makes me hopeful that SVG text will at some point be able to wrap automatically.

The white-space property is replacing xml:space from SVG 1.1, which offers less control as it only takes two values, default and preserve. However, since xml:space does work I'll show you an example.

I created two text elements with the text "Having fun with whitespace" and I added tspans so the word "whitespace" could be separated from the rest of the text. I then added some tabs before the whitespace span.

1  2  3  4

<svg width="660" height="220" style="outline: 1px solid red; font-size: 1.5em; overflow: visible;">       <text x="50" y="100" xml:space="default"><tspan>Having fun with</tspan>             <tspan>whitespace (default)</tspan></text>       <text x="50" y="140" xml:space="preserve"><tspan>Having fun with</tspan>            <tspan>whitespace (preserve)</tspan></text>    </svg>

The first line uses xml:space="default" and you can see the tabs are collapsed into a single space. The second line uses xml:space="preserve" which preserves the extra whitespace.

The SVG 2.0 white-space property will essentially do the same thing, but it will also provide a means to preserve new lines instead of whitespace on a single line.

Text Decoration

I probably should have included this section in last week's post on font properties, but since I didn't, here it is today. You can set the text decoration of SVG text. Since I assume you know how to use text-decoration as a CSS property, I'll simply offer an example using it as an SVG attribute.

1  2  3  4  5

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">      <text x="220" y="60" font-family="georgia" text-decoration="overline">Text Decoration</text>      <text x="220" y="120" font-family="georgia" text-decoration="underline">Text Decoration</text>      <text x="220" y="190" font-family="georgia" text-decoration="line-through">Text Decoration</text>    </svg>

From top to bottom values are overline, underline, and line-through.

Believe it or not there's also a blink value, but fortunately I couldn't get it to work, which hopefully means it's been deprecated. We don't need a return of blink, except as an episode of Doctor Who, which is worth watching again and again.

Closing Thoughts

You probably don't use the CSS versions of these properties often. I know I don't change the spacing between letters and words in ordinary text, much, if ever.

However, when it comes to display type there are times when it makes sense to adjust the spacing and since you're more likely to use SVG text as display type, it's a good idea to know how to adjust the white space when you want.

There's one last topic I want to cover about SVG text and that's how to display your text along a path of your choosing instead of having it always be along a straight line. The next couple of weeks I'll take a look at the <textPath> element and its associated attributes.

Download a free sample from my book Design Fundamentals.

The post How To Work With The SVG Text Spacing Properties appeared first on Vanseo Design.