@shadow-garden/bapbong-layout-engine 0.1.0 → 0.2.0

package/dist/index.js

@@ -2,9 +2,21 @@
 import {
   createNumberingCounter
 } from "@shadow-garden/bapbong-model";
-var DEFAULT_FONT = { family: "Arial", sizePt: 11, bold: false, italic: false };
+var DEFAULT_FONT = {
+  family: "Arial",
+  sizePt: 11,
+  bold: false,
+  italic: false
+};
 var PT_TO_PX = 96 / 72;
-var HEADING_PT = { 1: 24, 2: 18, 3: 14, 4: 12, 5: 11, 6: 11 };
+var HEADING_PT = {
+  1: 24,
+  2: 18,
+  3: 14,
+  4: 12,
+  5: 11,
+  6: 11
+};
 var LINE_HEIGHT_FACTOR = 1.2;
 var BASELINE_FACTOR = 0.8;
 var DEFAULT_TAB_WIDTH = 48;
@@ -80,11 +92,13 @@ function resolveImage(node, pos) {
 function paragraphToFlow(node, base, nodePos, allowFloats = false, marker) {
   const contentStart = nodePos + 1;
   const headingLevel = node.attrs["heading"];
-  const runBase = headingLevel ? { ...base, sizePt: HEADING_PT[headingLevel] ?? base.sizePt, bold: true } : base;
+  const styleId = node.attrs["styleId"];
+  const runBase = headingLevel ? { ...base, sizePt: HEADING_PT[headingLevel] ?? base.sizePt, bold: true } : styleId === "Title" ? { ...base, sizePt: 28 } : styleId === "Subtitle" ? { ...base, sizePt: 14, italic: true } : base;
   const runs = [];
   const floats = [];
   node.forEach((child, offset) => {
-    if (child.isText) runs.push(resolveRun(child, runBase, contentStart + offset));
+    if (child.isText)
+      runs.push(resolveRun(child, runBase, contentStart + offset));
     else if (child.type.name === "image") {
       const float = child.attrs["float"];
       if (float && allowFloats) {
@@ -111,7 +125,8 @@ function paragraphToFlow(node, base, nodePos, allowFloats = false, marker) {
       }
     } else if (child.type.name === "page_field")
       runs.push(resolveField(child, runBase, contentStart + offset));
-    else if (child.type.name === "hard_break") runs.push({ break: true, pos: contentStart + offset });
+    else if (child.type.name === "hard_break")
+      runs.push({ break: true, pos: contentStart + offset });
   });
   const list = node.attrs["list"];
   const align = node.attrs["align"];
@@ -147,8 +162,15 @@ function markerFor(node, counter) {
 }
 function nodeToBlock(node, base, nodePos, allowFloats = false, counter) {
   if (node.type.name === "paragraph")
-    return paragraphToFlow(node, base, nodePos, allowFloats, markerFor(node, counter));
-  if (node.type.name === "table") return tableToFlow(node, base, nodePos, counter);
+    return paragraphToFlow(
+      node,
+      base,
+      nodePos,
+      allowFloats,
+      markerFor(node, counter)
+    );
+  if (node.type.name === "table")
+    return tableToFlow(node, base, nodePos, counter);
   return null;
 }
 function tableToFlow(node, base, nodePos, counter) {
@@ -160,7 +182,13 @@ function tableToFlow(node, base, nodePos, counter) {
       const cellPos = rowPos + 1 + cellOffset;
       const content = [];
       cellNode.forEach((child, childOffset) => {
-        const block = nodeToBlock(child, base, cellPos + 1 + childOffset, true, counter);
+        const block = nodeToBlock(
+          child,
+          base,
+          cellPos + 1 + childOffset,
+          true,
+          counter
+        );
         if (block) content.push(block);
       });
       const a = cellNode.attrs;
@@ -192,7 +220,9 @@ function tableToFlow(node, base, nodePos, counter) {
 }
 function toFlowBlocks(doc, defaultFont = {}, allowFloats = true) {
   const base = { ...DEFAULT_FONT, ...defaultFont };
-  const counter = createNumberingCounter(doc.attrs["numbering"]);
+  const counter = createNumberingCounter(
+    doc.attrs["numbering"]
+  );
   const blocks = [];
   doc.forEach((node, offset) => {
     const block = nodeToBlock(node, base, offset, allowFloats, counter);
@@ -202,7 +232,16 @@ function toFlowBlocks(doc, defaultFont = {}, allowFloats = true) {
 }
 function tokenizeInline(inline, ctx) {
   if ("break" in inline) {
-    return [{ isBreak: true, font: ctx.base, width: 0, isSpace: false, pos: inline.pos, size: 1 }];
+    return [
+      {
+        isBreak: true,
+        font: ctx.base,
+        width: 0,
+        isSpace: false,
+        pos: inline.pos,
+        size: 1
+      }
+    ];
   }
   if ("src" in inline) {
     return [
@@ -313,7 +352,12 @@ function wrapParagraph(block, ctx, bandFn, emit) {
     return lineLeft + k * tabWidth - x;
   };
   const tabStops = block.tabs ? [...block.tabs].sort((a, b) => a.pos - b.pos) : [];
-  const LEADER_CHARS = { dot: ".", hyphen: "-", underscore: "_", middleDot: "\xB7" };
+  const LEADER_CHARS = {
+    dot: ".",
+    hyphen: "-",
+    underscore: "_",
+    middleDot: "\xB7"
+  };
   const MIN_TAB = 2;
   const tabGroup = (ti) => {
     let width = 0;
@@ -323,7 +367,8 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       if (t.isTab) break;
       if (decimalPrefix === null && t.text != null && !t.field) {
         const m = /[.,]/.exec(t.text);
-        if (m) decimalPrefix = width + measure(t.text.slice(0, m.index), t.font);
+        if (m)
+          decimalPrefix = width + measure(t.text.slice(0, m.index), t.font);
       }
       width += t.width;
     }
@@ -446,7 +491,16 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       height = target;
     }
     const painted = firstLine && marker ? [marker, ...segments] : segments;
-    emit({ x: startX, width: lineRight - startX, height, baseline, segments: painted, images, from, to });
+    emit({
+      x: startX,
+      width: lineRight - startX,
+      height,
+      baseline,
+      segments: painted,
+      images,
+      from,
+      to
+    });
     prevTo = to;
     lineTokens = [];
     lineWidth = 0;
@@ -480,10 +534,14 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       softWrapped = false;
       continue;
     }
-    if (token.isSpace && !token.isTab && lineTokens.length === 0 && softWrapped) continue;
+    if (token.isSpace && !token.isTab && lineTokens.length === 0 && softWrapped)
+      continue;
     if (token.isTab) resolveTab(token, lineStart() + lineWidth, ti);
     if (clusterable(token) && clusterFont && sameFont(clusterFont, token.font)) {
-      token.width = Math.max(0, measure(clusterText + token.text, token.font) - clusterWidth);
+      token.width = Math.max(
+        0,
+        measure(clusterText + token.text, token.font) - clusterWidth
+      );
     }
     const cursor = lineStart() + lineWidth;
     if (!token.isSpace && lineTokens.length > 0 && cursor + token.width > lineRight) {
@@ -491,14 +549,21 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       resetCluster();
       softWrapped = true;
       if (token.isTab) resolveTab(token, lineStart() + lineWidth, ti);
-      else if (clusterable(token)) token.width = measure(token.text, token.font);
+      else if (clusterable(token))
+        token.width = measure(token.text, token.font);
     }
     if (clusterable(token) && lineTokens.length === 0 && token.text.length > 1 && lineStart() + token.width > lineRight) {
       const avail = lineRight - lineStart();
       let n = 1;
-      while (n < token.text.length && measure(token.text.slice(0, n + 1), token.font) <= avail) n++;
+      while (n < token.text.length && measure(token.text.slice(0, n + 1), token.font) <= avail)
+        n++;
       const restText = token.text.slice(n);
-      const rest = { ...token, text: restText, width: measure(restText, token.font), size: restText.length };
+      const rest = {
+        ...token,
+        text: restText,
+        width: measure(restText, token.font),
+        size: restText.length
+      };
       if (token.pos != null) rest.pos = token.pos + n;
       token.text = token.text.slice(0, n);
       token.size = n;
@@ -519,7 +584,10 @@ function wrapParagraph(block, ctx, bandFn, emit) {
       const rotH = rotatedBoxHeight(token.image);
       maxImagePx = Math.max(maxImagePx, rotH);
       maxAscent = Math.max(maxAscent, token.image.height / 2 + rotH / 2);
-      maxDescent = Math.max(maxDescent, Math.max(0, (rotH - token.image.height) / 2));
+      maxDescent = Math.max(
+        maxDescent,
+        Math.max(0, (rotH - token.image.height) / 2)
+      );
     } else {
       maxFontPx = Math.max(maxFontPx, sizePx(token.font));
       if (metrics) {
@@ -572,7 +640,13 @@ function shiftTableX(table, dx) {
 }
 var TEXTBOX_INSET = { l: 10, t: 5, r: 10, b: 5 };
 function resolveFloat(f, x, y, ctx) {
-  const rf = { x, y, width: f.width, height: f.height, src: f.src };
+  const rf = {
+    x,
+    y,
+    width: f.width,
+    height: f.height,
+    src: f.src
+  };
   if (f.pos != null) rf.pos = f.pos;
   if (f.rotation) rf.rotation = f.rotation;
   if (f.shape) rf.shape = f.shape;
@@ -618,7 +692,8 @@ function eachCell(rows, ncols, visit) {
     for (const cell of rows[r].cells) {
       while (col < ncols && spanned[col] > 0) col++;
       visit(r, cell, col);
-      for (let k = 0; k < cell.colspan && col + k < ncols; k++) spanned[col + k] = cell.rowspan;
+      for (let k = 0; k < cell.colspan && col + k < ncols; k++)
+        spanned[col + k] = cell.rowspan;
       col += cell.colspan;
     }
     for (let i = 0; i < ncols; i++) if (spanned[i] > 0) spanned[i]--;
@@ -628,14 +703,18 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const avail = contentRight - contentLeft;
   const nrows = table.rows.length;
   const ncols = table.rows.reduce(
-    (m, r) => Math.max(m, r.cells.reduce((s, c) => s + c.colspan, 0)),
+    (m, r) => Math.max(
+      m,
+      r.cells.reduce((s, c) => s + c.colspan, 0)
+    ),
     0
   );
   const colWidths = new Array(ncols).fill(0);
   eachCell(table.rows, ncols, (_r, cell, startCol) => {
     if (cell.colwidth && cell.colwidth.length === cell.colspan) {
       for (let k = 0; k < cell.colspan && startCol + k < ncols; k++) {
-        if (colWidths[startCol + k] === 0) colWidths[startCol + k] = cell.colwidth[k];
+        if (colWidths[startCol + k] === 0)
+          colWidths[startCol + k] = cell.colwidth[k];
       }
     }
   });
@@ -643,7 +722,8 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const unknown = colWidths.filter((w) => w === 0).length;
   if (unknown > 0) {
     const share = Math.max(0, (avail - known) / unknown);
-    for (let i = 0; i < ncols; i++) if (colWidths[i] === 0) colWidths[i] = share;
+    for (let i = 0; i < ncols; i++)
+      if (colWidths[i] === 0) colWidths[i] = share;
   }
   const natural = colWidths.reduce((s, w) => s + w, 0);
   if (natural > avail && natural > 0) {
@@ -663,9 +743,15 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const cellDrafts = [];
   eachCell(table.rows, ncols, (r, cell, col) => {
     let cellWidth = 0;
-    for (let k = 0; k < cell.colspan && col + k < ncols; k++) cellWidth += colWidths[col + k];
+    for (let k = 0; k < cell.colspan && col + k < ncols; k++)
+      cellWidth += colWidths[col + k];
     const cellLeft = colX[col];
-    const flow = layoutFlow(cell.content, cellLeft + pad.left, cellLeft + cellWidth - pad.right, ctx);
+    const flow = layoutFlow(
+      cell.content,
+      cellLeft + pad.left,
+      cellLeft + cellWidth - pad.right,
+      ctx
+    );
     cellDrafts.push({
       startRow: r,
       startCol: col,
@@ -685,14 +771,18 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   const rowHeight = new Array(nrows).fill(0);
   for (const c of cellDrafts) {
     if (c.rowspan === 1) {
-      rowHeight[c.startRow] = Math.max(rowHeight[c.startRow], c.contentHeight + pad.top + pad.bottom);
+      rowHeight[c.startRow] = Math.max(
+        rowHeight[c.startRow],
+        c.contentHeight + pad.top + pad.bottom
+      );
     }
   }
   for (const c of cellDrafts) {
     if (c.rowspan > 1) {
       const need = c.contentHeight + pad.top + pad.bottom;
       let span = 0;
-      for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++) span += rowHeight[r];
+      for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++)
+        span += rowHeight[r];
       if (need > span) {
         const last = Math.min(c.startRow + c.rowspan - 1, nrows - 1);
         rowHeight[last] += need - span;
@@ -707,7 +797,8 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
   for (let r = 0; r < nrows; r++) rowY[r + 1] = rowY[r] + rowHeight[r];
   const cells = cellDrafts.map((c) => {
     let height = 0;
-    for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++) height += rowHeight[r];
+    for (let r = c.startRow; r < c.startRow + c.rowspan && r < nrows; r++)
+      height += rowHeight[r];
     const slack = Math.max(0, height - pad.top - pad.bottom - c.contentHeight);
     const vOffset = c.vAlign === "bottom" ? slack : c.vAlign === "center" ? slack / 2 : 0;
     const dy = rowY[c.startRow] + pad.top + vOffset;
@@ -725,19 +816,30 @@ function layoutTable(table, contentLeft, contentRight, ctx) {
     if (c.background) cell.background = c.background;
     if (c.borders) cell.borders = c.borders;
     if (c.tables.length > 0) cell.tables = c.tables;
-    if (c.floats.length > 0) cell.floats = c.floats.map((f) => ({ ...f, y: f.y + dy }));
+    if (c.floats.length > 0)
+      cell.floats = c.floats.map((f) => ({ ...f, y: f.y + dy }));
     return cell;
   });
-  const resolved = { x: contentLeft + xShift, y: 0, width: tableWidth, height: rowY[nrows], cells };
+  const resolved = {
+    x: contentLeft + xShift,
+    y: 0,
+    width: tableWidth,
+    height: rowY[nrows],
+    cells
+  };
   if (table.borders) resolved.borders = table.borders;
   let headerRows = 0;
   while (headerRows < nrows && table.rows[headerRows].header) headerRows++;
   if (headerRows > 0 && headerRows < nrows) {
     const headerBottom = rowY[headerRows];
-    const spansOut = cells.some((c) => c.y < headerBottom && c.y + c.height > headerBottom);
+    const spansOut = cells.some(
+      (c) => c.y < headerBottom && c.y + c.height > headerBottom
+    );
     if (!spansOut) resolved.headerBottom = headerBottom;
   }
-  const cantSplitBands = table.rows.map((row, r) => row.cantSplit ? { top: rowY[r], bottom: rowY[r + 1] } : null).filter((b) => b !== null);
+  const cantSplitBands = table.rows.map(
+    (row, r) => row.cantSplit ? { top: rowY[r], bottom: rowY[r + 1] } : null
+  ).filter((b) => b !== null);
   if (cantSplitBands.length > 0) resolved.cantSplitBands = cantSplitBands;
   return resolved;
 }
@@ -770,7 +872,10 @@ function cloneTable(t) {
   return { ...t, cells: t.cells.map(cloneCell) };
 }
 function cloneCell(cell) {
-  const copy = { ...cell, lines: cell.lines.map((l) => ({ ...l })) };
+  const copy = {
+    ...cell,
+    lines: cell.lines.map((l) => ({ ...l }))
+  };
   if (cell.tables) copy.tables = cell.tables.map(cloneTable);
   if (cell.floats) copy.floats = cell.floats.map((f) => ({ ...f }));
   return copy;
@@ -806,11 +911,19 @@ function splitTableAt(table, cut) {
     } else {
       const c = straddlers.get(cell);
       const topLines = cell.lines.filter((l) => l.y + l.height <= cut);
-      const topTables = (cell.tables ?? []).filter((t) => t.y + t.height <= cut);
-      const topCell = { ...cell, height: cut - cell.y, lines: topLines };
+      const topTables = (cell.tables ?? []).filter(
+        (t) => t.y + t.height <= cut
+      );
+      const topCell = {
+        ...cell,
+        height: cut - cell.y,
+        lines: topLines
+      };
       if (topTables.length > 0) topCell.tables = topTables;
       else delete topCell.tables;
-      const topFloats = (cell.floats ?? []).filter((f) => f.y + f.height <= cut);
+      const topFloats = (cell.floats ?? []).filter(
+        (f) => f.y + f.height <= cut
+      );
       if (topFloats.length > 0) topCell.floats = topFloats;
       else delete topCell.floats;
       topCells.push(topCell);
@@ -833,7 +946,13 @@ function splitTableAt(table, cut) {
       restCells.push(contCell);
     }
   }
-  const top = { x: table.x, y: 0, width: table.width, height: cut, cells: topCells };
+  const top = {
+    x: table.x,
+    y: 0,
+    width: table.width,
+    height: cut,
+    cells: topCells
+  };
   const rest = {
     x: table.x,
     y: 0,
@@ -855,10 +974,14 @@ function cloneHeaderCells(table, headerBottom) {
     tables: void 0,
     floats: cell.floats?.map((f) => ({ ...f })),
     lines: cell.lines.map((l) => {
-      const line = { ...l, segments: l.segments.map((s) => ({ ...s, pos: void 0 })) };
+      const line = {
+        ...l,
+        segments: l.segments.map((s) => ({ ...s, pos: void 0 }))
+      };
       delete line.from;
       delete line.to;
-      if (line.images) line.images = line.images.map((im) => ({ ...im, pos: void 0 }));
+      if (line.images)
+        line.images = line.images.map((im) => ({ ...im, pos: void 0 }));
       return line;
     })
   }));
@@ -935,13 +1058,15 @@ function placeBlocks(items, config, ctx, band, footnotes) {
       for (const l of ls)
         for (const s of l.segments) {
           const n = s.footnoteRef;
-          if (n != null && footnotes?.has(n) && !pageFnSet.has(n) && !out.includes(n)) out.push(n);
+          if (n != null && footnotes?.has(n) && !pageFnSet.has(n) && !out.includes(n))
+            out.push(n);
         }
     };
     for (const c of t.cells) {
       if (c.y >= maxY) continue;
       scan(c.lines);
-      if (c.tables) for (const nt of c.tables) for (const nc of nt.cells) scan(nc.lines);
+      if (c.tables)
+        for (const nt of c.tables) for (const nc of nt.cells) scan(nc.lines);
     }
     return out;
   };
@@ -970,10 +1095,16 @@ function placeBlocks(items, config, ctx, band, footnotes) {
     return { separatorY: areaTop + FOOTNOTE_AREA_GAP / 2, lines: out };
   };
   const finalizePage = () => {
-    const resolved = { index: pages.length, width: page.width, height: page.height, lines };
+    const resolved = {
+      index: pages.length,
+      width: page.width,
+      height: page.height,
+      lines
+    };
     if (tables.length > 0) resolved.tables = tables;
     if (pageFloats.length > 0) resolved.floats = pageFloats;
-    if (pageFnNums.length > 0) resolved.footnotes = buildFootnoteArea(pageFnNums);
+    if (pageFnNums.length > 0)
+      resolved.footnotes = buildFootnoteArea(pageFnNums);
     pages.push(resolved);
     lines = [];
     tables = [];
@@ -1063,7 +1194,9 @@ function placeBlocks(items, config, ctx, band, footnotes) {
           }
           const b = bandAt(y, estH);
           if (b) return b;
-          const blockers = exclusions.filter((ex) => ex.top < y + estH && ex.bottom > y);
+          const blockers = exclusions.filter(
+            (ex) => ex.top < y + estH && ex.bottom > y
+          );
           if (blockers.length === 0) return { left: colX0(), right: colX1() };
           y = Math.min(...blockers.map((ex) => ex.bottom));
         }
@@ -1107,7 +1240,9 @@ function placeBlocks(items, config, ctx, band, footnotes) {
       }
       const drafts = item.para.drafts;
       const draftsHeight = drafts?.reduce((s, d) => s + d.height, 0) ?? 0;
-      const floatsAhead = exclusions.some((ex) => ex.bottom > y && ex.top < y + draftsHeight);
+      const floatsAhead = exclusions.some(
+        (ex) => ex.bottom > y && ex.top < y + draftsHeight
+      );
       if (drafts && !floatsAhead) {
         for (const d of drafts) emitLine(d);
       } else {
@@ -1226,16 +1361,25 @@ function shiftDrafts(drafts, delta) {
     ...d,
     from: d.from != null ? d.from + delta : d.from,
     to: d.to != null ? d.to + delta : d.to,
-    segments: d.segments.map((s) => s.pos != null ? { ...s, pos: s.pos + delta } : s),
-    images: d.images.map((im) => im.pos != null ? { ...im, pos: im.pos + delta } : im)
+    segments: d.segments.map(
+      (s) => s.pos != null ? { ...s, pos: s.pos + delta } : s
+    ),
+    images: d.images.map(
+      (im) => im.pos != null ? { ...im, pos: im.pos + delta } : im
+    )
   }));
 }
 function cloneLineShifted(l, delta) {
   const out = {
     ...l,
-    segments: l.segments.map((s) => s.pos != null ? { ...s, pos: s.pos + delta } : { ...s })
+    segments: l.segments.map(
+      (s) => s.pos != null ? { ...s, pos: s.pos + delta } : { ...s }
+    )
   };
-  if (l.images) out.images = l.images.map((im) => im.pos != null ? { ...im, pos: im.pos + delta } : { ...im });
+  if (l.images)
+    out.images = l.images.map(
+      (im) => im.pos != null ? { ...im, pos: im.pos + delta } : { ...im }
+    );
   if (l.from != null) out.from = l.from + delta;
   if (l.to != null) out.to = l.to + delta;
   return out;
@@ -1278,7 +1422,10 @@ function layVariants(docs, fn) {
   return out;
 }
 function maxBandHeight(bands) {
-  return Math.max(0, ...[bands.default, bands.first, bands.even].filter(Boolean).map((b) => b.height));
+  return Math.max(
+    0,
+    ...[bands.default, bands.first, bands.even].filter(Boolean).map((b) => b.height)
+  );
 }
 function anyBandHasFields(bands) {
   return [bands.default, bands.first, bands.even].some(
@@ -1304,9 +1451,17 @@ function layoutChrome(doc, topY, left, right, ctx) {
   const lines = flow.lines.map((l) => ({ ...l, y: l.y + topY }));
   flow.tables.forEach((t) => offsetTable(t, topY));
   stripPositions(lines, flow.tables);
-  const band = { lines, tables: flow.tables, height: flow.height };
+  const band = {
+    lines,
+    tables: flow.tables,
+    height: flow.height
+  };
   if (flow.floats.length > 0)
-    band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY, pos: void 0 }));
+    band.floats = flow.floats.map((f) => ({
+      ...f,
+      y: f.y + topY,
+      pos: void 0
+    }));
   return band;
 }
 function layoutFooterChrome(doc, pageHeight, left, right, ctx) {
@@ -1318,12 +1473,21 @@ function layoutFooterChrome(doc, pageHeight, left, right, ctx) {
     height: flow.height
   };
   band.tables.forEach((t) => offsetTable(t, topY));
-  if (flow.floats) band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY }));
+  if (flow.floats)
+    band.floats = flow.floats.map((f) => ({ ...f, y: f.y + topY }));
   return band;
 }
 function layoutFootnoteBody(doc, left, right, ctx) {
-  const fnCtx = { ...ctx, base: { ...ctx.base, sizePt: ctx.base.sizePt * FOOTNOTE_FONT_SCALE } };
-  const flow = layoutFlow(toFlowBlocks(doc, fnCtx.base, false), left, right, fnCtx);
+  const fnCtx = {
+    ...ctx,
+    base: { ...ctx.base, sizePt: ctx.base.sizePt * FOOTNOTE_FONT_SCALE }
+  };
+  const flow = layoutFlow(
+    toFlowBlocks(doc, fnCtx.base, false),
+    left,
+    right,
+    fnCtx
+  );
   stripPositions(flow.lines, flow.tables);
   return { lines: flow.lines, height: flow.height };
 }
@@ -1332,10 +1496,24 @@ function layout(doc, config, cache, chrome, footnotes) {
   const { page } = config;
   const left = page.margin.left;
   const right = page.width - page.margin.right;
-  const headerDocs = { default: chrome?.header, first: chrome?.headerFirst, even: chrome?.headerEven };
-  const footerDocs = { default: chrome?.footer, first: chrome?.footerFirst, even: chrome?.footerEven };
-  const layHeaders = (c) => layVariants(headerDocs, (d) => layoutChrome(d, CHROME_DISTANCE, left, right, c));
-  const layFooters = (c) => layVariants(footerDocs, (d) => layoutFooterChrome(d, page.height, left, right, c));
+  const headerDocs = {
+    default: chrome?.header,
+    first: chrome?.headerFirst,
+    even: chrome?.headerEven
+  };
+  const footerDocs = {
+    default: chrome?.footer,
+    first: chrome?.footerFirst,
+    even: chrome?.footerEven
+  };
+  const layHeaders = (c) => layVariants(
+    headerDocs,
+    (d) => layoutChrome(d, CHROME_DISTANCE, left, right, c)
+  );
+  const layFooters = (c) => layVariants(
+    footerDocs,
+    (d) => layoutFooterChrome(d, page.height, left, right, c)
+  );
   let headers = layHeaders(ctx);
   let footers = layFooters(ctx);
   let top = page.margin.top;
@@ -1344,25 +1522,46 @@ function layout(doc, config, cache, chrome, footnotes) {
     top = Math.max(top, CHROME_DISTANCE + maxBandHeight(headers));
   }
   if (footers.default || footers.first || footers.even) {
-    bottom = Math.min(bottom, page.height - CHROME_DISTANCE - maxBandHeight(footers));
+    bottom = Math.min(
+      bottom,
+      page.height - CHROME_DISTANCE - maxBandHeight(footers)
+    );
   }
-  const counter = createNumberingCounter(doc.attrs["numbering"]);
+  const counter = createNumberingCounter(
+    doc.attrs["numbering"]
+  );
   const sections = doc.attrs["sections"] ?? [
-    { blockCount: doc.childCount, columns: { count: 1, gap: 0 }, newPage: true }
+    {
+      blockCount: doc.childCount,
+      columns: { count: 1, gap: 0 },
+      newPage: true
+    }
   ];
   const blockSection = [];
   for (const sec of sections) {
     for (let k = 0; k < sec.blockCount; k++) {
-      blockSection.push({ columns: sec.columns, start: k === 0, newPage: sec.newPage });
+      blockSection.push({
+        columns: sec.columns,
+        start: k === 0,
+        newPage: sec.newPage
+      });
     }
   }
   const lastSec = sections[sections.length - 1];
   while (blockSection.length < doc.childCount) {
-    blockSection.push({ columns: lastSec.columns, start: false, newPage: lastSec.newPage });
+    blockSection.push({
+      columns: lastSec.columns,
+      start: false,
+      newPage: lastSec.newPage
+    });
   }
   const items = [];
   doc.forEach((node, offset, index) => {
-    const bs = blockSection[index] ?? { columns: { count: 1, gap: 0 }, start: false, newPage: true };
+    const bs = blockSection[index] ?? {
+      columns: { count: 1, gap: 0 },
+      start: false,
+      newPage: true
+    };
     const colRight = left + columnWidth(right - left, bs.columns);
     const tag = (item) => {
       if (bs.start) item.section = { ...bs.columns, newPage: bs.newPage };
@@ -1395,17 +1594,35 @@ function layout(doc, config, cache, chrome, footnotes) {
       }
       const flow = paragraphToFlow(node, ctx.base, offset, true, marker);
       const drafts = layoutParagraph(flow, left, colRight, ctx);
-      cache?.paragraphs.set(node, { left, right: colRight, basePos: contentStart, marker, drafts });
+      cache?.paragraphs.set(node, {
+        left,
+        right: colRight,
+        basePos: contentStart,
+        marker,
+        drafts
+      });
       items.push(tag({ para: { ...para(drafts), getFlow: () => flow } }));
     } else if (node.type.name === "table") {
       const hit = cache?.tables.get(node);
       if (hit && hit.left === left && hit.right === colRight) {
-        items.push(tag({ table: cloneTableShifted(hit.table, offset - hit.basePos) }));
+        items.push(
+          tag({ table: cloneTableShifted(hit.table, offset - hit.basePos) })
+        );
         return;
       }
-      const table = layoutTable(tableToFlow(node, ctx.base, offset, counter), left, colRight, ctx);
+      const table = layoutTable(
+        tableToFlow(node, ctx.base, offset, counter),
+        left,
+        colRight,
+        ctx
+      );
       if (cache && !tableHasList(node)) {
-        cache.tables.set(node, { left, right: colRight, basePos: offset, table });
+        cache.tables.set(node, {
+          left,
+          right: colRight,
+          basePos: offset,
+          table
+        });
         items.push(tag({ table: cloneTableShifted(table, 0) }));
       } else {
         items.push(tag({ table }));
@@ -1423,7 +1640,10 @@ function layout(doc, config, cache, chrome, footnotes) {
   assignSectionHeights(items);
   const resolved = placeBlocks(items, config, ctx, { top, bottom }, fnMap);
   if (anyBandHasFields(headers) || anyBandHasFields(footers)) {
-    const fieldCtx = { ...ctx, fieldPlaceholder: String(resolved.pages.length) };
+    const fieldCtx = {
+      ...ctx,
+      fieldPlaceholder: String(resolved.pages.length)
+    };
     headers = layHeaders(fieldCtx);
     footers = layFooters(fieldCtx);
   }
@@ -1434,7 +1654,10 @@ function layout(doc, config, cache, chrome, footnotes) {
   if (footers.first) resolved.pageFooterFirst = footers.first;
   if (footers.even) resolved.pageFooterEven = footers.even;
   if (chrome?.titlePg || chrome?.evenAndOdd) {
-    resolved.chromeSelect = { titlePg: !!chrome.titlePg, evenAndOdd: !!chrome.evenAndOdd };
+    resolved.chromeSelect = {
+      titlePg: !!chrome.titlePg,
+      evenAndOdd: !!chrome.evenAndOdd
+    };
   }
   return resolved;
 }