balancedWrap

Returns the box a label needs when the browser balances its lines rather than filling them greedily.

@internote/canvas-sdkFunction
On this page
import { balancedWrap } from '@internote/canvas-sdk';

wrapWidths fills each line to the limit, which is what CSS does by default; a label given a hard width carries text-wrap: balance, and the browser then breaks it into lines of even length instead. The two disagree badly, so the balance is computed here too: the narrowest width that still sets the words in the same number of lines, found by bisection. width is then the ink as it will appear, and wrapAt the box to hand the browser, the ink plus a hair so a measurement a fraction out cannot tip a line over.

#Signature

(text: string, px: number, cap: number, family?: string): {
    width: number;
    wrapAt: number;
    lines: number;
}

#Parameters

text
The text to wrap.
px
The font size in pixels.
cap
The widest the label may be, in pixels.
family
The CSS font stack.

#Returns

The ink's width, the box width to set, and how many lines it takes.

Declared in packages/canvas-sdk/src/text/index.ts:170.

Last updated