Chapter 887: fillTextBox()

Core Idea

_Part of the @remotion/layout-utils package.

Key Concepts

• Example
• API
• maxBoxWidth
• maxLines
• Return value
• Arguments
• text
• fontFamily

Code Examples

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}

• What it demonstrates: Usage pattern for fillTextBox() from the official docs.

Key Takeaways

1. Understand example when working with fillTextBox().
2. Understand api when working with fillTextBox().
3. Understand maxboxwidth when working with fillTextBox().
4. Understand maxlines when working with fillTextBox().
5. Understand return value when working with fillTextBox().

Connects To

• Best Practices: related page in the Layout Utils (@remotion/layout-utils) section.
• Debug: related page in the Layout Utils (@remotion/layout-utils) section.
• fit Text: related page in the Layout Utils (@remotion/layout-utils) section.