https://github.com/drom/tspan

little markup for SVG tspan
https://github.com/drom/tspan

hacktoberfest

Last synced: 6 days ago
JSON representation

little markup for SVG tspan

• Host: GitHub
• URL: https://github.com/drom/tspan
• Owner: drom
• License: mit
• Created: 2015-12-24T04:13:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-04-22T04:30:20.000Z (about 3 years ago)
• Last Synced: 2025-05-03T02:07:58.974Z (16 days ago)
• Topics: hacktoberfest
• Language: JavaScript
• Homepage:
• Size: 43.9 KB
• Stars: 6
• Watchers: 4
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# <tspan>

[![NPM version](https://img.shields.io/npm/v/tspan.svg)](https://www.npmjs.org/package/tspan)

[![Build Status](https://travis-ci.org/drom/tspan.svg)](https://travis-ci.org/drom/tspan)

[![Coverage Status](https://coveralls.io/repos/github/drom/tspan/badge.svg?branch=master)](https://coveralls.io/github/drom/tspan?branch=master)

**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 `` objects in [JsonML](http://www.jsonml.org) format.

### Supported tags:

|format|render|SVG style|

|------|------|---------|

|`overline`|overline|{'text-decoration': 'overline'}

|`underline`|underline|{'text-decoration': 'underline'}

|`subscript`|subscript|{'baseline-shift': 'sub'}

|`superscript`|superscript|{'baseline-shift': 'super'}

|`bold`|bold|{'font-weight': 'bold'}

|`italic`|italic|{'font-style': 'italic'}

|`strikethrough`|strikethrough|{'text-decoration': 'line-through'}

|`code`|code|{'font-family': 'monospace'}

#### Resulted SVG

![exmaple](https://rawgit.com/drom/tspan/master/test/all.svg)

## Use

### Node.js

```

npm i tspan --save

```

```js

var tspan = require('tspan');

var source = 'a long and winding road';

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](https://www.npmjs.com/package/onml) package converted into XML form.

```js

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)));

// -->

  

    a 

    long

    

    and 

    winding

    

    road

  

```

that will look like:

![exmaple](https://rawgit.com/drom/tspan/master/test/alawr.svg)

### Browser

*Browserify!*

## Testing

`npm test`

## License

MIT [LICENSE](https://github.com/drom/tspan/blob/master/LICENSE).