Chapter 889: fitTextOnNLines()

Core Idea

_Part of the @remotion/layout-utils package. Available from v4.

Key Concepts

• API
• text
• maxBoxWidth
• maxLines
• fontFamily
• fontWeight?
• letterSpacing?
• fontVariantNumeric?

Code Examples

const text = 'Hello World';
const width = 100;
const maxLines = 2;
const fontFamily = 'Arial';
const fontWeight = 'bold';

const {fontSize, lines} = fitTextOnNLines({
  text,
  maxBoxWidth: width,
  maxLines,
  fontFamily: fontFamily,
  fontWeight: fontWeight,
  textTransform: 'uppercase',
  maxFontSize: 80,
});

// Example markup:
<div
  style={{
    fontSize,
    width,
    fontFamily,
    fontWeight,
    textTransform: 'uppercase',
  }}
>
  {text}
</div>;

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

Key Takeaways

1. Understand api when working with fitTextOnNLines().
2. Understand text when working with fitTextOnNLines().
3. Understand maxboxwidth when working with fitTextOnNLines().
4. Understand maxlines when working with fitTextOnNLines().
5. Understand fontfamily when working with fitTextOnNLines().

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.
• Fill Text box: related page in the Layout Utils (@remotion/layout-utils) section.