@altano/satori-fit-text 0.0.1 → 0.1.1

package/README.md

@@ -1,6 +1,8 @@
 # satori-fit-text
 
-Uses [Satori](https://github.com/vercel/satori) to calculate the largest text font size that will fit a bounding box.
+Calculate the largest text font size that will fit a bounding box, without a web browser. Works anywhere [Satori](https://github.com/vercel/satori) does, e.g. Node.js, web browser, Vercel edge runtime, etc.
+
+![Demo](./assets/demo.gif)
 
 ## Installation
 
@@ -45,8 +47,10 @@ Because this measures the maximum font size using Satori, the ideal use of this
 
 ## Implementation
 
-The library tries various font sizes until it finds the ideal one that works. Each iteration is tested by generating an SVG with Satori. The SVG dimensions are found using [SVG.js])(https://svgjs.dev/docs/3.0/).
+The library tries various font sizes until it finds the ideal one that works. Each iteration is tested by generating an SVG with Satori and calculating the bounding box of the SVG.
 
 ## Performance
 
-The font size search is a binary search between 1 and 1000 with `O(log maxFontSize-minFontSize)` runtime, or a default of `O(log 1000)`. You can restrict the search space (by reducing the difference between `minFontSize` or `maxFontSize`) to reduce the number of guesses and improve performance.
+The font size search is a binary search between 1 and 1000 with `O(log maxFontSize-minFontSize)` runtime, or a default of `O(log 1000)`. You can improve performance by restricting the search space by reducing the difference between `minFontSize` and `maxFontSize`, which reduces the number of guesses.
+
+If you're doing something like producing Open Graph cards then you probably don't need to worry about performance.

package/dist/BrowserTextMeasurer-TCSGQHDB.js

@@ -0,0 +1,42 @@
+import {
+  TextMeasurer,
+  getWidthAdjustedForInlineBleed,
+  log_default
+} from "./chunk-JIONCYY3.js";
+
+// src/TextMeasurer/BrowserTextMeasurer.ts
+var BrowserTextMeasurer = class extends TextMeasurer {
+  #getSvgElement(svgText) {
+    const div = document.createElement("div");
+    div.style.position = "fixed";
+    div.innerHTML = svgText;
+    const svg = div.firstElementChild;
+    if (svg == null || !(svg instanceof SVGSVGElement)) {
+      throw new Error(`Child should be svg element`);
+    }
+    return svg;
+  }
+  async getDimensions(fontSize) {
+    const svgText = await this.generateSvg(fontSize);
+    const svg = this.#getSvgElement(svgText);
+    try {
+      document.body.appendChild(svg);
+      const { width, height } = svg.getBBox();
+      const widthAdjusted = getWidthAdjustedForInlineBleed(svg, width);
+      log_default({
+        fontSize,
+        width,
+        widthAdjusted,
+        height,
+        widthFits: widthAdjusted <= this.maxWidth,
+        heightFits: height <= this.maxHeight
+      });
+      return { width: widthAdjusted, height };
+    } finally {
+      svg.parentElement?.removeChild?.(svg);
+    }
+  }
+};
+export {
+  BrowserTextMeasurer as default
+};

package/dist/HeadlessTextMeasurer-46CHWL7H.js

@@ -0,0 +1,44 @@
+import {
+  TextMeasurer,
+  getWidthAdjustedForInlineBleed,
+  log_default
+} from "./chunk-JIONCYY3.js";
+
+// src/TextMeasurer/HeadlessTextMeasurer.ts
+import { SVG, registerWindow } from "@svgdotjs/svg.js";
+import { createSVGWindow } from "svgdom";
+var HeadlessTextMeasurer = class extends TextMeasurer {
+  #canvas;
+  constructor(text, font, maxWidth, maxHeight, lineHeight) {
+    super(text, font, maxWidth, maxHeight, lineHeight);
+    const window = createSVGWindow();
+    const document = window.document;
+    registerWindow(window, document);
+    this.#canvas = SVG(document.documentElement);
+  }
+  async getDimensions(fontSize) {
+    await this.#setFontSize(fontSize);
+    const { width, height } = this.#canvas.bbox();
+    const widthAdjusted = getWidthAdjustedForInlineBleed(
+      this.#canvas.node,
+      width
+    );
+    log_default({
+      fontSize,
+      width,
+      widthAdjusted,
+      height,
+      widthFits: widthAdjusted <= this.maxWidth,
+      heightFits: height <= this.maxHeight
+    });
+    return { width: widthAdjusted, height };
+  }
+  async #setFontSize(fontSize) {
+    const svgText = await this.generateSvg(fontSize);
+    this.#canvas.clear();
+    this.#canvas.svg(svgText);
+  }
+};
+export {
+  HeadlessTextMeasurer as default
+};

package/dist/TextMeasurer/BrowserTextMeasurer.d.ts

@@ -0,0 +1,6 @@
+import { TextMeasurer, type Dimensions } from "./TextMeasurer";
+export default class BrowserTextMeasurer extends TextMeasurer {
+    #private;
+    getDimensions(fontSize: number): Promise<Dimensions>;
+}
+//# sourceMappingURL=BrowserTextMeasurer.d.ts.map

package/dist/TextMeasurer/HeadlessTextMeasurer.d.ts

@@ -0,0 +1,8 @@
+import type { Font } from "../types";
+import { TextMeasurer, type Dimensions } from "./TextMeasurer";
+export default class HeadlessTextMeasurer extends TextMeasurer {
+    #private;
+    constructor(text: string, font: Font, maxWidth: number, maxHeight: number, lineHeight: number | "normal");
+    getDimensions(fontSize: number): Promise<Dimensions>;
+}
+//# sourceMappingURL=HeadlessTextMeasurer.d.ts.map

package/dist/TextMeasurer/TextMeasurer.d.ts

@@ -0,0 +1,15 @@
+import type { Font } from "../types";
+export type Dimensions = Pick<DOMRect, "width" | "height">;
+export declare abstract class TextMeasurer {
+    #private;
+    protected text: string;
+    protected font: Font;
+    protected maxWidth: number;
+    protected maxHeight: number;
+    protected lineHeight: number | "normal";
+    constructor(text: string, font: Font, maxWidth: number, maxHeight: number, lineHeight: number | "normal");
+    abstract getDimensions(fontSize: number): Promise<Dimensions>;
+    doesSizeFit(fontSize: number): Promise<boolean>;
+    protected generateSvg(fontSize: number): Promise<string>;
+}
+//# sourceMappingURL=TextMeasurer.d.ts.map

package/dist/TextMeasurer/getTextMeasurer.d.ts

@@ -0,0 +1,3 @@
+import type { TextMeasurer } from "./TextMeasurer";
+export declare function getTextMeasurer(...args: ConstructorParameters<typeof TextMeasurer>): Promise<TextMeasurer>;
+//# sourceMappingURL=getTextMeasurer.d.ts.map

package/dist/TextMeasurer/getWidthAdjustedForInlineBleed.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Satori will sometimes render text slightly outside the div on the left (e.g.
+ * x:-2). Having text slightly outside the box and drawing a border means we
+ * will have a bounding box on the svg that is slightly larger than the actual
+ * text size (by the amount of bleed).
+ *
+ * For example, if text starts at -2 and the div's bounding box is x:0 to
+ * x:1200, the svg's bounding box will have width=1202px. And that won't
+ * represent the actual width of the text.
+ *
+ * Let's account for this by just reducing the bounding box width by the amount
+ * the text is bleeding outside the left or right and trust that Satori isn't
+ * both letting the text bleed AND filling too much space.
+ */
+export default function getWidthAdjustedForInlineBleed(svg: SVGSVGElement, svgWidth: number): number;
+//# sourceMappingURL=getWidthAdjustedForInlineBleed.d.ts.map

package/dist/chunk-JIONCYY3.js

@@ -0,0 +1,91 @@
+// src/log.ts
+import debug from "debug";
+var log = debug("satori-text-fit");
+var log_default = log;
+
+// src/TextMeasurer/TextMeasurer.ts
+import satori from "satori";
+var TextMeasurer = class {
+  constructor(text, font, maxWidth, maxHeight, lineHeight) {
+    this.text = text;
+    this.font = font;
+    this.maxWidth = maxWidth;
+    this.maxHeight = maxHeight;
+    this.lineHeight = lineHeight;
+    this.#fonts = [this.font];
+  }
+  #fonts;
+  async doesSizeFit(fontSize) {
+    const { width, height } = await this.getDimensions(fontSize);
+    return width <= this.maxWidth && height <= this.maxHeight;
+  }
+  async generateSvg(fontSize) {
+    const node = {
+      type: "div",
+      props: {
+        style: {
+          all: "initial",
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          margin: 0,
+          padding: 0
+        },
+        children: [
+          {
+            type: "div",
+            props: {
+              style: {
+                // Static styles
+                margin: 0,
+                padding: 0,
+                boxSizing: "border-box",
+                // We render a border so that we measure the true dimensions of the text.
+                // Without one, the bounding box might not include significant whitespace.
+                // For example, if the last line of text has no descenders, the bounding box
+                // would only extend to the baseline of the last line. With a border, the
+                // bounding box will include all the whitespace between the baseline and the
+                // descent of the text.
+                border: "solid red 1px",
+                // Dynamic styles based on input
+                fontSize,
+                fontFamily: this.font.name,
+                maxWidth: this.maxWidth,
+                lineHeight: this.lineHeight
+              },
+              children: this.text
+            }
+          }
+        ]
+      }
+    };
+    return satori(node, {
+      fonts: this.#fonts,
+      width: this.maxWidth * 2,
+      height: this.maxHeight * 2
+    });
+  }
+};
+
+// src/TextMeasurer/getWidthAdjustedForInlineBleed.ts
+function getWidthAdjustedForInlineBleed(svg, svgWidth) {
+  let smallestXValue = 0;
+  let largestYValue = svgWidth;
+  for (const child of svg.children) {
+    if ("getBBox" in child && typeof child["getBBox"] === "function") {
+      const { x, y } = child.getBBox();
+      smallestXValue = Math.min(smallestXValue, x);
+      largestYValue = Math.max(largestYValue, y);
+    }
+  }
+  const xAdjustment = Math.ceil(Math.abs(smallestXValue));
+  const yAdjustment = largestYValue <= svgWidth ? 0 : Math.ceil(largestYValue) - svgWidth;
+  return svgWidth - xAdjustment - yAdjustment;
+}
+
+export {
+  log_default,
+  TextMeasurer,
+  getWidthAdjustedForInlineBleed
+};

package/dist/index.js

@@ -1,90 +1,13 @@
-// src/TextMeasurer.ts
-import { SVG, registerWindow } from "@svgdotjs/svg.js";
-import satori from "satori";
-
-// src/getSatoriFriendlyVNode.ts
-import { html as htmlToVNode } from "satori-html";
-import he from "he";
-function walkJsxTree(vnode, callback) {
-  callback(vnode);
-  const { children } = vnode.props;
-  if (children == null || typeof children === "string") {
-    return;
-  } else if (Array.isArray(children)) {
-    children.forEach((child) => walkJsxTree(child, callback));
+// src/TextMeasurer/getTextMeasurer.ts
+async function getTextMeasurer(...args) {
+  if (typeof window !== "undefined") {
+    const Measurer = await import("./BrowserTextMeasurer-TCSGQHDB.js");
+    return new Measurer.default(...args);
   } else {
-    walkJsxTree(children, callback);
+    const Measurer = await import("./HeadlessTextMeasurer-46CHWL7H.js");
+    return new Measurer.default(...args);
   }
 }
-function patchJsxTreeForSatori(vnode) {
-  walkJsxTree(vnode, (vnode2) => {
-    const { style } = vnode2.props;
-    if (style != null && typeof style["lineHeight"] === "string" && style["lineHeight"] != "") {
-      const num = Number(style["lineHeight"]);
-      if (!isNaN(num)) {
-        style["lineHeight"] = num;
-      }
-    }
-  });
-}
-function getSatoriFriendlyVNode(html) {
-  const htmlWithDecodedHtmlEntities = he.decode(html);
-  const vnode = htmlToVNode(htmlWithDecodedHtmlEntities);
-  patchJsxTreeForSatori(vnode);
-  return vnode;
-}
-
-// src/TextMeasurer.ts
-import { createSVGWindow } from "svgdom";
-var TextMeasurer = class {
-  constructor(text, font, maxWidth, maxHeight, lineHeight) {
-    this.text = text;
-    this.font = font;
-    this.maxWidth = maxWidth;
-    this.maxHeight = maxHeight;
-    this.lineHeight = lineHeight;
-    const window = createSVGWindow();
-    const document = window.document;
-    registerWindow(window, document);
-    this.#canvas = SVG(document.documentElement);
-  }
-  #canvas;
-  async doesSizeFit(fontSize) {
-    await this.#setFontSize(fontSize);
-    const { width, height } = this.#canvas.bbox();
-    return width <= this.maxWidth && height <= this.maxHeight;
-  }
-  async #generateSvg(fontSize) {
-    const html = `
-      <div style="
-        margin: 0;
-        padding: 0;
-        font-size: ${fontSize}px;
-        max-width: ${this.maxWidth}px;
-        line-height: ${this.lineHeight};
-        border: solid red 1px;
-      ">
-        ${this.text}
-      </div>
-    `.trim();
-    const vnode = getSatoriFriendlyVNode(html);
-    return satori(vnode, {
-      fonts: [
-        {
-          name: this.font.name,
-          data: this.font.data
-        }
-      ],
-      width: this.maxWidth * 2,
-      height: this.maxHeight * 2
-    });
-  }
-  async #setFontSize(fontSize) {
-    const svgText = await this.#generateSvg(fontSize);
-    this.#canvas.clear();
-    this.#canvas.svg(svgText);
-  }
-};
 
 // src/fitText.ts
 async function findLargestUsableFontSize({
@@ -100,7 +23,7 @@ async function findLargestUsableFontSize({
   if (maxTries < 2) {
     throw new Error("`maxTries` must be >= 2");
   }
-  const textMeasurer = new TextMeasurer(
+  const textMeasurer = await getTextMeasurer(
     text,
     font,
     maxWidth,

package/dist/log.d.ts

@@ -0,0 +1,4 @@
+import debug from "debug";
+declare const log: debug.Debugger;
+export default log;
+//# sourceMappingURL=log.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altano/satori-fit-text",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "Fit text to a bounding box in Node or the browser",
   "type": "module",
   "sideEffects": false,
@@ -19,14 +19,22 @@
   },
   "homepage": "https://github.com/altano/npm-packages/tree/main/packages/satori-fit-text",
   "files": [
+    "assets/",
     "dist/**/*.js",
     "dist/**/*.d.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "typography",
+    "satori",
+    "opengraph",
+    "fit-text"
+  ],
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.0",
+    "debug": "^4.3.4",
     "he": "^1.2.0",
     "satori": "^0.10.3",
     "satori-html": "^0.3.2",
@@ -34,10 +42,12 @@
   },
   "devDependencies": {
     "@resvg/resvg-js": "^2.4.1",
+    "@types/debug": "^4.1.8",
     "@types/he": "^1.2.0",
     "@types/jest-image-snapshot": "^6.2.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "@types/svgdom": "^0.1.0",
     "@vitest/coverage-v8": "^0.34.3",
     "@vitest/ui": "^0.30.1",
     "jest-image-snapshot": "^6.2.0",
@@ -48,8 +58,9 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
     "vitest": "^0.34.3",
-    "@altano/assets": "^0.0.0",
-    "@altano/tsconfig": "0.0.0"
+    "@altano/assets": "0.0.0",
+    "@altano/tsconfig": "0.0.0",
+    "@altano/tiny-async-pool": "1.0.2"
   },
   "scripts": {
     "build": "tsup",

package/dist/TextMeasurer.d.ts

@@ -1,12 +0,0 @@
-import type { Font } from "./types";
-export declare class TextMeasurer {
-    #private;
-    private text;
-    private font;
-    private maxWidth;
-    private maxHeight;
-    private lineHeight;
-    constructor(text: string, font: Font, maxWidth: number, maxHeight: number, lineHeight: number | "normal");
-    doesSizeFit(fontSize: number): Promise<boolean>;
-}
-//# sourceMappingURL=TextMeasurer.d.ts.map

package/dist/getSatoriFriendlyVNode.d.ts

@@ -1,4 +0,0 @@
-import { html as htmlToVNode } from "satori-html";
-export type VNode = ReturnType<typeof htmlToVNode>;
-export default function getSatoriFriendlyVNode(html: string): VNode;
-//# sourceMappingURL=getSatoriFriendlyVNode.d.ts.map