fix(math): estimate height from OMML structure instead of fixed 24px (SD-2413) (#2653)

Walk the OMML JSON tree to count vertical stacking elements (fractions,
bars, limits, equation arrays) and scale the height estimate accordingly.
Also fix measuring DOM to initialize currentLine for math-only paragraphs
so the estimated height actually flows into line height calculation.

Author: caio-pizzol

packages/layout-engine/measuring/dom/src/index.ts

@@ -1640,7 +1640,20 @@ async function measureParagraphBlock(block: ParagraphBlock, maxWidth: number): P
       const mathWidth = mathRun.width ?? 20;
       const mathHeight = mathRun.height ?? 24;
 
-      if (currentLine) {
+      if (!currentLine) {
+        currentLine = {
+          fromRun: runIndex,
+          fromChar: 0,
+          toRun: runIndex,
+          toChar: 1,
+          width: mathWidth,
+          maxFontSize: lastFontSize,
+          maxWidth: getEffectiveWidth(lines.length === 0 ? initialAvailableWidth : bodyContentWidth),
+          segments: [{ runIndex, fromChar: 0, toChar: 1, width: mathWidth }],
+          spaceCount: 0,
+          maxImageHeight: mathHeight,
+        };
+      } else {
         currentLine.toRun = runIndex;
         currentLine.toChar = 1;
         currentLine.width = roundValue(currentLine.width + mathWidth);

packages/layout-engine/pm-adapter/src/converters/inline-converters/math.ts

@@ -8,7 +8,8 @@ import { estimateMathDimensions } from '../math-constants.js';
  */
 export function mathInlineNodeToRun({ node, positions, sdtMetadata }: InlineConverterParams): MathRun | null {
   const textContent = String(node.attrs?.textContent ?? '');
-  const { width, height } = estimateMathDimensions(textContent);
+  const ommlJson = node.attrs?.originalXml ?? null;
+  const { width, height } = estimateMathDimensions(textContent, ommlJson);
 
   const run: MathRun = {
     kind: 'math',

packages/layout-engine/pm-adapter/src/converters/math-block.test.ts

@@ -74,6 +74,26 @@ describe('handleMathBlockNode', () => {
     expect(run.width).toBe(50); // 5 chars * 10px
   });
 
+  it('estimates taller height for fractions', () => {
+    const { context, blocks } = makeContext();
+    const fractionXml = {
+      name: 'm:oMathPara',
+      elements: [{
+        name: 'm:oMath',
+        elements: [{
+          name: 'm:f',
+          elements: [
+            { name: 'm:num', elements: [{ name: 'm:r' }] },
+            { name: 'm:den', elements: [{ name: 'm:r' }] },
+          ],
+        }],
+      }],
+    };
+    handleMathBlockNode(makeNode({ textContent: 'ab', originalXml: fractionXml }) as any, context);
+    const run = (blocks[0] as ParagraphBlock).runs[0] as MathRun;
+    expect(run.height).toBeGreaterThan(24);
+  });
+
   it('generates unique block IDs', () => {
     const { context, blocks } = makeContext();
     handleMathBlockNode(makeNode({ textContent: 'a' }) as any, context);

packages/layout-engine/pm-adapter/src/converters/math-block.ts

@@ -19,7 +19,8 @@ export function handleMathBlockNode(node: PMNode, context: NodeHandlerContext):
 
   const textContent = String(node.attrs?.textContent ?? '');
   const justification = String(node.attrs?.justification ?? 'centerGroup');
-  const { width, height } = estimateMathDimensions(textContent);
+  const ommlJson = node.attrs?.originalXml ?? null;
+  const { width, height } = estimateMathDimensions(textContent, ommlJson);
 
   const pos = positions.get(node);
 

packages/layout-engine/pm-adapter/src/converters/math-constants.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { estimateMathDimensions, MATH_DEFAULT_HEIGHT } from './math-constants.js';
+
+describe('estimateMathDimensions', () => {
+  it('returns default height when no OMML JSON is provided', () => {
+    const { height } = estimateMathDimensions('x+1');
+    expect(height).toBe(MATH_DEFAULT_HEIGHT);
+  });
+
+  it('returns default height for simple text runs (no vertical stacking)', () => {
+    const omml = {
+      name: 'm:oMath',
+      elements: [{ name: 'm:r', elements: [{ name: 'm:t', elements: [{ type: 'text', text: 'x' }] }] }],
+    };
+    const { height } = estimateMathDimensions('x', omml);
+    expect(height).toBe(MATH_DEFAULT_HEIGHT);
+  });
+
+  it('increases height for fractions (m:f)', () => {
+    const omml = {
+      name: 'm:oMath',
+      elements: [{
+        name: 'm:f',
+        elements: [
+          { name: 'm:num', elements: [{ name: 'm:r' }] },
+          { name: 'm:den', elements: [{ name: 'm:r' }] },
+        ],
+      }],
+    };
+    const { height } = estimateMathDimensions('ab', omml);
+    expect(height).toBeGreaterThan(MATH_DEFAULT_HEIGHT);
+  });
+
+  it('increases height for bar elements (m:bar)', () => {
+    const omml = {
+      name: 'm:oMath',
+      elements: [{
+        name: 'm:bar',
+        elements: [{ name: 'm:e', elements: [{ name: 'm:r' }] }],
+      }],
+    };
+    const { height } = estimateMathDimensions('x', omml);
+    expect(height).toBeGreaterThan(MATH_DEFAULT_HEIGHT);
+  });
+
+  it('stacks multipliers for nested elements (bar over fraction)', () => {
+    const omml = {
+      name: 'm:oMath',
+      elements: [{
+        name: 'm:bar',
+        elements: [{
+          name: 'm:e',
+          elements: [{
+            name: 'm:f',
+            elements: [
+              { name: 'm:num', elements: [{ name: 'm:r' }] },
+              { name: 'm:den', elements: [{ name: 'm:r' }] },
+            ],
+          }],
+        }],
+      }],
+    };
+    const fractionOnly = {
+      name: 'm:oMath',
+      elements: [{
+        name: 'm:f',
+        elements: [
+          { name: 'm:num', elements: [{ name: 'm:r' }] },
+          { name: 'm:den', elements: [{ name: 'm:r' }] },
+        ],
+      }],
+    };
+    const barOverFraction = estimateMathDimensions('ab', omml).height;
+    const fractionHeight = estimateMathDimensions('ab', fractionOnly).height;
+    expect(barOverFraction).toBeGreaterThan(fractionHeight);
+  });
+
+  it('scales height with equation array row count', () => {
+    const omml = {
+      name: 'm:oMathPara',
+      elements: [{
+        name: 'm:eqArr',
+        elements: [
+          { name: 'm:e', elements: [{ name: 'm:r' }] },
+          { name: 'm:e', elements: [{ name: 'm:r' }] },
+          { name: 'm:e', elements: [{ name: 'm:r' }] },
+        ],
+      }],
+    };
+    const { height } = estimateMathDimensions('abc', omml);
+    // 3 rows = 2 additional rows worth of height
+    expect(height).toBeGreaterThan(MATH_DEFAULT_HEIGHT * 2);
+  });
+
+  it('estimates width from text length', () => {
+    const { width } = estimateMathDimensions('abcde');
+    expect(width).toBe(50); // 5 chars * 10px
+  });
+
+  it('enforces minimum width', () => {
+    const { width } = estimateMathDimensions('x');
+    expect(width).toBe(20); // MATH_MIN_WIDTH
+  });
+});

packages/layout-engine/pm-adapter/src/converters/math-constants.ts

@@ -1,16 +1,86 @@
 /** Rough width estimate per character for math content (px). */
 export const MATH_CHAR_WIDTH = 10;
 
-/** Default height for math content (px). */
+/** Default height for a single-line math expression (px). */
 export const MATH_DEFAULT_HEIGHT = 24;
 
 /** Minimum width for a math run (px). */
 export const MATH_MIN_WIDTH = 20;
 
-/** Estimate math run dimensions from text content. */
-export function estimateMathDimensions(textContent: string): { width: number; height: number } {
+/**
+ * OMML elements that stack content vertically, with their height multipliers.
+ * Each element adds vertical space: a fraction has num+den (2x), a bar has
+ * base+accent (~1.4x), sub/superscripts are modest (~1.3x).
+ */
+const VERTICAL_ELEMENTS: Record<string, number> = {
+  'm:f': 0.6, // Fraction — stacks numerator over denominator
+  'm:bar': 0.25, // Bar — accent above/below base
+  'm:limLow': 0.35, // Lower limit
+  'm:limUpp': 0.35, // Upper limit
+  'm:nary': 0.4, // N-ary (integral/summation) with limits
+  'm:rad': 0.2, // Radical — root symbol adds height
+  'm:sSub': 0.1, // Subscript
+  'm:sSup': 0.1, // Superscript
+  'm:sSubSup': 0.2, // Sub-superscript
+  'm:sPre': 0.2, // Pre-sub-superscript
+};
+
+/** Count elements in an m:eqArr (equation array) for row-based height. */
+function countEqArrayRows(node: { elements?: unknown[] }): number {
+  if (!Array.isArray(node.elements)) return 1;
+  return node.elements.filter(
+    (el: unknown) => el && typeof el === 'object' && (el as { name?: string }).name === 'm:e',
+  ).length;
+}
+
+/**
+ * Estimate height multiplier by walking the OMML JSON tree.
+ * Returns the cumulative vertical stacking factor.
+ */
+function estimateHeightMultiplier(node: unknown): number {
+  if (!node || typeof node !== 'object') return 0;
+  const n = node as { name?: string; elements?: unknown[] };
+
+  // Equation array: height scales with row count + tallest row content
+  if (n.name === 'm:eqArr') {
+    const rows = countEqArrayRows(n as { elements?: unknown[] });
+    const rowMultiplier = Math.max(0, rows - 1);
+    // Also recurse into rows to find tall content (e.g., fraction inside a row)
+    let maxRowContent = 0;
+    if (Array.isArray(n.elements)) {
+      for (const child of n.elements) {
+        maxRowContent = Math.max(maxRowContent, estimateHeightMultiplier(child));
+      }
+    }
+    return rowMultiplier + maxRowContent;
+  }
+
+  // Check if this node adds vertical height
+  const selfMultiplier = n.name ? (VERTICAL_ELEMENTS[n.name] ?? 0) : 0;
+
+  // Recurse into children, take the max child depth (deepest nesting path)
+  let maxChild = 0;
+  if (Array.isArray(n.elements)) {
+    for (const child of n.elements) {
+      maxChild = Math.max(maxChild, estimateHeightMultiplier(child));
+    }
+  }
+
+  return selfMultiplier + maxChild;
+}
+
+/**
+ * Estimate math run dimensions from text content and OMML structure.
+ * When ommlJson is provided, the height scales based on vertical stacking
+ * (fractions, bars, limits, equation arrays).
+ */
+export function estimateMathDimensions(
+  textContent: string,
+  ommlJson?: unknown,
+): { width: number; height: number } {
+  const multiplier = ommlJson ? estimateHeightMultiplier(ommlJson) : 0;
   return {
     width: Math.max(textContent.length * MATH_CHAR_WIDTH, MATH_MIN_WIDTH),
-    height: MATH_DEFAULT_HEIGHT,
+    height: Math.round(MATH_DEFAULT_HEIGHT * (1 + multiplier)),
   };
 }