diff --git a/markdown/dev/howtos/code/adding-text/en.md b/markdown/dev/howtos/code/adding-text/en.md index f3c28f6f1c3..0f48bf507ec 100644 --- a/markdown/dev/howtos/code/adding-text/en.md +++ b/markdown/dev/howtos/code/adding-text/en.md @@ -1,7 +1,5 @@ --- title: Adding text -for: developers -about: Shows you how to add text to your pattern --- SVG is pretty great, but its text handling leaves much to be desired. diff --git a/markdown/dev/howtos/code/text-whitespace/en.md b/markdown/dev/howtos/code/text-whitespace/en.md new file mode 100644 index 00000000000..18dde09550b --- /dev/null +++ b/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`) +``` + + + +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) +``` + + + +## 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 ` ` for space: + +```js +points.example.attr( + 'data-text', + "far      apart" +) +``` + +Whether you're rendering to SVG or React, by using ` ` your spaces +will be properly rendered in both environments. + +