fillTextBox()v4.0.57
Part of the @remotion/layout-utils package.
Calculate whether the text exceeds the box and wraps within the container. Only works in the browser, not in Node.js or Bun.
Example
import {fillTextBox } from '@remotion/layout-utils';
const fontFamily = 'Arial';
const fontSize = 12;
const box = fillTextBox ({maxLines : 4, maxBoxWidth : 100});
box .add ({text : 'Hello', fontFamily , fontSize }); // {exceedsBox: false, newLine: false}
box .add ({text : 'World!', fontFamily , fontSize }); // {exceedsBox: false, newLine: false}
// Doesn't fit on the previous line anymore
box .add ({text : 'How', fontFamily , fontSize }); // {exceedsBox: false, newLine: true}
// ...
// Doesn't fix in the box anymore
box .add ({text : 'the end', fontFamily , fontSize }); // {exceedsBox: true, newLine: false}API
The function takes the following options:
maxBoxWidth
number
The max box width, unit px.
maxLines
number
The max lines of the box.
Return value
An object with an add() method, which can be used to add words to the text box.
Arguments
text
string
Any string.
fontFamily
string
Same as CSS style font-family.
fontSize
number
Same as CSS style font-size. Only numbers allowed, unit px.
fontWeight
string
Same as CSS style font-weight.
fontVariantNumeric
string
Same as CSS style font-variant-numeric.
textTransformv4.0.140
string
Same as CSS style text-transform.
validateFontIsLoaded?v4.0.136
boolean
Defaults to true in Remotion 5.0 (previously false). When enabled, takes 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?v4.0.140
object
Additional CSS properties that affect the layout of the text.
Return value
The add method returns an object with two properties:
exceedsBox: Boolean, whether adding the word would cause the text to exceed the maximum lines of the box.newLine: Boolean, whether adding the word would require starting a new line in the text box.
Important considerations
See Best practices to ensure you get correct measurements.
Compatibility
| Browsers | Environments | |||||
|---|---|---|---|---|---|---|
Chrome | Firefox | Safari | ||||