# svg-typewriter

> SVG Text Measurement Line Wrapper

Latest version **2.0.0** (published 2017-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg-typewriter
pnpm add svg-typewriter
yarn add svg-typewriter
bun add svg-typewriter
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-02-13 |
| First published | 2016-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Palantir |
| Maintainers | palantir |
| Keywords | svg, text, wrap |

## Links

- npm: https://www.npmjs.com/package/svg-typewriter
- npm.io page: https://npm.io/package/svg-typewriter

## Dependencies (1)

- [d3](https://npm.io/package/d3.md) ^4.5.0

## Recent versions

- 2.0.0 (latest) — 2017-02-13
- 1.1.0 — 2017-02-10
- 1.0.2 — 2017-01-18
- 1.0.1 — 2017-01-18
- 1.0.0 — 2017-01-16
- 0.3.0-beta.0 — 2016-04-14

## README

SVG Typewriter
=========

[![Circle CI](https://circleci.com/gh/palantir/svg-typewriter.svg?style=svg)](https://circleci.com/gh/palantir/svg-typewriter)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/svg-typewriter.svg)](https://saucelabs.com/u/svg-typewriter)

Overview
---

**SVG Typewriter** is a library for measuring, manipulating, and writing text on
SVG. The [svg text spec](http://www.w3.org/TR/SVG/text.html#Introduction)
indicates that "SVG performs no automatic line breaking or word wrapping",
meaning that developers normally need to write their own code to accomplish
this; **SVG Typewriter** aims to make this entire process easier.

**SVG Typewriter** is based on [D3.js](http://d3js.org/).

Features
---

- *Measurers* efficiently measure the size of a piece of text when written to a
  particular SVG element, taking into account the CSS styles affecting that
  text.
- *Wrappers* calculate how best to fit text into a given space, based on results
  from the Measurer.
- *Writers* write text to a given SVG element based on specified options such as
  alignment, rotation, and animation.

In general, users will primarily interact with *Writers*, although they will
need to instantiate *Measurers* based on specific SVG elements so that the
library can perform accurate measurement and wrapping. Users can set options on
*Wrappers* to control the wrapping behavior.

Installation
---

```
npm install --save svg-typewriter
```

Example Usage
---

```ts
import { Measurer, Wrapper, Writer } from "svg-typewriter";

// Create a Measurer based on the element we want to write into.
// Passing in the intended element allows accurate measurement based on the CSS
// styles that will actually be applied to that element.
const measurer = new Measurer(svg);

// Create a Wrapper with default options.
// A wrapper calculates how to break text to fit in a given space and returns
// the wrapped text as strings. Wrappers do not directly write the wrapped text.
const wrapper = new Wrapper();

// Create a Writer.
// A Writer uses the supplied Measurer and Wrapper to best decide how to fit
// text in a given space, then writes the wrapped text to a given element.
const writer = new Writer(measurer, wrapper);

// Set write options.
const writeOptions = {
  selection: svg,
  xAlign: "left",
  yAlign: "top",
  textRotation: 0
};

// write the text to the element.
writer.write("Hello World!", width, height, writeOptions);
```

See [the docs](http://palantir.github.io/svg-typewriter) for more detailed
examples.

---
_Source: https://npm.io/package/svg-typewriter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._