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.

Preview

Code

function draftPart = ({ 
  Point,
  points,
  Path,
  paths,
  part 
}) {
  points.demo1 = new Point(10,20)
    .addText('this\nwill\nwork')
  points.demo2 = new Point(40,20)
    .addText("this\nwill\nalso\nwork")
  points.demo3 = new Point(70,20)
    .addText(`And
  this
  will
  also
  work`).attr('data-text-lineheight', 7)

  // Prevent clipping
  paths.diag = new Path()
    .move(new Point(0,10))
    .move(new Point(90, 70))

  return part
}

X-Ray

An example of whitespace in text

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.

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