Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 

<tspan>

NPM version Build Status Coverage 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.

About

little markup for SVG tspan

Topics

Resources

License

Packages

No packages published