<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> |
{'text-decoration': 'line-through'} | |
<tt>code</tt> |
code | {'font-family': 'monospace'} |
Resulted SVG
Use
Node.js
npm i tspan --save
var tspan = ; var source = 'a <o>long</o> <i>and <b>winding</i> <sub>road</sub>';var result = tspan; console;// --> '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;var svg = 'svg' viewBox: '0 0 400 100' width: 400 height: 100 xmlns: 'http://www.w3.org/2000/svg' result; var onml = ; console);// --><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.