Remotion Rule: Measuring Text

What it is

This is a Remotion skill rule that covers measuring text dimensions, fitting text to containers, and checking for overflow. It is part of the official Remotion Agent Skill for programmatic video creation in React.

Developers and AI agents building Remotion videos need precise text measurement to avoid clipping, overflow, or misaligned layouts. This rule provides the patterns and API calls to handle those cases.

How it saves time or tokens

Text measurement in HTML canvas or SVG requires boilerplate: creating off-screen elements, computing bounding boxes, handling font loading. This skill rule gives agents a ready-made pattern so they produce correct text-fitting code on the first attempt, saving token_estimate of approximately 500 tokens per invocation.

Instead of trial-and-error rendering, the agent applies the rule and generates a working composition without visual debugging.

How to use

1. Include this skill rule in your Remotion agent configuration
2. When composing text-heavy scenes, the agent references the rule to pick the right measurement API
3. Use measureText() from the canvas 2D context or Remotion's layout utilities to get bounding box dimensions
4. Apply conditional font sizing or truncation based on measured width vs container width

Example

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px Inter';
const metrics = ctx.measureText('Hello Remotion');
const textWidth = metrics.width;
const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

if (textWidth > containerWidth) {
  // Reduce font size or truncate
  const scale = containerWidth / textWidth;
  ctx.font = `${Math.floor(48 * scale)}px Inter`;
}

Related on TokRepo

• Coding tools -- AI-powered coding and video development
• Design tools -- Visual design and layout tooling

Common pitfalls

• Measuring text before fonts are loaded returns incorrect widths; always wait for document.fonts.ready
• Canvas measureText does not account for line-height or letter-spacing; add manual padding
• Remotion renders frames server-side, so DOM-based measurement must happen during the render lifecycle, not in module scope