fix(renderer): keep text glyphs isotropic under non-uniform group scale

When an OOXML group has `ext` differing from `chExt`, the group
applies a non-uniform scale to its descendants. PowerPoint stretches
the shape frame but keeps text glyphs isotropic; pagus was
propagating the scale into each shape's <foreignObject>, horizontally
stretching the text.

Thread a cumulative `AccumScale` from `renderGroup` down through
`renderElement` into shape, text, and table renderers. When the
accumulated scale is non-uniform, wrap the foreignObject in an
inverse scale of `min(Sx,Sy)/Sx, min(Sx,Sy)/Sy` and expand its
intrinsic width/height by the reciprocal so the compensated box
still fills the frame. Uniform / identity scale is a no-op.

Refs #20

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: tthallos

packages/renderer/src/ShapeRenderer.ts

@@ -6,6 +6,7 @@ import type { ShapeElement, LineEnd } from '@pagus-kit/core'
 import { generateShapePath } from '@pagus-kit/core'
 import { renderFill } from './FillRenderer'
 import { renderText } from './TextRenderer'
+import type { AccumScale } from './SlideRenderer'
 import { fmt, ptToPx, dashArray } from './utils/svg'
 
 const LINE_END_SIZE: Record<string, number> = { small: 3, medium: 5, large: 8 }
@@ -90,6 +91,7 @@ export function renderShape(
   genId: () => string,
   fontSubs?: Record<string, string>,
   hiddenParagraphs?: Set<number>,
+  accumScale?: AccumScale,
 ): string {
   const w = shape.size.width
   const h = shape.size.height
@@ -149,7 +151,7 @@ export function renderShape(
   // Text (foreignObject) — NOT flipped, stays readable
   let textEl = ''
   if (shape.textBody && shape.textBody.paragraphs.length > 0) {
-    textEl = renderText(shape.textBody, shape.size, fontSubs, hiddenParagraphs)
+    textEl = renderText(shape.textBody, shape.size, fontSubs, hiddenParagraphs, accumScale)
   }
 
   if (textEl || isLine) {

packages/renderer/src/SlideRenderer.ts

@@ -115,13 +115,29 @@ function buildShadowFilter(shadow: Shadow, defs: string[], genId: () => string):
 
 // ---- Element rendering dispatch ----
 
+/**
+ * Accumulated group scale from the root down to this element.
+ * When a group's outer `ext` differs from its inner `chExt`, the group applies
+ * a non-uniform scale to its descendants. Text glyphs should NOT inherit that
+ * non-uniformity (PowerPoint stretches the frame, not the glyphs), so we
+ * thread the cumulative scale down and let text-emitting renderers cancel the
+ * non-uniform component via an inverse transform.
+ */
+export interface AccumScale {
+  x: number
+  y: number
+}
+
+const IDENTITY_SCALE: AccumScale = { x: 1, y: 1 }
+
 function renderElement(
   el: SlideElement,
   defs: string[],
   genId: () => string,
   slideSize: Size,
   fontSubs?: Record<string, string>,
   hiddenIds?: string[],
+  accumScale: AccumScale = IDENTITY_SCALE,
 ): string {
   const transform = buildTransformAttr(el, slideSize.width, slideSize.height)
 
@@ -144,7 +160,7 @@ function renderElement(
 
   switch (el.type) {
     case 'shape':
-      content = renderShape(el, defs, genId, fontSubs, hiddenParagraphs)
+      content = renderShape(el, defs, genId, fontSubs, hiddenParagraphs, accumScale)
       break
     case 'image':
       content = renderImage(el, defs, genId)
@@ -153,13 +169,13 @@ function renderElement(
       content = renderMedia(el)
       break
     case 'table':
-      content = renderTable(el, fontSubs)
+      content = renderTable(el, fontSubs, accumScale)
       break
     case 'chart':
       content = renderChart(el)
       break
     case 'group':
-      content = renderGroup(el, defs, genId, slideSize, fontSubs, hiddenIds)
+      content = renderGroup(el, defs, genId, slideSize, fontSubs, hiddenIds, accumScale)
       break
     default:
       content = ''
@@ -186,6 +202,7 @@ function renderGroup(
   slideSize: Size,
   fontSubs?: Record<string, string>,
   hiddenIds?: string[],
+  accumScale: AccumScale = IDENTITY_SCALE,
 ): string {
   // Group applies a coordinate space transformation for its children
   // childOffset and childExtent define the source coordinate space
@@ -212,8 +229,12 @@ function renderGroup(
     innerTransform = `translate(${offsetX},${offsetY})`
   }
 
+  const childAccumScale: AccumScale = hasScale
+    ? { x: accumScale.x * scaleX, y: accumScale.y * scaleY }
+    : accumScale
+
   const childrenSvg = group.children
-    .map((child) => renderElement(child, defs, genId, slideSize, fontSubs, hiddenIds))
+    .map((child) => renderElement(child, defs, genId, slideSize, fontSubs, hiddenIds, childAccumScale))
     .join('')
 
   if (innerTransform) {

packages/renderer/src/TableRenderer.ts

@@ -5,6 +5,7 @@
 import type { TableElement, TableCell, BorderLine } from '@pagus-kit/core'
 import { fillToCss } from './FillRenderer'
 import { renderTextInline } from './TextRenderer'
+import type { AccumScale } from './SlideRenderer'
 import { fmt, ptToPx, cssStyle } from './utils/svg'
 
 /** Mix a hex color toward white by the given ratio (0 = white, 1 = full color). */
@@ -86,7 +87,7 @@ function renderCell(cell: TableCell, colWidthPx: number, rowHeightPx: number, hi
  * @param table - The table element from the IR
  * @returns SVG foreignObject string containing an HTML table
  */
-export function renderTable(table: TableElement, fontSubs?: Record<string, string>): string {
+export function renderTable(table: TableElement, fontSubs?: Record<string, string>, accumScale?: AccumScale): string {
   const wpx = ptToPx(table.size.width)
   const hpx = ptToPx(table.size.height)
 
@@ -142,14 +143,28 @@ export function renderTable(table: TableElement, fontSubs?: Record<string, strin
     'table-layout': 'fixed',
   })
 
-  return [
-    `<foreignObject x="0" y="0" width="${fmt(wpx)}" height="${fmt(hpx)}">`,
-    `<table xmlns="http://www.w3.org/1999/xhtml" style="${tableStyle}">`,
-    colgroup,
-    `<tbody>`,
-    rowsHtml,
-    `</tbody>`,
-    `</table>`,
-    `</foreignObject>`,
-  ].join('')
+  // Non-uniform group scale compensation (see TextRenderer for rationale).
+  const sx = accumScale?.x ?? 1
+  const sy = accumScale?.y ?? 1
+  const needsCompensation = sx !== sy && sx > 0 && sy > 0
+  const s = needsCompensation ? Math.min(sx, sy) : 1
+  const invX = needsCompensation ? s / sx : 1
+  const invY = needsCompensation ? s / sy : 1
+  const expX = needsCompensation ? sx / s : 1
+  const expY = needsCompensation ? sy / s : 1
+
+  const fo =
+    `<foreignObject x="0" y="0" width="${fmt(wpx * expX)}" height="${fmt(hpx * expY)}">` +
+    `<table xmlns="http://www.w3.org/1999/xhtml" style="${tableStyle}">` +
+    colgroup +
+    `<tbody>` +
+    rowsHtml +
+    `</tbody>` +
+    `</table>` +
+    `</foreignObject>`
+
+  if (needsCompensation) {
+    return `<g transform="scale(${fmt(invX)},${fmt(invY)})">${fo}</g>`
+  }
+  return fo
 }

packages/renderer/src/TextRenderer.ts

@@ -3,6 +3,7 @@
  */
 
 import type { TextBody, TextRun, Paragraph, Size, ResolvedColor, LineSpacing } from '@pagus-kit/core'
+import type { AccumScale } from './SlideRenderer'
 import { escapeHtml, ptToPx, fmt, cssStyle } from './utils/svg'
 
 function colorToCss(color: ResolvedColor): string {
@@ -366,6 +367,7 @@ export function renderText(
   containerSize: Size,
   fontSubs?: Record<string, string>,
   hiddenParagraphs?: Set<number>,
+  accumScale?: AccumScale,
 ): string {
   const { bodyProperties, paragraphs } = textBody
   const { anchor, margins } = bodyProperties
@@ -453,13 +455,33 @@ export function renderText(
 
   const shrinkAttr = isShrinkNoScale ? ' data-pagus-shrink-fit="1"' : ''
 
-  return [
-    `<foreignObject x="0" y="${fmt(foY)}" width="${fmt(containerWPx)}" height="${fmt(foHeight)}" overflow="visible">`,
-    `<div xmlns="http://www.w3.org/1999/xhtml"${shrinkAttr} style="${wrapperStyle}">`,
-    html,
-    `</div>`,
-    `</foreignObject>`,
-  ].join('')
+  // Non-uniform group scale compensation.
+  // PowerPoint stretches the shape frame but keeps text glyphs isotropic. SVG
+  // propagates a non-uniform parent scale into the foreignObject HTML, which
+  // would horizontally (or vertically) distort text. To neutralize the
+  // non-uniform component while preserving the overall size chosen by the
+  // smaller axis, we wrap the foreignObject in an inverse scale and expand
+  // its intrinsic dimensions so the post-wrap box still fills the frame.
+  const sx = accumScale?.x ?? 1
+  const sy = accumScale?.y ?? 1
+  const needsCompensation = sx !== sy && sx > 0 && sy > 0
+  const s = needsCompensation ? Math.min(sx, sy) : 1
+  const invX = needsCompensation ? s / sx : 1
+  const invY = needsCompensation ? s / sy : 1
+  const expX = needsCompensation ? sx / s : 1
+  const expY = needsCompensation ? sy / s : 1
+
+  const fo =
+    `<foreignObject x="0" y="${fmt(foY * expY)}" width="${fmt(containerWPx * expX)}" height="${fmt(foHeight * expY)}" overflow="visible">` +
+    `<div xmlns="http://www.w3.org/1999/xhtml"${shrinkAttr} style="${wrapperStyle}">` +
+    html +
+    `</div>` +
+    `</foreignObject>`
+
+  if (needsCompensation) {
+    return `<g transform="scale(${fmt(invX)},${fmt(invY)})">${fo}</g>`
+  }
+  return fo
 }
 
 /**