<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

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:

Browser

Browserify!

Testing

npm test

License

MIT LICENSE.