Have ideas to improve npm?Join in the discussion! »

    tspan

    0.4.0 • Public • Published

    <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', {}, ''],
        ['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></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.

    Keywords

    none

    Install

    npm i tspan

    DownloadsWeekly Downloads

    650

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar