Skip to main content

fillTextBox()v4.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​

tsx
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}
tsx
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​

Required number

The max box width, unit px.

maxLines​

Required 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​

Required string

Any string.

fontFamily​

Required string

Same as CSS style font-family.

fontSize​

Required 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.

textTransformv4.0.140​

string

Same as CSS style text-transform.

validateFontIsLoaded?v4.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.

additionalStylesv4.0.140​

object, optional

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 width 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​