ContextQMD
Back to Remotion

measureText()

packages/docs/docs/layout-utils/measure-text.mdx

4.0.4622.0 KB
Original Source

Part of the @remotion/layout-utils package.

Calculates the width and height of specified text to be used for layout calculations. Only works in the browser, not in Node.js or Bun.

Example

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

const text = 'remotion';
const fontFamily = 'Arial';
const fontWeight = '500';
const fontSize = 12;
const letterSpacing = '1px';

measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
  letterSpacing,
}); // { height: 14, width: 20 }

API

This function has a cache. If there are two duplicate arguments inputs, the second one will return the first result without repeating the calculation.

The function takes the following options:

text

string

Any string.

fontFamily

string

Same as CSS style font-family

fontSize

number / string

Same as CSS style font-size. Since v4.0.125, strings are allowed too, before only numbers.

fontWeight

string

Same as CSS style font-weight

letterSpacing

string

Same as CSS style letter-spacing.

fontVariantNumeric<AvailableFrom v="4.0.57"/>

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

An object with height and width

Important considerations

See Best practices to ensure you get correct measurements.

See also