<tspan>


tspan is an JavaScript library designed for a simple way of adding some formated text into SVG documents. It takes text string with some XML style tags and produces an array of objects in JsonML format.

$3

|format|render|SVG style|
|------|------|---------|
|overline|overline|{'text-decoration': 'overline'}
|underline|underline|{'text-decoration': 'underline'}
|_subscript|_subscript|{'baseline-shift': 'sub'}
|^superscript|^superscript|{'baseline-shift': 'super'}
|bold|bold|{'font-weight': 'bold'}
|italic|italic|{'font-style': 'italic'}
|strikethrough|strikethrough|{'text-decoration': 'line-through'}
|code|code|{'font-family': 'monospace'}

#### Resulted SVG

!exmaple

Use

$3

``
npm i tspan --save
`

`js
var tspan = require('tspan');

var source = 'a long and winding road';
var result = tspan.parse(source);

console.log(result);
// -->
[
['tspan', {}, 'a '],
['tspan', {'text-decoration': 'overline'}, 'long'],
['tspan', {}, ' '],
['tspan', {'font-style': 'italic'}, 'and '],
['tspan', {'font-style': 'italic', 'font-weight': 'bold'}, 'winding'],
['tspan', {'font-weight': 'bold'}, ' '],
['tspan', {'baseline-shift': 'sub', 'font-size': '.7em', 'font-weight': 'bold'}, 'road']
]
`
tspan array then can be unshifted with a text tag, inserted into bigger SVG structure and with a little help of onml package converted into XML form.

`js
result.unshift('text', {x: 20, y: 20, 'font-size': 16});
var svg = ['svg', {
viewBox: '0 0 400 100',
width: 400, height: 100,
xmlns: 'http://www.w3.org/2000/svg'
}, result];

var onml = require('onml');

console.log(onml.stringify(svg)));
// -->


a
long

and
winding

road


`

that will look like:

!exmaple

$3

Browserify!

Testing