Skip to main content

createRoundedTextBox()

Part of the @remotion/rounded-text-box package.

Creates a SVG path for rendering a text box with rounded corners, as pioneered by TikTok and Instagram.

The above example combines fitTextOnNLines() and measureText() to get the text measurements, and then creates a rounded text box.
View the source code here.

Usage Example​

Simple usage example
import {fitTextOnNLines, measureText} from '@remotion/layout-utils';
import {createRoundedTextBox} from '@remotion/rounded-text-box';

const maxLines = 3;
const fontFamily = 'Figtree';
const fontWeight = '700';
const horizontalPadding = 20;
const borderRadius = 20;
const fontSize = 36;
const lineHeight = 1.5;
const textAlign = 'center';

const lines = ['Hello World', 'This is a test', 'This is another test'];

const textMeasurements = lines.map((t) =>
  measureText({
    text: t,
    fontFamily,
    fontSize,
    additionalStyles: {
      lineHeight,
    },
    fontVariantNumeric: 'normal',
    fontWeight,
    letterSpacing: 'normal',
    textTransform: 'none',
    validateFontIsLoaded: true,
  }),
);

const {d, boundingBox} = createRoundedTextBox({
  textMeasurements,
  textAlign,
  horizontalPadding,
  borderRadius,
});

const markup = (
  <div
    style={{
      width: boundingBox.width,
      height: boundingBox.height,
    }}
  >
    <svg
      viewBox={boundingBox.viewBox}
      style={{
        position: 'absolute',
        width: boundingBox.width,
        height: boundingBox.height,
        overflow: 'visible',
      }}
    >
      <path fill="white" d={d} />
    </svg>
    <div style={{position: 'relative'}}>
      {lines.map((line, i) => (
        <div
          key={i}
          style={{
            fontSize,
            fontWeight,
            fontFamily,
            lineHeight,
            textAlign,
            paddingLeft: horizontalPadding,
            paddingRight: horizontalPadding,
            color: 'black',
          }}
        >
          {line}
        </div>
      ))}
    </div>
  </div>
);

API​

object CreateRoundedTextBoxProps

Accepts an object with the following properties:

textMeasurements​

array Dimensions[]

An array of text measurements, each containing the width and height of a line of text.
Should be obtained using the measureText() function.

textAlign​

string TextAlign

The alignment of the text.
Can be 'left', 'center', or 'right'.

horizontalPadding​

number

The horizontal padding of the text box.

borderRadius​

number

The border radius of the text box.

Return value​

object CreateRoundedTextBoxResult

An object containing the following properties:

d​

string

The SVG path.

boundingBox​

object BoundingBox

The bounding box of the text box. See getBoundingBox() for the shape.

instructions​

array ReducedInstruction[]

The SVG path instructions as an array, for use with the @remotion/paths package.

See also​