@remotion/layout-utils 4.0.134 → 4.0.136

package/dist/cjs/index.d.ts

@@ -1,3 +1,3 @@
 export { fillTextBox } from './layouts/fill-text-box';
 export { fitText } from './layouts/fit-text';
-export { measureText } from './layouts/measure-text';
+export { Dimensions, measureText } from './layouts/measure-text';

package/dist/cjs/layouts/fill-text-box.d.ts

@@ -3,7 +3,7 @@ export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
     maxBoxWidth: number;
     maxLines: number;
 }) => {
-    add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }: Word) => {
+    add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => {
         exceedsBox: boolean;
         newLine: boolean;
     };

package/dist/cjs/layouts/fill-text-box.js

@@ -5,7 +5,7 @@ const measure_text_1 = require("./measure-text");
 const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
     const lines = new Array(maxLines).fill(0).map(() => []);
     return {
-        add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }) => {
+        add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
             const lastLineIndex = lines.reduceRight((acc, curr, index) => {
                 if (acc === -1 && curr.length > 0) {
                     return index;
@@ -23,6 +23,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
                     fontSize,
                     letterSpacing,
                     fontVariantNumeric,
+                    validateFontIsLoaded,
                 },
             ];
             const widths = lineWithWord.map((w) => (0, measure_text_1.measureText)(w).width);

package/dist/cjs/layouts/fit-text.d.ts

@@ -1,10 +1,11 @@
-export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, }: {
+export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }: {
     text: string;
     withinWidth: number;
     fontFamily: string;
     fontWeight?: string | number | undefined;
     letterSpacing?: string | undefined;
     fontVariantNumeric?: string | undefined;
+    validateFontIsLoaded?: boolean | undefined;
 }) => {
     fontSize: number;
 };

package/dist/cjs/layouts/fit-text.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fitText = void 0;
 const measure_text_1 = require("../layouts/measure-text");
 const sampleSize = 100;
-const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, }) => {
+const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }) => {
     const estimate = (0, measure_text_1.measureText)({
         text,
         fontFamily,
@@ -11,6 +11,7 @@ const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight
         fontWeight,
         fontVariantNumeric,
         letterSpacing,
+        validateFontIsLoaded,
     });
     return { fontSize: (withinWidth / estimate.width) * sampleSize };
 };

package/dist/cjs/layouts/measure-text.d.ts

@@ -1,4 +1,4 @@
-type Dimensions = {
+export type Dimensions = {
     width: number;
     height: number;
 };
@@ -9,6 +9,6 @@ export type Word = {
     fontWeight?: number | string;
     letterSpacing?: string;
     fontVariantNumeric?: string;
+    validateFontIsLoaded?: boolean;
 };
-export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }: Word) => Dimensions;
-export {};
+export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => Dimensions;

package/dist/cjs/layouts/measure-text.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureText = void 0;
 const wordCache = new Map();
-const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
-    const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
-    if (wordCache.has(key)) {
-        return wordCache.get(key);
+const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
+    if (typeof document === 'undefined') {
+        throw new Error('measureText() can only be called in a browser.');
     }
     const node = document.createElement('span');
-    node.style.fontFamily = fontFamily;
+    if (fontFamily) {
+        node.style.fontFamily = fontFamily;
+    }
     node.style.display = 'inline-block';
     node.style.position = 'absolute';
     node.style.top = `-10000px`;
@@ -26,8 +27,47 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
     }
     node.innerText = text;
     document.body.appendChild(node);
+    const computedFontFamily = window.getComputedStyle(node).fontFamily;
     const boundingBox = node.getBoundingClientRect();
     document.body.removeChild(node);
+    return {
+        boundingBox,
+        computedFontFamily,
+    };
+};
+const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
+    const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
+    if (wordCache.has(key)) {
+        return wordCache.get(key);
+    }
+    const { boundingBox, computedFontFamily } = takeMeasurement({
+        fontFamily,
+        fontSize,
+        text,
+        fontVariantNumeric,
+        fontWeight,
+        letterSpacing,
+    });
+    if (validateFontIsLoaded) {
+        const { boundingBox: boundingBoxOfFallbackFont, computedFontFamily: computedFallback, } = takeMeasurement({
+            fontFamily: null,
+            fontSize,
+            text,
+            fontVariantNumeric,
+            fontWeight,
+            letterSpacing,
+        });
+        const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
+            boundingBox.width === boundingBoxOfFallbackFont.width;
+        if (sameAsFallbackFont && computedFallback !== computedFontFamily) {
+            const err = [
+                `Called measureText() with "fontFamily": ${JSON.stringify(fontFamily)} but it looks like the font is not loaded at the time of calling.`,
+                `A measurement with the fallback font ${computedFallback} was taken and had the same dimensions, indicating that the browser used the fallback font.`,
+                'See https://remotion.dev/docs/layout-utils/best-practices for best practices.',
+            ];
+            throw new Error(err.join('\n'));
+        }
+    }
     const result = { height: boundingBox.height, width: boundingBox.width };
     wordCache.set(key, result);
     return result;

package/dist/esm/index.d.ts

@@ -1,3 +1,3 @@
 export { fillTextBox } from './layouts/fill-text-box';
 export { fitText } from './layouts/fit-text';
-export { measureText } from './layouts/measure-text';
+export { Dimensions, measureText } from './layouts/measure-text';

package/dist/esm/index.mjs

@@ -1,11 +1,12 @@
 const wordCache = new Map();
-const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
-    const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
-    if (wordCache.has(key)) {
-        return wordCache.get(key);
+const takeMeasurement = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }) => {
+    if (typeof document === 'undefined') {
+        throw new Error('measureText() can only be called in a browser.');
     }
     const node = document.createElement('span');
-    node.style.fontFamily = fontFamily;
+    if (fontFamily) {
+        node.style.fontFamily = fontFamily;
+    }
     node.style.display = 'inline-block';
     node.style.position = 'absolute';
     node.style.top = `-10000px`;
@@ -23,8 +24,47 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
     }
     node.innerText = text;
     document.body.appendChild(node);
+    const computedFontFamily = window.getComputedStyle(node).fontFamily;
     const boundingBox = node.getBoundingClientRect();
     document.body.removeChild(node);
+    return {
+        boundingBox,
+        computedFontFamily,
+    };
+};
+const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
+    const key = `${text}-${fontFamily}-${fontWeight}-${fontSize}-${letterSpacing}`;
+    if (wordCache.has(key)) {
+        return wordCache.get(key);
+    }
+    const { boundingBox, computedFontFamily } = takeMeasurement({
+        fontFamily,
+        fontSize,
+        text,
+        fontVariantNumeric,
+        fontWeight,
+        letterSpacing,
+    });
+    if (validateFontIsLoaded) {
+        const { boundingBox: boundingBoxOfFallbackFont, computedFontFamily: computedFallback, } = takeMeasurement({
+            fontFamily: null,
+            fontSize,
+            text,
+            fontVariantNumeric,
+            fontWeight,
+            letterSpacing,
+        });
+        const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
+            boundingBox.width === boundingBoxOfFallbackFont.width;
+        if (sameAsFallbackFont && computedFallback !== computedFontFamily) {
+            const err = [
+                `Called measureText() with "fontFamily": ${JSON.stringify(fontFamily)} but it looks like the font is not loaded at the time of calling.`,
+                `A measurement with the fallback font ${computedFallback} was taken and had the same dimensions, indicating that the browser used the fallback font.`,
+                'See https://remotion.dev/docs/layout-utils/best-practices for best practices.',
+            ];
+            throw new Error(err.join('\n'));
+        }
+    }
     const result = { height: boundingBox.height, width: boundingBox.width };
     wordCache.set(key, result);
     return result;
@@ -33,7 +73,7 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
 const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
     const lines = new Array(maxLines).fill(0).map(() => []);
     return {
-        add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }) => {
+        add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }) => {
             const lastLineIndex = lines.reduceRight((acc, curr, index) => {
                 if (acc === -1 && curr.length > 0) {
                     return index;
@@ -51,6 +91,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
                     fontSize,
                     letterSpacing,
                     fontVariantNumeric,
+                    validateFontIsLoaded,
                 },
             ];
             const widths = lineWithWord.map((w) => measureText(w).width);
@@ -85,7 +126,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
 };
 
 const sampleSize = 100;
-const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, }) => {
+const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }) => {
     const estimate = measureText({
         text,
         fontFamily,
@@ -93,6 +134,7 @@ const fitText = ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight
         fontWeight,
         fontVariantNumeric,
         letterSpacing,
+        validateFontIsLoaded,
     });
     return { fontSize: (withinWidth / estimate.width) * sampleSize };
 };

package/dist/esm/layouts/fill-text-box.d.ts

@@ -3,7 +3,7 @@ export declare const fillTextBox: ({ maxBoxWidth, maxLines, }: {
     maxBoxWidth: number;
     maxLines: number;
 }) => {
-    add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, }: Word) => {
+    add: ({ text, fontFamily, fontWeight, fontSize, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => {
         exceedsBox: boolean;
         newLine: boolean;
     };

package/dist/esm/layouts/fit-text.d.ts

@@ -1,10 +1,11 @@
-export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, }: {
+export declare const fitText: ({ text, withinWidth, fontFamily, fontVariantNumeric, fontWeight, letterSpacing, validateFontIsLoaded, }: {
     text: string;
     withinWidth: number;
     fontFamily: string;
     fontWeight?: string | number | undefined;
     letterSpacing?: string | undefined;
     fontVariantNumeric?: string | undefined;
+    validateFontIsLoaded?: boolean | undefined;
 }) => {
     fontSize: number;
 };

package/dist/esm/layouts/measure-text.d.ts

@@ -1,4 +1,4 @@
-type Dimensions = {
+export type Dimensions = {
     width: number;
     height: number;
 };
@@ -9,6 +9,6 @@ export type Word = {
     fontWeight?: number | string;
     letterSpacing?: string;
     fontVariantNumeric?: string;
+    validateFontIsLoaded?: boolean;
 };
-export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, }: Word) => Dimensions;
-export {};
+export declare const measureText: ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, }: Word) => Dimensions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/layout-utils",
-  "version": "4.0.134",
+  "version": "4.0.136",
   "description": "Layout Utils for Remotion",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",