little markup for SVG tspan
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
appveyor.yml
comparison.md
package.json

README.md

<tspan>

NPM version Build Status Build status

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.