v4.1.0

Upgrade to Typescript 2.3

4.0.0

New Wrapping Logic

Wraps whole words by default. Also, include punctuation in tokens to prevent single character punctuation from wrapping to its own line.

The old behavior can still be used by setting wrapper.allowBreakingWords(true);

New wrap example

Given the string and the available space (|---|):

"Hello, world!"
|-------|

Previously this would wrap like so:

|-------|
Hello, w-
orld!

With this change, we now wrap like so:

|-------|
Hello,
world!

Last resort breaking

Notably, a single word that does not fit in one line may still be broken and hyphenated. like so:

"A very longwordthatdoesntfit"
|------|
A very
longwor-
dthatdo-
esntfit

Punctuation

Additionally, we now consider punctuation to be part of the previous token. This prevents single character punctuation such as "," or "." from being wrapped to its own line.

Previous:

|-----|
A comma
, too.

New

|-----|
A
comma,
too.

v3.1.0

SVG, Canvas, HTML, oh my!

Now Typesettable supports wrapping and writing your text into
SVG, HTML5 Canvas, and vanilla HTML <div>s.

3.0.2

Patch Release

Fixes Firefox+Linux issue with measuring bounding boxes of display:none SVG elements.

3.0.1

Patch Release

Removes lingering references to d3 and old repo name

3.0.0

Typesettable

Now with HTML5 Canvas!

Changing library name from "svg-typewriter" to "typesettable"

No Dependencies

Removed the dependency on d3 in favor of simple native browser API.

Simplified API

Now we expose a simple Typesetter API object that has the default measurer, wrapper, and writer. This makes it much easier to quickly wrap and write text with Typesettable.

It's as easy as:

import { Typesetter } from "typesettable";
const typesetter = Typesetter.svg(document.querySelector("svg"));
typesetter.write("Hello World!", 200, 200);

Canvas

This library now supports rendering to Canvas as well as SVG. To use the canvas renderer, just supply a CanvasContext2D with the new Typesetter.canvas factory method. Alternatively, you may use any measurer, wrapper, or writer by providing them with an instance of Typesettable's CanvasContext object.

2.0.0

Update d3 to v4

This major version update includes support for the new version of d3.

v1.1.0

Adds textShear property to IWriterOptions to enable sheared text lines.

The existing textRotation property can only rotate the text in the four cardinal directions, but textShear can be any number of degrees from -80 to 80.

Note that while the lines of sheared text will still be wrapped within the bounds of the "primary" dimension (i.e. "width" in non-rotated text), the text may overflow the bounds of the "secondary" dimension (i.e. "height" in non-rotated text).

In addition, shearing is different than rotation in that the lines will not necessarily be aligned with eachother. Like so:

1.0.2

Fix npmignore string to include bundled artifact

1.0.1

Build update

Add browserify bundled artifact to root of project.