vectorize-text

Render a string to a vectorized cell complex

Usage no npm install needed!

<script type="module">
  import vectorizeText from 'https://cdn.skypack.dev/vectorize-text';
</script>

README

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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="500"  height="80" >']
graph.edges.forEach(function(e) {
  var p0 = graph.positions[e[0]]
  var p1 = graph.positions[e[1]]
  svg.push('<line x1="' + p0[0] + '" y1="' + p0[1] +
    '" x2="' + p1[0] + '" y2="' + p1[1] +
    '" stroke-width="1" stroke="black" />')
})
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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="500"  height="80" >')
polygons.forEach(function(loops) {
  svg.push('<path 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('" fill-rule="even-odd" stroke-width="1" fill="red"></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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="500"  height="80" >']
complex.cells.forEach(function(c) {
  for(var j=0; j<3; ++j) {
    var p0 = complex.positions[c[j]]
    var p1 = complex.positions[c[(j+1)%3]]
    svg.push('<line x1="' + p0[0] + '" y1="' + p0[1] +
      '" x2="' + p1[0] + '" y2="' + p1[1] +
      '" stroke-width="1" stroke="black" />')
  }
})
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

    • options.font is the font family to use (default: "normal")
    • options.fontStyle if set, determines the font-style
    • options.fontVariant if set, determines the font-variant
    • options.fontWeight if set, determines the font-weight
    • options.size is the font-size used for the rasterization step (determines level of detail of the mesh)
    • options.textBaseline determines the baseline, same semantics as the canvas textBaseline property. Default: "alphabetic"
    • options.textAlign determines the alignment for the text, same semantics as canvas textAlign. Default: "start"
    • options.lineHeight determines the height of a line. Default: 1.0
    • options.width determines the width of the text, overrides lineHeight if specified
    • options.height determines the height of the text, overrides lineHeight if specified
    • options.triangles if set, then output a triangulation
    • options.polygons if set, output a list of polygons
    • options.orientation determines the orientation of any output triangles/polygon curves. Must be either "cw" for clockwise or "ccw" for counter clockwise. Default is "cw".
    • options.canvas an optional canvas element
    • options.context an optional canvas 2D context
    • options.styletags.breaklines if set, break-line tags i.e. < br > could be used in the input to enter new lines.
    • options.styletags.bolds if set, parts of the input i.e. between < b > and < /b > would be presented bold.
    • options.styletags.italics if set, parts of the input i.e. between < i > and < /i > would be presented italic.
    • options.styletags.superscripts if set, parts of the input i.e. between < sup > and < /sup > would be presented in as superscript. Multiple superscipts are also allowded. For example Line 0Line 1Line 2.
    • options.styletags.subscripts if set, parts of the input i.e. between < sub > and < /sub > would be presented in as subscript. Multiple subscipts are also allowded. For example: Line 0Line 1Line 2. Note: it is also possible to combine sub and superscripts: ABC.

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