Skip to main content

Debugging font measurement bugs

When you find that the measurements that you are getting from measureText(), fillTextBox() or fitText() are off and are causing layout issues, follow the debugging instructions on this page.

Open your project in the Remotion Studio and select the composition in which you observe the issue.
2
 Set the zoom to 100% to rule out any issues that arise from the zoom level.
3
Render at the bottom of your component a <div> that contains the string and all the properties that you passed to measureText().

Sample markup
tsx
import {AbsoluteFill} from 'remotion';
 
const MyComp: React.FC = () => {
  const fontSize = 100;
  const fontWeight = 'bold';
  const fontFamily = 'Roboto';
  const text = 'Hello World ';
  const letterSpacing = undefined;
  const fontVariantNumeric = undefined;
  const textTransform = undefined;
 
  return (
    <AbsoluteFill>
      <div
        id="remotion-measurer"
        style={{
          display: 'inline-block',
          whiteSpace: 'pre',
          fontSize,
          fontWeight,
          fontFamily,
          letterSpacing,
          fontVariantNumeric,
          textTransform,
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};
Sample markup
tsx
import {AbsoluteFill} from 'remotion';
 
const MyComp: React.FC = () => {
  const fontSize = 100;
  const fontWeight = 'bold';
  const fontFamily = 'Roboto';
  const text = 'Hello World ';
  const letterSpacing = undefined;
  const fontVariantNumeric = undefined;
  const textTransform = undefined;
 
  return (
    <AbsoluteFill>
      <div
        id="remotion-measurer"
        style={{
          display: 'inline-block',
          whiteSpace: 'pre',
          fontSize,
          fontWeight,
          fontFamily,
          letterSpacing,
          fontVariantNumeric,
          textTransform,
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};

Open the Chrome DevTools and select the <div id="remotion-measurer"> node in the "Elements" tab.
5
 The node lights up, and you can see its measurements. See if there are any unexpected deviations.
6
 Use the "Computed" tabs and go through all properties that may affect the layout, and compare them with the node in your composition that is causing issue. If the measurements are different, there will be at least 1 computed proeprty that has a different value.
7
 Align your markup so that it has the same computed properties as the node in your composition.

Remember​

  • The text gets measured with whiteSpace: "pre", which includes whitespace.
    • If you don't want to measure whitespace. call .trim() on your string.
    • Make sure whiteSpace: "pre" is applied to your whole container, not just the individual words.
    • Make sure you don't remove any whitespace while splitting your text that you leave in while measuring.
  • Make sure the font is loaded when you are calling measureText().
    • Use the validateFontIsLoaded option to ensure the font is loaded.
  • External styles may apply. See if you have CSS Resets, TailwindCSS stylesheets or other external resources messing up your layout.
    • If this is the case, you can see it in the Computed Properties panel in the Chrome Dev Tools.
  • Don't use padding or border on your text. Use outline instead of border.
  • Don't multiply the font size with useCurrentScale(). It will lead to a broken layout.

See also​

You can also check out the source code of measureText(), paste and customize it in your project to aid debugging.