ugcinc-render 1.5.2 → 1.5.3

package/dist/index.js

@@ -302,28 +302,70 @@ function calculateAutoWidth({
   fontSize,
   fontWeight,
   fontFamily,
-  letterSpacing
+  letterSpacing,
+  lineHeight
 }) {
   if (typeof document === "undefined") {
     throw new Error("calculateAutoWidth requires a browser environment with document available");
   }
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get 2D canvas context for text measurement");
+  const container = document.createElement("div");
+  container.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    width: ${maxWidth}px;
+    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
+    box-sizing: border-box;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    line-height: ${lineHeight};
+    white-space: pre-wrap;
+    word-break: break-word;
+  `;
+  container.textContent = text;
+  document.body.appendChild(container);
+  const totalHeight = container.offsetHeight;
+  const lineHeightPx = fontSize * lineHeight;
+  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
+  if (numLines === 1) {
+    const span = document.createElement("span");
+    span.style.cssText = `
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    span.textContent = text;
+    document.body.appendChild(span);
+    const textWidth = span.offsetWidth;
+    document.body.removeChild(span);
+    document.body.removeChild(container);
+    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
   }
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
   const words = text.split(" ");
   const lines = [];
   let currentLine = "";
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
   for (const word of words) {
     if (!word) continue;
     const testLine = currentLine + (currentLine ? " " : "") + word;
-    const charCount = [...testLine].length;
-    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
-    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
-    if (totalWidth > availableWidth && currentLine) {
+    measureSpan.textContent = testLine;
+    const testWidth = measureSpan.offsetWidth;
+    if (testWidth > availableWidth && currentLine) {
       lines.push(currentLine);
       currentLine = word;
     } else {
@@ -333,14 +375,11 @@ function calculateAutoWidth({
   if (currentLine) lines.push(currentLine);
   let widestLineWidth = 0;
   for (const line of lines) {
-    const chars = [...line];
-    let lineWidth = 0;
-    for (const char of chars) {
-      lineWidth += ctx.measureText(char).width + letterSpacing;
-    }
-    if (chars.length > 0) lineWidth -= letterSpacing;
-    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+    measureSpan.textContent = line;
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
   }
+  document.body.removeChild(measureSpan);
+  document.body.removeChild(container);
   return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
 }
 function TextElement({ segment, scale = 1 }) {
@@ -380,9 +419,10 @@ function TextElement({ segment, scale = 1 }) {
       fontSize,
       fontWeight,
       fontFamily,
-      letterSpacing
+      letterSpacing,
+      lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);

package/dist/index.mjs

@@ -228,28 +228,70 @@ function calculateAutoWidth({
   fontSize,
   fontWeight,
   fontFamily,
-  letterSpacing
+  letterSpacing,
+  lineHeight
 }) {
   if (typeof document === "undefined") {
     throw new Error("calculateAutoWidth requires a browser environment with document available");
   }
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get 2D canvas context for text measurement");
+  const container = document.createElement("div");
+  container.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    width: ${maxWidth}px;
+    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
+    box-sizing: border-box;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    line-height: ${lineHeight};
+    white-space: pre-wrap;
+    word-break: break-word;
+  `;
+  container.textContent = text;
+  document.body.appendChild(container);
+  const totalHeight = container.offsetHeight;
+  const lineHeightPx = fontSize * lineHeight;
+  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
+  if (numLines === 1) {
+    const span = document.createElement("span");
+    span.style.cssText = `
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    span.textContent = text;
+    document.body.appendChild(span);
+    const textWidth = span.offsetWidth;
+    document.body.removeChild(span);
+    document.body.removeChild(container);
+    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
   }
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
   const words = text.split(" ");
   const lines = [];
   let currentLine = "";
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
   for (const word of words) {
     if (!word) continue;
     const testLine = currentLine + (currentLine ? " " : "") + word;
-    const charCount = [...testLine].length;
-    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
-    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
-    if (totalWidth > availableWidth && currentLine) {
+    measureSpan.textContent = testLine;
+    const testWidth = measureSpan.offsetWidth;
+    if (testWidth > availableWidth && currentLine) {
       lines.push(currentLine);
       currentLine = word;
     } else {
@@ -259,14 +301,11 @@ function calculateAutoWidth({
   if (currentLine) lines.push(currentLine);
   let widestLineWidth = 0;
   for (const line of lines) {
-    const chars = [...line];
-    let lineWidth = 0;
-    for (const char of chars) {
-      lineWidth += ctx.measureText(char).width + letterSpacing;
-    }
-    if (chars.length > 0) lineWidth -= letterSpacing;
-    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+    measureSpan.textContent = line;
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
   }
+  document.body.removeChild(measureSpan);
+  document.body.removeChild(container);
   return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
 }
 function TextElement({ segment, scale = 1 }) {
@@ -306,9 +345,10 @@ function TextElement({ segment, scale = 1 }) {
       fontSize,
       fontWeight,
       fontFamily,
-      letterSpacing
+      letterSpacing,
+      lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",