@remotion/layout-utils 4.0.312 → 4.0.314

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureText = exports.fitText = exports.fillTextBox = void 0;
+exports.measureText = exports.fitTextOnNLines = exports.fitText = exports.fillTextBox = void 0;
 var fill_text_box_1 = require("./layouts/fill-text-box");
 Object.defineProperty(exports, "fillTextBox", { enumerable: true, get: function () { return fill_text_box_1.fillTextBox; } });
 var fit_text_1 = require("./layouts/fit-text");
 Object.defineProperty(exports, "fitText", { enumerable: true, get: function () { return fit_text_1.fitText; } });
+var fit_text_on_n_lines_1 = require("./layouts/fit-text-on-n-lines");
+Object.defineProperty(exports, "fitTextOnNLines", { enumerable: true, get: function () { return fit_text_on_n_lines_1.fitTextOnNLines; } });
 var measure_text_1 = require("./layouts/measure-text");
 Object.defineProperty(exports, "measureText", { enumerable: true, get: function () { return measure_text_1.measureText; } });

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

@@ -37,6 +37,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
                     fontWeight,
                     fontSize,
                     letterSpacing,
+                    textTransform,
                     fontVariantNumeric,
                 });
                 return { exceedsBox: false, newLine: false };
@@ -51,6 +52,7 @@ const fillTextBox = ({ maxBoxWidth, maxLines, }) => {
                     fontWeight,
                     fontSize,
                     letterSpacing,
+                    textTransform,
                     fontVariantNumeric,
                 },
             ];

package/dist/cjs/layouts/fit-text-on-n-lines.d.ts

@@ -0,0 +1,19 @@
+import type { TextTransform } from './measure-text';
+type FitTextOnNLinesProps = {
+    text: string;
+    maxLines: number;
+    maxBoxWidth: number;
+    fontFamily: string;
+    fontWeight?: number | string;
+    letterSpacing?: string;
+    fontVariantNumeric?: string;
+    validateFontIsLoaded?: boolean;
+    textTransform?: TextTransform;
+    additionalStyles?: Record<string, string>;
+    maxFontSize?: number;
+};
+export declare const fitTextOnNLines: ({ text, maxLines, maxBoxWidth, fontFamily, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, maxFontSize, }: FitTextOnNLinesProps) => {
+    fontSize: number;
+    lines: string[];
+};
+export {};

package/dist/cjs/layouts/fit-text-on-n-lines.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitTextOnNLines = void 0;
+const fill_text_box_1 = require("./fill-text-box");
+const PRECISION = 100;
+const fitTextOnNLines = ({ text, maxLines, maxBoxWidth, fontFamily, fontWeight, letterSpacing, fontVariantNumeric, validateFontIsLoaded, textTransform, additionalStyles, maxFontSize, }) => {
+    // Fixed max font size since we are using binary search a
+    const minFontSize = 0.1;
+    // Binary search to find the optimal font size
+    let left = Math.floor(minFontSize * PRECISION);
+    let right = Math.floor((maxFontSize !== null && maxFontSize !== void 0 ? maxFontSize : 2000) * PRECISION);
+    let optimalFontSize = minFontSize;
+    let optimalLines = [];
+    while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        const fontSize = mid / PRECISION;
+        // Create a text box with current font size
+        const textBox = (0, fill_text_box_1.fillTextBox)({
+            maxBoxWidth,
+            maxLines,
+        });
+        // Split text into words and try to fit them
+        const words = text.split(' ');
+        let exceedsBox = false;
+        let currentLine = 0;
+        const lines = [''];
+        for (const word of words) {
+            const result = textBox.add({
+                text: word + ' ',
+                fontFamily,
+                fontWeight,
+                fontSize,
+                letterSpacing,
+                fontVariantNumeric,
+                validateFontIsLoaded,
+                textTransform,
+                additionalStyles,
+            });
+            if (result.exceedsBox) {
+                exceedsBox = true;
+                break;
+            }
+            if (result.newLine) {
+                lines.push('');
+                currentLine++;
+            }
+            lines[currentLine] += word + ' ';
+        }
+        // If text fits within the box and number of lines
+        if (!exceedsBox && currentLine < maxLines) {
+            optimalFontSize = fontSize;
+            optimalLines = lines;
+            left = mid + 1;
+        }
+        else {
+            right = mid - 1;
+        }
+    }
+    return {
+        fontSize: optimalFontSize,
+        lines: optimalLines,
+    };
+};
+exports.fitTextOnNLines = fitTextOnNLines;

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

@@ -75,7 +75,10 @@ const measureText = ({ text, fontFamily, fontSize, fontWeight, letterSpacing, fo
         });
         const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height &&
             boundingBox.width === boundingBoxOfFallbackFont.width;
-        if (sameAsFallbackFont && computedFallback !== computedFontFamily) {
+        // Ensure there are at least 4 unique characters, with just a few, there is more likely to be a false positive
+        if (sameAsFallbackFont &&
+            computedFallback !== computedFontFamily &&
+            new Set(text).size > 4) {
             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.`,

package/dist/esm/index.mjs

@@ -89,7 +89,7 @@ var measureText = ({
       textTransform
     });
     const sameAsFallbackFont = boundingBox.height === boundingBoxOfFallbackFont.height && boundingBox.width === boundingBoxOfFallbackFont.width;
-    if (sameAsFallbackFont && computedFallback !== computedFontFamily) {
+    if (sameAsFallbackFont && computedFallback !== computedFontFamily && new Set(text).size > 4) {
       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.`,
@@ -153,6 +153,7 @@ var fillTextBox = ({
           fontWeight,
           fontSize,
           letterSpacing,
+          textTransform,
           fontVariantNumeric
         });
         return { exceedsBox: false, newLine: false };
@@ -167,6 +168,7 @@ var fillTextBox = ({
           fontWeight,
           fontSize,
           letterSpacing,
+          textTransform,
           fontVariantNumeric
         }
       ];
@@ -200,8 +202,75 @@ var fitText = ({
   });
   return { fontSize: withinWidth / estimate.width * sampleSize };
 };
+// src/layouts/fit-text-on-n-lines.ts
+var PRECISION = 100;
+var fitTextOnNLines = ({
+  text,
+  maxLines,
+  maxBoxWidth,
+  fontFamily,
+  fontWeight,
+  letterSpacing,
+  fontVariantNumeric,
+  validateFontIsLoaded,
+  textTransform,
+  additionalStyles,
+  maxFontSize
+}) => {
+  const minFontSize = 0.1;
+  let left = Math.floor(minFontSize * PRECISION);
+  let right = Math.floor((maxFontSize ?? 2000) * PRECISION);
+  let optimalFontSize = minFontSize;
+  let optimalLines = [];
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const fontSize = mid / PRECISION;
+    const textBox = fillTextBox({
+      maxBoxWidth,
+      maxLines
+    });
+    const words = text.split(" ");
+    let exceedsBox = false;
+    let currentLine = 0;
+    const lines = [""];
+    for (const word of words) {
+      const result = textBox.add({
+        text: word + " ",
+        fontFamily,
+        fontWeight,
+        fontSize,
+        letterSpacing,
+        fontVariantNumeric,
+        validateFontIsLoaded,
+        textTransform,
+        additionalStyles
+      });
+      if (result.exceedsBox) {
+        exceedsBox = true;
+        break;
+      }
+      if (result.newLine) {
+        lines.push("");
+        currentLine++;
+      }
+      lines[currentLine] += word + " ";
+    }
+    if (!exceedsBox && currentLine < maxLines) {
+      optimalFontSize = fontSize;
+      optimalLines = lines;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+  return {
+    fontSize: optimalFontSize,
+    lines: optimalLines
+  };
+};
 export {
   measureText,
+  fitTextOnNLines,
   fitText,
   fillTextBox
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/layout-utils"
   },
   "name": "@remotion/layout-utils",
-  "version": "4.0.312",
+  "version": "4.0.314",
   "description": "Utilities for working with layouts",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.312"
+    "@remotion/eslint-config-internal": "4.0.314"
   },
   "author": "Yehor Misiats (https://github.com/satelllte)",
   "maintainers": [