# gl-text

> Render text with WebGL

Latest version **1.4.0** (published 2024-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install gl-text
pnpm add gl-text
yarn add gl-text
bun add gl-text
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2024-04-23 |
| First published | 2018-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 54.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Dmitry Yv |
| Maintainers | lconnors, alexshoe, t4rk, bronsolo, jmmease, chriddyp, bpostlethwaite, alexcjohnson, nicolaskruchten, antrg, archmoj, xhlu, hammadtheone, dfcreative, etpinard |
| Keywords | regl, plotly, text, gl-text, typography, font |

## Links

- npm: https://www.npmjs.com/package/gl-text
- Repository: https://github.com/a-vis/gl-text
- Homepage: https://github.com/a-vis/gl-text#readme
- Issues: https://github.com/a-vis/gl-text/issues
- npm.io page: https://npm.io/package/gl-text

## Dependencies (17)

- [regl](https://npm.io/package/regl.md) ^2.0.0
- [to-px](https://npm.io/package/to-px.md) ^1.0.1
- [gl-util](https://npm.io/package/gl-util.md) ^3.1.2
- [css-font](https://npm.io/package/css-font.md) ^1.2.0
- [font-atlas](https://npm.io/package/font-atlas.md) ^2.1.0
- [parse-rect](https://npm.io/package/parse-rect.md) ^1.2.0
- [parse-unit](https://npm.io/package/parse-unit.md) ^1.0.1
- [bit-twiddle](https://npm.io/package/bit-twiddle.md) ^1.0.2
- [es6-weak-map](https://npm.io/package/es6-weak-map.md) ^2.0.3
- [font-measure](https://npm.io/package/font-measure.md) ^1.2.2
- [is-plain-obj](https://npm.io/package/is-plain-obj.md) ^1.1.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [pick-by-alias](https://npm.io/package/pick-by-alias.md) ^1.2.0
- [detect-kerning](https://npm.io/package/detect-kerning.md) ^2.1.2
- [color-normalize](https://npm.io/package/color-normalize.md) ^1.5.0
- [typedarray-pool](https://npm.io/package/typedarray-pool.md) ^1.1.0
- [flatten-vertex-data](https://npm.io/package/flatten-vertex-data.md) ^1.0.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2024-04-23
- 1.3.1 — 2021-09-15
- 1.3.0 — 2021-09-15
- 1.2.0 — 2021-08-03
- 1.1.8 — 2019-07-02
- 1.1.7 — 2019-07-02
- 1.1.6 — 2018-07-10
- 1.1.5 — 2018-07-04
- 1.1.4 — 2018-07-04
- 1.1.3 — 2018-07-03
- 1.1.2 — 2018-07-03
- 1.1.1 — 2018-06-27
- 1.1.0 — 2018-06-27
- 1.0.4 — 2018-06-21
- 1.0.3 — 2018-06-21
- … 3 more at https://npm.io/package/gl-text/versions

## README

# gl-text [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)

Render bitmap text with WebGL.

## Usage

[![npm install gl-text](https://nodei.co/npm/gl-text.png?mini=true)](https://npmjs.org/package/gl-text/)

```js
const Text = require('gl-text')

let text1 = new Text()

text1.update({
	position: [50, 50],
	text: 'ABC',
	font: '16px Helvetica, sans-serif'
})
text1.render()

// create another text renderer on the same context
let text2 = new Text(text1.gl)
text2.update({
	font: {
		family: ['Helvetica', 'Arial', 'sans-serif'],
		size: '1rem'
	}
})
```

## API

### `let text = new Text(gl|regl|canvas|container|options?)`

Create text renderer instance for the WebGL context `gl`, [`regl`](https://ghub.io/regl) instance, `canvas`/`container` element or based on `options`:

Option | Meaning
---|---
`regl` | Existing `regl` instance. By default new one is created.
`gl`/`context` | Existing WebGL context. By default new one is created.
`canvas` | Existing `canvas` element.
`container` | Existing `container` element. By default new canvas is created within the container.

No arguments call creates new fullscreen canvas.

### `text.update(options)`

Update state of a `Text` instance.

Option | Description
---|---
`text` 			| Text string or array of strings to display.								|
`position` 		| Position of the text on the screen within the `range`, a couple `[x, y]` or array `[[x ,y], [x, y], ...]` corresponding to text.						|
`align` 		| Horizontal alignment relative to the `position`. Can be one of `left`, `right`, `center`/`middle`, `start`, `end`, or a number of em units. By default `left`. Can be an array, corresponding to text.							|
`baseline` 		| Vertical alignment value, by default `middle`. Can be a string one of `top`, `hanging`, `middle`, `alphabetic`, `ideographic`, `bottom` etc. (see [font-measure](https://ghub.io/font-measure)) or a number of em units, denoting `0` as alphabetic baseline. Can be an array corresponding to text.																							|
`color` 		| Text color or array of colors. By default `black`.						|
`font` 			| Font family, CSS font string or an object with font properties like `{family, size, style}`, see [css-font](https://ghub.io/css-font). Can be an array.																	|
`fontSize`/`em` | Font-size, can be changed independently of `font`.						|
`kerning` 		| Enable font kerning, by default `true`. Disable for the case of monospace fonts. See [detect-kerning](https://ghub.io/detect-kerning) package.																					|
`offset` 		| Shift `position` by the number of ems. Useful for organizing multiple lines, indentation, sub/sup script etc. Does not get affected by `position` change. Can be a number for x-offset only or a couple `[x, y]` for single position or array `[[x, y], [x, y], ...]` for multiple positions.						|
`range` 		| Data area corresponding to position in viewport. Useful for organizing zoom/pan. By default is the same as the viewport `[0, 0, canvas.width, canvas.height]`.																|
`scale`/`translate` | An alternative to `range`.											|
`viewport` 		| Visible area within the canvas, an array `[left, top, width, height]` or rectangle `{x, y, width, height}`, see [parse-rect](https://ghub.io/parse-rect).

<!-- `direction` | TODO -->
<!-- `letterSpacing`, `tracking` | Distance between letters, fractions of `em`. By default `0`. -->

### `text.render()`

Draw text.

### `text.destroy()`

Dispose text renderer.

### Properties

* `text.gl` - WebGL context.
* `text.canvas` - canvas element.
* `text.regl` - regl instance.


## License

© 2018 Dmitry Yv. MIT License

Development supported by [plot.ly](https://github.com/plotly/).

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