vectorize-text

Convert a string of text into a vectorized geometric representation. Works in both node.js and browserify.

Example

This module is capable of outputting geometry in several formats.

Planar graphs

The default (and fastest) output from the module is a planar graph:

var vectorizeText = require("vectorize-text")

var graph = vectorizeText("Hello world! 你好", {
  width: 500,
  textBaseline: "hanging"
})

var svg = ['<svg height="80" width="500" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns="https://www.w3.org/2000/svg">']
graph.edges.forEach(function(e) {
  var p0 = graph.positions[e[0]]
  var p1 = graph.positions[e[1]]
  svg.push('<line stroke="black" stroke-width="1" y2="' + p1[1] +
    '" x2="' + p1[0] + '" y1="' + p0[1] +
    '" x1="' + p0[0] + '"></line>')
})
svg.push("</svg>")

console.log(svg.join(""))

Output:

Polygons

You can also configure the module to emit polygons instead:

var vectorizeText = require("vectorize-text")

var polygons = vectorizeText("Hello world! 你好", {
  polygons: true,
  width: 500,
  textBaseline: "hanging"
})

var svg = []
svg.push('<svg height="80" width="500" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns="https://www.w3.org/2000/svg">')
polygons.forEach(function(loops) {
  svg.push('<path fill="red" stroke-width="1" fill-rule="even-odd" d="')
  loops.forEach(function(loop) {
    var start = loop[0]
    svg.push('M ' + start[0] + ' ' + start[1])
    for(var i=1; i<loop.length; ++i) {
      var p = loop[i]
      svg.push('L ' + p[0] + ' ' + p[1])
    }
    svg.push('L ' + start[0] + ' ' + start[1])
  })
  svg.push('"></path>')
})
svg.push('</svg>')

console.log(svg)

Output:

Triangulations

Finally, the module can output a triangulation (which is compatible with WebGL for example):

var vectorizeText = require("vectorize-text")

var complex = vectorizeText("Hello world! 你好", {
  triangles: true,
  width: 500,
  textBaseline: "hanging"
})

var svg = ['<svg height="80" width="500" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns="https://www.w3.org/2000/svg">']
complex.cells.forEach(function(c) {
  for(var j=0; j&lt;3; ++j) {
    var p0 = complex.positions[c[j]]
    var p1 = complex.positions[c[(j+1)%3]]
    svg.push('<line stroke="black" stroke-width="1" y2="' + p1[1] +
      '" x2="' + p1[0] + '" y1="' + p0[1] +
      '" x1="' + p0[0] + '"></line>')
  }
})
svg.push("</svg>")

console.log(svg)

Output:

Install

npm install vectorize-text

API

`require("vectorize-text")(string[,options])`

Renders a string to a 2D cell complex

string is a string of text (single line)
options is an optional object of parameters

Returns The returned value depends on the type of geometry

Planar graph: This is the fastest output format. A JSON object encoding the embedding of an oriented planar graph, with the following properties:
- edges are the edges of the graph
- positions are the positions
Polygon list: A list of complex polygons encoded as arrays of positions. This format is most suitable for SVG and GeoJSON output
Triangulation: This format may be most suitable for WebGL/rendering applications. A 2D oriented simplicial complex encoded as a list of cells and positions, represented by a JSON object with two properties
- cells are the faces of the triangulation, encoded as triples of indices into the vertex array
- positions are the positions of the vertices in the triangulation

Note In node.js, this library requires Cairo. For more information on how to set this up, look at the documentation for the canvas module.

Credits

(c) 2014 Mikola Lysenko. MIT License

Most popular functions for vectorize-text

To help you get started, we’ve selected a few vectorize-text examples, based on popular ways it is used in public projects.

vectorize-text