Handling whitespace in text

When adding text to your pattern you might need to add a special type of text: whitespace.

Whitespace in patterns can either be line breaks, or spaces. We’ll show you have to handle both below:

Adding line breaks to text

To add line breaks to text, you merely have to include them in your text. When doing so, keep in mind that single-quoted strings in JavaScript will not pick up line breaks.

thiswillwork thiswillalsowork And this will also work
TIP

You can control the lineheight by setting the data-text-lineheight attribute.

Adding consecutive spaces to text

Adding a single space between two words is not a problem. But what if you want to add a couple of spaces in a row? Both in HTML and SVG they will get collapsed into a single space.

To get around that, use   for space.

mjs
 points.demo = new Point(0, 0)   
.addText('far      apart')
}