fillTextBox()<AvailableFrom v="4.0.57"/>

Part of the @remotion/layout-utils package.

Calculate whether the text exceeds the box and wraps within the container. Only works in the browser, not in Node.js or Bun.

Example

import {fillTextBox} from '@remotion/layout-utils';

const fontFamily = 'Arial';
const fontSize = 12;

const box = fillTextBox({maxLines: 4, maxBoxWidth: 100});
box.add({text: 'Hello', fontFamily, fontSize}); // {exceedsBox: false, newLine: false}
box.add({text: 'World!', fontFamily, fontSize}); // {exceedsBox: false, newLine: false}
// Doesn't fit on the previous line anymore
box.add({text: 'How', fontFamily, fontSize}); // {exceedsBox: false, newLine: true}
// ...
// Doesn't fix in the box anymore
box.add({text: 'the end', fontFamily, fontSize}); // {exceedsBox: true, newLine: false}

API

The function takes the following options:

maxBoxWidth

number

The max box width, unit px.

maxLines

number

The max lines of the box.

Return value

An object with an add() method, which can be used to add words to the text box.

Arguments

text

string

Any string.

fontFamily

string

Same as CSS style font-family.

fontSize

number

Same as CSS style font-size. Only numbers allowed, unit px.

fontWeight

string

Same as CSS style font-weight.

fontVariantNumeric

string

Same as CSS style font-variant-numeric.

textTransform<AvailableFrom v="4.0.140"/>

string

Same as CSS style text-transform.

validateFontIsLoaded?<AvailableFrom v="4.0.136"/>

boolean

If set to true, will take a second measurement with the fallback font and if it produces the same measurements, it assumes the fallback font was used and will throw an error.

additionalStyles?<AvailableFrom v="4.0.140"/>

object

Additional CSS properties that affect the layout of the text.

Return value

The add method returns an object with two properties:

• exceedsBox: Boolean, whether adding the word would cause the text to exceed the maximum lines of the box.
• newLine: Boolean, whether adding the word would require starting a new line in the text box.

Important considerations

See Best practices to ensure you get correct measurements.

See also

• measureText()
• @remotion/layout-utils