feat(markdown): Docs on whitespace in text

markdown/dev/howtos/code/text-whitespace/en.md

@@ -0,0 +1,56 @@
+---
+title: Handling whitespace in text
+---
+
+When [adding text to your pattern](/howtos/code/adding-text) 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 linebreaks to text
+
+To add linebreaks 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 linebreaks.
+
+```js
+points.example1.attr('data-text', 'this\nwill\nnot\nwork')
+points.example2.attr('data-text', "this\nwill\nwork")
+points.example2.attr('data-text', `this
+will
+also
+work`)
+```
+
+<Tip>
+
+You can control the lineheight by setting the `data-text-lineheight` attribute:
+
+```js
+points.example2
+  .attr('data-text', "this\nwill\nwork")
+  .attr('data-text-lineheight', settings.scale * 8)
+```
+
+</Tip>
+
+## Adding 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 `&#160;` for space:
+
+```js
+points.example.attr(
+  'data-text', 
+  "far &#160;&#160;&#160;&#160; apart"
+)
+```
+
+Whether you're rendering to SVG or React, by using `&#160;` your spaces
+will be properly rendered in both environments.
+
+