@d3plus/text

A smart SVG text box with line wrapping and automatic font size scaling.

Installing

If using npm, npm install @d3plus/text. Otherwise, you can download the latest release from GitHub or load from a CDN.

import {*} from "@d3plus/text";

In a vanilla environment, a d3plus global is exported from the pre-bundled version:

<script src="https://cdn.jsdelivr.net/npm/@d3plus/text"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using @d3plus/react.

API Reference

| Functions | Description | | --- | --- | | fontFamilyStringify | Converts an Array of font-family names into a CSS font-family string. | | strip | Removes all non ASCII characters from a string. | | textSplit | Splits a given sentence into an array of words. | | textWrap | Based on the defined styles and dimensions, breaks a string into an array of strings for each line of text. | | titleCase | Capitalizes the first letter of each word in a phrase/sentence, accounting for words in English that should be kept lowe |

| Variables | Description | | --- | --- | | fontFamily | The default fallback font list used for all text labels as an Array of Strings. |

Functions

fontFamilyStringify()

fontFamilyStringify(family: string | string[]): string

Defined in: fontFamily.ts:18

Converts an Array of font-family names into a CSS font-family string.

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | family | string | string[] | A font family name or array of font family names. |

Returns

string

strip()

strip(value: string, spacer?: string): string

Defined in: strip.ts:33

Removes all non ASCII characters from a string.

Parameters

| Parameter | Type | Default | Description | | ------ | ------ | ------ | ------ | | value | string | required | The HTML string to strip. | | spacer | string | "-" | The character to replace whitespace with. |

Returns

string

textSplit()

textSplit(sentence: string): string[]

Defined in: textSplit.ts:43

Splits a given sentence into an array of words.

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | sentence | string | The sentence to split into words. |

Returns

string[]

textWrap()

textWrap(): TextWrapGenerator

Defined in: textWrap.ts:56

Based on the defined styles and dimensions, breaks a string into an array of strings for each line of text.

Returns

TextWrapGenerator

titleCase()

titleCase(str: string | undefined): string

Defined in: titleCase.ts:55

Capitalizes the first letter of each word in a phrase/sentence, accounting for words in English that should be kept lowercase such as "and" or "of", as well as acronym that should be kept uppercase such as "CEO" or "TVs".

Parameters

| Parameter | Type | Description | | ------ | ------ | ------ | | str | string | required | The string to apply the title case logic. |

Returns

string

Variables

fontFamily

const fontFamily: string[]

Defined in: fontFamily.ts:5

The default fallback font list used for all text labels as an Array of Strings.

Default Value

["Inter", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", "sans-serif"]