Chapter 886: Best practices for @remotion/layout-utils

Core Idea

Take note of the following points to ensure correct measurements when using the @remotion/layout-utils package.

Key Concepts

• Wait until the font is loaded
• Example with useEffect
• Example with high-order component
• Use the validateFontIsLoaded option<AvailableFrom v="4.0.136"/>
• Match all font properties
• Be aware of borders and padding
• Whitespace
• Server-side rendering

Code Examples

const {waitUntilDone} = loadFont('normal', {
  weights: ['400'],
  subsets: ['latin'],
});

const MyComp: React.FC = () => {
  const [dimensions, setDimensions] = useState<Dimensions | null>(null);

  useEffect(() => {
    // Wait until the font is loaded before measuring text
    waitUntilDone().then(() => {
      const measurement = measureText({
        fontFamily: fontFamily,
        fontSize: 14,
        fontWeight: '400',
        text: 'Hello world',
      });

      // We don't need to use delayRender() here, because
      // font loading from @remotion/google-fonts is already wrapped in it
      setDimensions(measurement);
    });
  }, []);

  return null;
};

• What it demonstrates: Usage pattern for Best practices for @remotion/layout-utils from the official docs.

Key Takeaways

1. Understand wait until the font is loaded when working with Best practices for @remotion/layout-utils.
2. Understand example with useeffect when working with Best practices for @remotion/layout-utils.
3. Understand example with high-order component when working with Best practices for @remotion/layout-utils.
4. Understand use the validatefontisloaded option<availablefrom v="4.0.136"/> when working with Best practices for @remotion/layout-utils.
5. Understand match all font properties when working with Best practices for @remotion/layout-utils.

Connects To

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