README

<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 <tspan> objects in JsonML format.

Supported tags:

format	render	SVG style
`<o>overline</o>`	overline	{'text-decoration': 'overline'}
`<ins>underline</ins>`	underline	{'text-decoration': 'underline'}
`<sub>subscript</sub>`	_subscript	{'baseline-shift': 'sub'}
`<sup>superscript</sup>`	^superscript	{'baseline-shift': 'super'}
`<b>bold</b>`	bold	{'font-weight': 'bold'}
`<i>italic</i>`	italic	{'font-style': 'italic'}
`<s>strikethrough</s>`	~~strikethrough~~	{'text-decoration': 'line-through'}
`<tt>code</tt>`	`code`	{'font-family': 'monospace'}

Resulted SVG

exmaple

Use

Node.js

npm i tspan --save

var tspan = require('tspan');

var source = 'a <o>long</o> <i>and <b>winding</i> <sub>road</sub>';
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.

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)));
// -->
<svg viewBox="0 0 400 100" width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="20" font-size="16">
    <tspan>a </tspan>
    <tspan text-decoration="overline">long</tspan>
    <tspan></tspan>
    <tspan font-style="italic">and </tspan>
    <tspan font-style="italic" font-weight="bold">winding</tspan>
    <tspan font-weight="bold"></tspan>
    <tspan baseline-shift="sub" font-size=".7em" font-weight="bold">road</tspan>
  </text>
</svg>

that will look like:

exmaple

Browser

Browserify!

Testing

npm test

License

MIT LICENSE.

Usage no npm install needed!