pretext-pdfjs 0.2.1 → 0.3.0

package/README.md

@@ -86,7 +86,40 @@ await TextLayer.enableReflow(container, fullText, {
 });
 ```
 
-### Per-block reflow (images + text)
+### Reflow Mode (images preserved)
+
+```js
+import { createReflowRenderer } from "pretext-pdfjs/reflow";
+
+const renderer = createReflowRenderer(container, {
+  fontSize: 16,
+  enablePinchZoom: true,
+  enableMorph: false,           // set true for fisheye scroll
+  fontFamily: '"Literata", Georgia, serif',
+});
+await renderer.open("document.pdf");
+await renderer.showPage(1);
+// Pinch to zoom — text reflows, images stay in place
+```
+
+Unlike the text-only reader modes, reflow mode preserves images, vector graphics,
+and document structure. It uses PDF.js's `operationsFilter` to render non-text
+elements separately, then composites Pretext-reflowed text on top.
+
+### Pinch reader with preserved layout
+
+```js
+import { createPDFPinchReader } from "pretext-pdfjs/pinch";
+
+const reader = createPDFPinchReader(container, {
+  mode: "pinchType",
+  preserveLayout: true,  // images stay in place
+});
+await reader.open("document.pdf");
+await reader.showPage(1);
+```
+
+### Per-block reflow (full options)
 
 The reflow module bridges PDF mode (images preserved, no reflow) and reader modes (text reflows, images stripped). Text blocks reflow with Pretext at the target font size while images and vector graphics render as scaled bitmaps in their original positions.
 
@@ -101,8 +134,12 @@ const renderer = createReflowRenderer(container, {
   background: "#f4f1eb",
   textColor: "#252320",
   imageFit: "proportional",  // "proportional" | "original" | "full-width"
+  maxWidth: Infinity,        // max canvas width (default: full container)
   enablePinchZoom: true,
   enableMomentumScroll: true,
+  enableMorph: false,        // fisheye scroll effect on text + images
+  morphRadius: 300,          // morph effect radius in px
+  edgeFontRatio: 0.5,       // edge font = 50% of center font
   onZoom: (fontSize) => console.log("Font size:", fontSize),
   onPageReady: ({ pageNum, textBlocks, graphicRegions }) => {
     console.log(`Page ${pageNum}: ${textBlocks.length} text blocks, ${graphicRegions.length} graphics`);
@@ -127,9 +164,9 @@ renderer.destroy();
 
 **How it works:**
 
-1. **Analyze** — extracts text blocks (grouped by proximity) and graphic regions (images, vector paths) from the PDF page via `getTextContent()` and `getOperatorList()`. Renders the full page to an offscreen canvas and captures bitmap snippets for each graphic region.
+1. **Analyze** — extracts text blocks (grouped by proximity) and graphic regions (images, vector paths) from the PDF page via `getTextContent()` and `getOperatorList()`. Uses `operationsFilter` to render only non-text content to an offscreen canvas, and `recordImages` for precise image coordinates.
 2. **Reflow** — each text block is reflowed with Pretext's `prepareWithSegments()` + `layoutWithLines()` at the current font size. Graphic bitmaps are scaled proportionally.
-3. **Composite** — walks the region map in reading order, drawing reflowed text lines and graphic bitmaps onto a single output canvas.
+3. **Composite** — walks the region map in reading order, drawing reflowed text lines and graphic bitmaps onto a single output canvas. With `enableMorph`, applies fisheye interpolation to both text and images.
 
 Steps 1 runs once per page (cached). Steps 2-3 re-run on font size change, which is what makes pinch-to-zoom fast.
 
@@ -142,18 +179,19 @@ pretext-pdfjs/
 │   ├── pretext-text-layer.js     # PretextTextLayer (drop-in replacement)
 │   ├── measurement-cache.js      # Pretext-style Canvas measurement cache
 │   ├── viewer.js                 # PretextPDFViewer helper
-│   ├── pinch.js                  # Pinch-type PDF reader integration
-│   └── reflow.js                 # Per-block reflow (text + images)
-├── demo.html                     # Self-contained demo page
+│   ├── pinch.js                  # Pinch-type reading modes
+│   └── reflow.js                 # Per-block reflow with image preservation
+├── demo.html                     # Library landing page
+├── reader.html                   # Full PDF reader demo
 ├── package.json
 └── README.md
 ```
 
-**Kept from PDF.js** (via `pdfjs-dist` dependency): core parser, canvas renderer, annotation layer, worker architecture, font loading.
+**Kept from PDF.js**: core parser, canvas renderer, annotation layer, worker, font loading.
 
-**Replaced**: `TextLayer` class — measurement cache, ascent detection, width scaling.
+**Replaced**: TextLayer — measurement cache, ascent detection, width scaling.
 
-**Added**: `pretextMetrics`, `enableReflow()`, pinch/morph/combined reading modes, per-block reflow with image preservation.
+**Added**: pretextMetrics, enableReflow(), pinch/morph reading modes, per-block reflow with image preservation.
 
 ## Built on
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pretext-pdfjs",
-  "version": "0.2.1",
-  "description": "Fork of PDF.js with @chenglou/pretext-native text layer — zero DOM reflows for text measurement",
+  "version": "0.3.0",
+  "description": "Pretext-native text layer for PDF.js — zero DOM reflows, per-block reflow with image preservation, pinch-to-zoom text",
   "type": "module",
   "main": "./src/index.js",
   "exports": {

package/src/pinch.js

@@ -339,13 +339,51 @@ function createTextCanvas(container, opts = {}) {
  * @param {Function} [options.onPageLoad] - called with { pageNum, text, numPages }
  */
 export function createPDFPinchReader(container, options = {}) {
+  const preserveLayout = options.preserveLayout ?? false;
+  const mode = options.mode || "pinchType";
+
+  // When preserveLayout is true, delegate to the reflow engine
+  if (preserveLayout) {
+    let reflowRenderer = null;
+
+    return {
+      async open(source) {
+        const { createReflowRenderer } = await import("./reflow.js");
+        reflowRenderer = createReflowRenderer(container, {
+          fontSize: options.fontSize ?? 18,
+          minFontSize: options.minFontSize ?? 8,
+          maxFontSize: options.maxFontSize ?? 60,
+          fontFamily: options.fontFamily,
+          lineHeight: options.lineHeight ?? 1.6,
+          padding: options.padding ?? 28,
+          background: options.background ?? "#0a0a0a",
+          textColor: options.textColor ?? "#e5e5e5",
+          enablePinchZoom: true,
+          enableMorph: mode === "pinchMorph" || mode === "scrollMorph",
+          friction: options.friction ?? 0.95,
+          workerSrc: options.workerSrc,
+          onZoom: options.onZoom,
+        });
+        return reflowRenderer.open(source);
+      },
+      async showPage(pageNum) { return reflowRenderer.showPage(pageNum); },
+      async showAll() { return reflowRenderer.showAll(); },
+      async nextPage() { return reflowRenderer.nextPage(); },
+      async prevPage() { return reflowRenderer.prevPage(); },
+      resize() { /* handled by ResizeObserver in reflow */ },
+      destroy() { reflowRenderer?.destroy(); },
+      get currentPage() { return reflowRenderer?.currentPage ?? 0; },
+      get numPages() { return reflowRenderer?.numPages ?? 0; },
+      get canvas() { return reflowRenderer?.canvas ?? null; },
+      get mode() { return mode; },
+    };
+  }
+
   let pdfjs = null;
   let pdfDoc = null;
   let textInstance = null;
   let currentPage = 0;
 
-  const mode = options.mode || "pinchType";
-
   async function ensurePdfjs() {
     if (pdfjs) return;
     pdfjs = await import("pdfjs-dist");

package/src/reflow.js

@@ -14,6 +14,25 @@ function clamp(v, min, max) {
   return Math.max(min, Math.min(max, v));
 }
 
+/**
+ * Draw a line of text with justified spacing (equal space between words).
+ */
+function drawJustifiedLine(ctx, text, x, y, availWidth) {
+  const words = text.split(" ");
+  if (words.length <= 1) {
+    ctx.fillText(text, x, y);
+    return;
+  }
+  let totalWordWidth = 0;
+  for (const w of words) totalWordWidth += ctx.measureText(w).width;
+  const extraSpace = (availWidth - totalWordWidth) / (words.length - 1);
+  let xPos = x;
+  for (const w of words) {
+    ctx.fillText(w, xPos, y);
+    xPos += ctx.measureText(w).width + extraSpace;
+  }
+}
+
 function bboxOverlap(a, b) {
   const x1 = Math.max(a.x, b.x);
   const y1 = Math.max(a.y, b.y);
@@ -25,13 +44,49 @@ function bboxOverlap(a, b) {
   return smaller > 0 ? intersection / smaller : 0;
 }
 
+// ─── Font metadata extraction ────────────────────────────────────────────
+
+/**
+ * Extract real font metadata (bold, italic, weight, loadedName) from
+ * page.commonObjs. Must be called AFTER page.render() so fonts are loaded.
+ */
+async function extractFontMetadata(page, opList, OPS) {
+  const fontMap = new Map();
+
+  for (let i = 0; i < opList.fnArray.length; i++) {
+    if (opList.fnArray[i] === OPS.setFont) {
+      const fontRefName = opList.argsArray[i][0];
+      if (fontMap.has(fontRefName)) continue;
+
+      try {
+        const fontObj = page.commonObjs.get(fontRefName);
+        if (fontObj) {
+          fontMap.set(fontRefName, {
+            bold: fontObj.bold || false,
+            black: fontObj.black || false,
+            italic: fontObj.italic || false,
+            loadedName: fontObj.loadedName || null,
+            fallbackName: fontObj.fallbackName || "sans-serif",
+            css: fontObj.systemFontInfo?.css || null,
+            isMonospace: fontObj.isMonospace || false,
+            isSerifFont: fontObj.isSerifFont || false,
+          });
+        }
+      } catch (_) {
+        // Font not yet loaded — skip
+      }
+    }
+  }
+  return fontMap;
+}
+
 // ─── Page analysis ────────────────────────────────────────────────────────
 
 /**
  * Group adjacent text items into text blocks by proximity.
  * Also extracts font metadata: average size, italic, bold.
  */
-function groupTextBlocks(textItems, pageHeight, styles) {
+function groupTextBlocks(textItems, pageHeight, styles, fontMap) {
   const sorted = [...textItems].filter(i => i.str?.trim()).sort((a, b) => {
     const ay = pageHeight - a.transform[5];
     const by = pageHeight - b.transform[5];
@@ -73,10 +128,20 @@ function groupTextBlocks(textItems, pageHeight, styles) {
     const isSuperscript = isShortItem && isHorizAdjacent && sizeRatio > 1.3;
     const sizeOk = sizeRatio < 1.3 || isSuperscript;
 
+    // Large horizontal gap between consecutive items → likely column break
+    // Only for substantive text (skip short items like superscript markers)
+    const isLongItem = (item.str || "").trim().length > 3;
+    if (isLongItem && (hGap > lastFH * 1.5 ||
+        (current.bbox.w > lastFH * 10 && x < current.bbox.x - lastFH * 3))) {
+      blocks.push(current);
+      current = { items: [item], bbox: { x, y, w: item.width || 0, h: fontHeight } };
+      continue;
+    }
+
     if (
       sizeOk &&
       verticalGap < lastFH * 2.5 &&
-      x < current.bbox.x + current.bbox.w + lastFH * 2
+      x < current.bbox.x + current.bbox.w + lastFH * 1.5
     ) {
       current.items.push(item);
       current.bbox.x = Math.min(current.bbox.x, x);
@@ -94,7 +159,48 @@ function groupTextBlocks(textItems, pageHeight, styles) {
   }
   if (current) blocks.push(current);
 
-  // Compute font metadata per block
+  // Post-process: merge orphan tiny blocks (superscripts, markers like *, +, #)
+  // into the nearest larger block if vertically close
+  for (let i = blocks.length - 1; i >= 0; i--) {
+    const block = blocks[i];
+    if (block.items.length > 2) continue;
+    const text = block.items.map(it => (it.str || "").trim()).join("");
+    if (text.length > 3 || text.length === 0) continue;
+
+    let bestIdx = -1, bestDist = Infinity;
+    for (let j = 0; j < blocks.length; j++) {
+      if (j === i) continue;
+      const o = blocks[j];
+      // Skip other orphans (short text blocks)
+      const oText = o.items.map(it => (it.str || "").trim()).join("");
+      if (oText.length <= 3) continue;
+      // Check vertical proximity: orphan center within 30pt of target block
+      const bcy = block.bbox.y + block.bbox.h / 2;
+      if (bcy < o.bbox.y - 30 || bcy > o.bbox.y + o.bbox.h + 30) continue;
+      // Horizontal edge-to-edge distance (0 if overlapping)
+      const hDist = Math.max(0,
+        block.bbox.x > o.bbox.x + o.bbox.w ? block.bbox.x - (o.bbox.x + o.bbox.w) :
+        o.bbox.x > block.bbox.x + block.bbox.w ? o.bbox.x - (block.bbox.x + block.bbox.w) : 0);
+      if (hDist < bestDist) {
+        bestDist = hDist;
+        bestIdx = j;
+      }
+    }
+
+    if (bestIdx >= 0 && bestDist < Math.max(blocks[bestIdx].bbox.h, 20)) {
+      const target = blocks[bestIdx];
+      target.items.push(...block.items);
+      const newX = Math.min(target.bbox.x, block.bbox.x);
+      const newRight = Math.max(target.bbox.x + target.bbox.w, block.bbox.x + block.bbox.w);
+      const newBottom = Math.max(target.bbox.y + target.bbox.h, block.bbox.y + block.bbox.h);
+      target.bbox.x = newX;
+      target.bbox.w = newRight - newX;
+      target.bbox.h = newBottom - target.bbox.y;
+      blocks.splice(i, 1);
+    }
+  }
+
+  // Compute font metadata per block using real font objects from commonObjs
   for (const block of blocks) {
     const sizes = [];
     let italicCount = 0;
@@ -104,18 +210,10 @@ function groupTextBlocks(textItems, pageHeight, styles) {
       const fh = Math.hypot(item.transform[2], item.transform[3]);
       if (fh > 0) sizes.push(fh);
 
-      // Detect italic/bold from fontName and style
-      const name = (item.fontName || "").toLowerCase();
-      const style = styles?.[item.fontName];
-      const family = (style?.fontFamily || "").toLowerCase();
-      const combined = name + " " + family;
-
-      if (combined.includes("italic") || combined.includes("oblique")) italicCount++;
-      if (combined.includes("bold") || combined.includes("black") || combined.includes("heavy")) boldCount++;
-
-      // Also detect italic from transform skew
-      if (Math.abs(item.transform[2]) > 0.1 && Math.abs(item.transform[1]) < 0.1) {
-        italicCount++;
+      const fontMeta = fontMap?.get(item.fontName);
+      if (fontMeta) {
+        if (fontMeta.italic) italicCount++;
+        if (fontMeta.bold || fontMeta.black) boldCount++;
       }
     }
 
@@ -124,10 +222,10 @@ function groupTextBlocks(textItems, pageHeight, styles) {
       : 12;
     block.isItalic = italicCount > block.items.length * 0.4;
     block.isBold = boldCount > block.items.length * 0.4;
+    block.isBlack = block.items.some(it => fontMap?.get(it.fontName)?.black);
 
-    // Detect font family from the PDF's style metadata
-    const sampleStyle = styles?.[block.items[0]?.fontName];
-    block.pdfFontFamily = sampleStyle?.fontFamily || null;
+    // Store the font metadata for the dominant font in this block
+    block.fontMeta = fontMap?.get(block.items[0]?.fontName) || null;
   }
 
   return blocks;
@@ -138,8 +236,7 @@ function groupTextBlocks(textItems, pageHeight, styles) {
  * Only captures image operators (paintImageXObject etc).
  * Skips path/fill/stroke to avoid false positives from text decorations.
  */
-async function extractGraphicRegions(page, OPS) {
-  const ops = await page.getOperatorList();
+function extractGraphicRegions(opList, OPS) {
   const regions = [];
   const ctmStack = [];
   let ctm = [1, 0, 0, 1, 0, 0];
@@ -165,9 +262,9 @@ async function extractGraphicRegions(page, OPS) {
     return [ctm[0] * x + ctm[2] * y + ctm[4], ctm[1] * x + ctm[3] * y + ctm[5]];
   }
 
-  for (let i = 0; i < ops.fnArray.length; i++) {
-    const fn = ops.fnArray[i];
-    const args = ops.argsArray[i];
+  for (let i = 0; i < opList.fnArray.length; i++) {
+    const fn = opList.fnArray[i];
+    const args = opList.argsArray[i];
 
     if (fn === OPS.save) {
       ctmStack.push(ctm.slice());
@@ -200,6 +297,92 @@ async function extractGraphicRegions(page, OPS) {
   return regions;
 }
 
+/**
+ * Detect graphic regions by scanning the rendered canvas for non-text content.
+ * Complements op-based detection by also finding vector graphics (charts, diagrams).
+ */
+function detectGraphicRegionsFromRender(offCanvas, textBlocks, renderScale) {
+  const w = offCanvas.width;
+  const h = offCanvas.height;
+  const ctx = offCanvas.getContext("2d");
+
+  const cellPx = 16;
+  const cols = Math.ceil(w / cellPx);
+  const rows = Math.ceil(h / cellPx);
+  const occupied = new Uint8Array(cols * rows);
+
+  // Mark cells covered by text blocks
+  for (const block of textBlocks) {
+    const margin = 4 * renderScale;
+    const x0 = Math.floor(Math.max(0, block.bbox.x * renderScale - margin) / cellPx);
+    const y0 = Math.floor(Math.max(0, block.bbox.y * renderScale - margin) / cellPx);
+    const x1 = Math.ceil(Math.min(w, (block.bbox.x + block.bbox.w) * renderScale + margin) / cellPx);
+    const y1 = Math.ceil(Math.min(h, (block.bbox.y + block.bbox.h) * renderScale + margin) / cellPx);
+    for (let cy = y0; cy < y1 && cy < rows; cy++)
+      for (let cx = x0; cx < x1 && cx < cols; cx++)
+        occupied[cy * cols + cx] = 1;
+  }
+
+  // Scan non-text cells for visible content
+  const imgData = ctx.getImageData(0, 0, w, h);
+  const pixels = imgData.data;
+  const hasContent = new Uint8Array(cols * rows);
+
+  for (let cy = 0; cy < rows; cy++) {
+    for (let cx = 0; cx < cols; cx++) {
+      if (occupied[cy * cols + cx]) continue;
+      const px0 = cx * cellPx, py0 = cy * cellPx;
+      const px1 = Math.min(px0 + cellPx, w), py1 = Math.min(py0 + cellPx, h);
+      let dark = 0, total = 0;
+      for (let py = py0; py < py1; py += 2) {
+        for (let px = px0; px < px1; px += 2) {
+          const idx = (py * w + px) * 4;
+          if (pixels[idx + 3] > 20) {
+            const lum = 0.299 * pixels[idx] + 0.587 * pixels[idx + 1] + 0.114 * pixels[idx + 2];
+            if (lum < 240) dark++;
+          }
+          total++;
+        }
+      }
+      if (total > 0 && dark / total > 0.05) hasContent[cy * cols + cx] = 1;
+    }
+  }
+
+  // Connected-component labeling to find graphic regions
+  const visited = new Uint8Array(cols * rows);
+  const regions = [];
+  for (let cy = 0; cy < rows; cy++) {
+    for (let cx = 0; cx < cols; cx++) {
+      if (!hasContent[cy * cols + cx] || visited[cy * cols + cx]) continue;
+      const queue = [[cx, cy]];
+      visited[cy * cols + cx] = 1;
+      let minX = cx, maxX = cx, minY = cy, maxY = cy, count = 0;
+      while (queue.length > 0) {
+        const [qx, qy] = queue.shift();
+        minX = Math.min(minX, qx); maxX = Math.max(maxX, qx);
+        minY = Math.min(minY, qy); maxY = Math.max(maxY, qy);
+        count++;
+        for (const [dx, dy] of [[-1,0],[1,0],[0,-1],[0,1]]) {
+          const nx = qx + dx, ny = qy + dy;
+          if (nx >= 0 && nx < cols && ny >= 0 && ny < rows &&
+              hasContent[ny * cols + nx] && !visited[ny * cols + nx]) {
+            visited[ny * cols + nx] = 1;
+            queue.push([nx, ny]);
+          }
+        }
+      }
+      const rx = minX * cellPx / renderScale;
+      const ry = minY * cellPx / renderScale;
+      const rw = (maxX - minX + 1) * cellPx / renderScale;
+      const rh = (maxY - minY + 1) * cellPx / renderScale;
+      if (rw > 30 && rh > 30 && count > 4) {
+        regions.push({ type: "graphic", bbox: { x: rx, y: ry, w: rw, h: rh }, screenCoords: true });
+      }
+    }
+  }
+  return regions;
+}
+
 /**
  * Build text content for a block, preserving paragraph breaks.
  */
@@ -216,7 +399,8 @@ function blockToText(block, pageHeight) {
 
     if (lastY !== null) {
       const gap = Math.abs(currentY - lastY);
-      if (gap > lastFontSize * 1.8) {
+      const isShortItem = (item.str || "").trim().length <= 2;
+      if (gap > lastFontSize * 1.8 && !isShortItem) {
         result += "\n\n";
       } else if (gap > lastFontSize * 0.3) {
         if (!result.endsWith(" ") && !result.endsWith("\n")) {
@@ -245,9 +429,10 @@ function buildRegionMap(textBlocks, graphicRegions, pageHeight) {
   }
 
   for (const gr of graphicRegions) {
-    // PDF coords: y is from bottom → convert to top-down
-    const topY = pageHeight - gr.bbox.y - gr.bbox.h;
-    const bbox = { x: gr.bbox.x, y: topY, w: gr.bbox.w, h: gr.bbox.h };
+    // Render-based regions are already in screen coords; op-based need conversion
+    const bbox = gr.screenCoords
+      ? { ...gr.bbox }
+      : { x: gr.bbox.x, y: pageHeight - gr.bbox.y - gr.bbox.h, w: gr.bbox.w, h: gr.bbox.h };
 
     // Skip if this graphic region overlaps significantly with any text block
     const overlapsText = textBboxes.some(tb => bboxOverlap(bbox, tb) > 0.3);
@@ -256,28 +441,119 @@ function buildRegionMap(textBlocks, graphicRegions, pageHeight) {
     }
   }
 
-  // Detect columns: find the midpoint X where blocks cluster on left vs right
+  // ── Column detection via histogram gap-finding ──
   const pageWidth = Math.max(...regions.map(r => r.bbox.x + r.bbox.w), 1);
-  const midX = pageWidth / 2;
-  const leftBlocks = regions.filter(r => r.bbox.x + r.bbox.w / 2 < midX);
-  const rightBlocks = regions.filter(r => r.bbox.x + r.bbox.w / 2 >= midX);
-  const hasColumns = leftBlocks.length > 2 && rightBlocks.length > 2 &&
-    rightBlocks.some(r => leftBlocks.some(l => Math.abs(l.bbox.y - r.bbox.y) < 20));
+  const narrowBlocks = regions.filter(r => r.bbox.w <= pageWidth * 0.6);
+  let gapX = pageWidth / 2;
+  let hasColumns = false;
+
+  if (narrowBlocks.length >= 4) {
+    // Build horizontal coverage histogram
+    const binCount = 100;
+    const binWidth = pageWidth / binCount;
+    const coverage = new Uint8Array(binCount);
+    for (const r of narrowBlocks) {
+      const b0 = Math.max(0, Math.floor(r.bbox.x / binWidth));
+      const b1 = Math.min(binCount, Math.ceil((r.bbox.x + r.bbox.w) / binWidth));
+      for (let b = b0; b < b1; b++) coverage[b]++;
+    }
 
+    // Find widest empty gap in middle 60% of page
+    const searchStart = Math.floor(binCount * 0.2);
+    const searchEnd = Math.ceil(binCount * 0.8);
+    let gapStart = -1, gapLen = 0, bestStart = -1, bestLen = 0;
+    for (let b = searchStart; b < searchEnd; b++) {
+      if (coverage[b] === 0) {
+        if (gapStart < 0) gapStart = b;
+        gapLen = b - gapStart + 1;
+      } else {
+        if (gapLen > bestLen) { bestLen = gapLen; bestStart = gapStart; }
+        gapStart = -1; gapLen = 0;
+      }
+    }
+    if (gapLen > bestLen) { bestLen = gapLen; bestStart = gapStart; }
+
+    if (bestLen >= 2) {
+      gapX = (bestStart + bestLen / 2) * binWidth;
+      const leftCount = narrowBlocks.filter(r => r.bbox.x + r.bbox.w / 2 < gapX).length;
+      const rightCount = narrowBlocks.filter(r => r.bbox.x + r.bbox.w / 2 >= gapX).length;
+      hasColumns = leftCount > 2 && rightCount > 2;
+    }
+  }
+
+  // ── Detect text alignment per block (including justified) ──
+  for (const region of regions) {
+    if (region.type !== "text") continue;
+    const block = region.block;
+    const leftMargin = block.bbox.x;
+    const rightMargin = pageWidth - (block.bbox.x + block.bbox.w);
+    const marginDiff = Math.abs(leftMargin - rightMargin);
+
+    // Detect justified text: multiple lines with consistent right edges
+    let isJustified = false;
+    if (block.items.length >= 3) {
+      const lines = [];
+      let lineItems = [];
+      let lastLineY = null;
+      for (const item of block.items) {
+        const y = pageHeight - item.transform[5];
+        if (lastLineY !== null && Math.abs(y - lastLineY) > 2) {
+          if (lineItems.length > 0) lines.push(lineItems);
+          lineItems = [];
+        }
+        lineItems.push(item);
+        lastLineY = y;
+      }
+      if (lineItems.length > 0) lines.push(lineItems);
+
+      if (lines.length >= 3) {
+        // Compute right edge of each line (except last — last line is usually ragged)
+        const rightEdges = [];
+        for (let li = 0; li < lines.length - 1; li++) {
+          const lastItem = lines[li][lines[li].length - 1];
+          const rightX = lastItem.transform[4] + (lastItem.width || 0);
+          rightEdges.push(rightX);
+        }
+        if (rightEdges.length >= 2) {
+          const maxRight = Math.max(...rightEdges);
+          const consistent = rightEdges.filter(r => Math.abs(r - maxRight) < pageWidth * 0.02);
+          isJustified = consistent.length > rightEdges.length * 0.7;
+        }
+      }
+    }
+
+    if (hasColumns && block.bbox.w <= pageWidth * 0.6) {
+      block.align = isJustified ? "justify" : "left";
+    } else if (isJustified) {
+      block.align = "justify";
+    } else if (leftMargin > pageWidth * 0.05 && marginDiff < pageWidth * 0.1) {
+      block.align = "center";
+    } else {
+      block.align = "left";
+    }
+  }
+
+  // ── Sort in reading order ──
   if (hasColumns) {
-    // Two-column: sort each column top-to-bottom, then concatenate
-    // Full-width blocks (spanning > 60% of page) go first, sorted by Y
     const fullWidth = regions.filter(r => r.bbox.w > pageWidth * 0.6);
-    const leftCol = regions.filter(r => r.bbox.w <= pageWidth * 0.6 && r.bbox.x + r.bbox.w / 2 < midX);
-    const rightCol = regions.filter(r => r.bbox.w <= pageWidth * 0.6 && r.bbox.x + r.bbox.w / 2 >= midX);
+    const leftCol = regions.filter(r => r.bbox.w <= pageWidth * 0.6 && r.bbox.x + r.bbox.w / 2 < gapX);
+    const rightCol = regions.filter(r => r.bbox.w <= pageWidth * 0.6 && r.bbox.x + r.bbox.w / 2 >= gapX);
     const byY = (a, b) => a.bbox.y - b.bbox.y;
     fullWidth.sort(byY);
     leftCol.sort(byY);
     rightCol.sort(byY);
+
+    // Interleave: full-width blocks mark section boundaries
     regions.length = 0;
-    regions.push(...fullWidth, ...leftCol, ...rightCol);
+    let li = 0, ri = 0;
+    for (const fw of fullWidth) {
+      while (li < leftCol.length && leftCol[li].bbox.y < fw.bbox.y) regions.push(leftCol[li++]);
+      while (ri < rightCol.length && rightCol[ri].bbox.y < fw.bbox.y) regions.push(rightCol[ri++]);
+      regions.push(fw);
+    }
+    while (li < leftCol.length) regions.push(leftCol[li++]);
+    while (ri < rightCol.length) regions.push(rightCol[ri++]);
   } else {
-    // Single column: sort by Y then X
     regions.sort((a, b) => {
       if (Math.abs(a.bbox.y - b.bbox.y) > 10) return a.bbox.y - b.bbox.y;
       return a.bbox.x - b.bbox.x;
@@ -296,26 +572,24 @@ async function analyzePage(page, OPS) {
 
   // Get text content with styles
   const textContent = await page.getTextContent();
-  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles);
 
-  // Compute body font size (most common size = body text)
-  const allSizes = textBlocks.map(b => Math.round(b.avgFontSize * 10) / 10);
-  const freq = {};
-  for (const s of allSizes) freq[s] = (freq[s] || 0) + 1;
-  let bodyFontSize = 12;
-  let maxFreq = 0;
-  for (const [s, f] of Object.entries(freq)) {
-    if (f > maxFreq) { maxFreq = f; bodyFontSize = parseFloat(s); }
-  }
-  // Compute fontScale per block
-  for (const block of textBlocks) {
-    block.fontScale = block.avgFontSize / bodyFontSize;
+  // Get operator list once (reused for text/non-text classification + image extraction + font metadata)
+  const opList = await page.getOperatorList();
+
+  // Identify text operation indices for operationsFilter
+  const textOpIndices = new Set();
+  let inTextBlock = false;
+  for (let i = 0; i < opList.fnArray.length; i++) {
+    const fn = opList.fnArray[i];
+    if (fn === OPS.beginText) inTextBlock = true;
+    if (inTextBlock) textOpIndices.add(i);
+    if (fn === OPS.endText) inTextBlock = false;
   }
 
-  // Get graphic regions (images only, no paths)
-  const graphicRegions = await extractGraphicRegions(page, OPS);
+  // Extract graphic regions from operator list CTM tracking
+  const opGraphicRegions = extractGraphicRegions(opList, OPS);
 
-  // Render full page to offscreen canvas for bitmap extraction
+  // Render non-text only (images, paths, fills, backgrounds)
   const renderScale = 2;
   const offCanvas = document.createElement("canvas");
   offCanvas.width = Math.floor(pageWidth * renderScale);
@@ -326,9 +600,97 @@ async function analyzePage(page, OPS) {
   await page.render({
     canvasContext: offCtx,
     viewport: renderViewport,
+    operationsFilter: (index) => !textOpIndices.has(index),
   }).promise;
 
-  // Build region map (filters overlapping graphics)
+  // Get precise image coordinates via recordImages (supplements CTM detection).
+  // This full render also loads fonts into commonObjs as a side effect.
+  let imageCoordRegions = [];
+  let fullRenderDone = false;
+  try {
+    const imgTrackCanvas = document.createElement("canvas");
+    imgTrackCanvas.width = offCanvas.width;
+    imgTrackCanvas.height = offCanvas.height;
+    const imgRenderTask = page.render({
+      canvasContext: imgTrackCanvas.getContext("2d"),
+      viewport: renderViewport,
+      recordImages: true,
+    });
+    await imgRenderTask.promise;
+    fullRenderDone = true;
+    const imageCoords = imgRenderTask.imageCoordinates;
+    if (imageCoords && imageCoords.length > 0) {
+      for (let j = 0; j < imageCoords.length; j += 6) {
+        const x1 = imageCoords[j], y1 = imageCoords[j + 1];
+        const x2 = imageCoords[j + 2], y2 = imageCoords[j + 3];
+        const x3 = imageCoords[j + 4], y3 = imageCoords[j + 5];
+        const xs = [x1, x2, x3];
+        const ys = [y1, y2, y3];
+        const minX = Math.min(...xs) / renderScale;
+        const maxX = Math.max(...xs) / renderScale;
+        const minY = Math.min(...ys) / renderScale;
+        const maxY = Math.max(...ys) / renderScale;
+        if (maxX - minX > 10 && maxY - minY > 10) {
+          imageCoordRegions.push({
+            type: "graphic",
+            bbox: { x: minX, y: minY, w: maxX - minX, h: maxY - minY },
+            screenCoords: true,
+          });
+        }
+      }
+    }
+  } catch (_) {
+    // recordImages not supported — CTM fallback is used
+  }
+
+  // Ensure fonts are loaded for commonObjs access. If the recordImages render
+  // above didn't run, do a minimal full render to trigger font loading.
+  if (!fullRenderDone) {
+    const fontCanvas = document.createElement("canvas");
+    fontCanvas.width = 1;
+    fontCanvas.height = 1;
+    const fontViewport = page.getViewport({ scale: 0.1 });
+    try {
+      await page.render({ canvasContext: fontCanvas.getContext("2d"), viewport: fontViewport }).promise;
+    } catch (_) {}
+  }
+
+  // Extract real font metadata from commonObjs (bold, italic, weight, loadedName)
+  const fontMap = await extractFontMetadata(page, opList, OPS);
+
+  // Now group text blocks with real font data
+  const textBlocks = groupTextBlocks(textContent.items, pageHeight, textContent.styles, fontMap);
+
+  // Compute body font size (most common size = body text)
+  const allSizes = textBlocks.map(b => Math.round(b.avgFontSize * 10) / 10);
+  const freq = {};
+  for (const s of allSizes) freq[s] = (freq[s] || 0) + 1;
+  let bodyFontSize = 12;
+  let maxFreq = 0;
+  for (const [s, f] of Object.entries(freq)) {
+    if (f > maxFreq) { maxFreq = f; bodyFontSize = parseFloat(s); }
+  }
+  // Compute fontScale per block
+  for (const block of textBlocks) {
+    block.fontScale = block.avgFontSize / bodyFontSize;
+  }
+
+  // Detect graphics from rendered non-text canvas (catches vector graphics)
+  const renderGraphicRegions = detectGraphicRegionsFromRender(offCanvas, textBlocks, renderScale);
+
+  // Merge all sources, deduplicating by overlap
+  const graphicRegions = [...opGraphicRegions];
+  for (const rg of [...imageCoordRegions, ...renderGraphicRegions]) {
+    const overlapsExisting = graphicRegions.some(og => {
+      const ogBbox = og.screenCoords
+        ? og.bbox
+        : { x: og.bbox.x, y: pageHeight - og.bbox.y - og.bbox.h, w: og.bbox.w, h: og.bbox.h };
+      return bboxOverlap(rg.bbox, ogBbox) > 0.3;
+    });
+    if (!overlapsExisting) graphicRegions.push(rg);
+  }
+
+  // Build region map (filters overlapping graphics, detects columns + alignment)
   const regionMap = buildRegionMap(textBlocks, graphicRegions, pageHeight);
 
   // Extract bitmap snippets for graphic regions only
@@ -354,13 +716,14 @@ async function analyzePage(page, OPS) {
     textBlocks,
     graphicRegions,
     offCanvas,
+    fontMap,
   };
 }
 
 // ─── Reflow + composite engine ────────────────────────────────────────────
 
 function reflowAndComposite(analysis, opts) {
-  const { regionMap, bitmaps, pageWidth, pageHeight } = analysis;
+  const { regionMap, bitmaps, pageWidth, pageHeight, fontMap } = analysis;
   const {
     fontSize, fontFamily, lineHeight, padding, background,
     textColor, imageFit, canvasW,
@@ -389,15 +752,22 @@ function reflowAndComposite(analysis, opts) {
         continue;
       }
 
-      // Per-block font properties
+      // Per-block font properties using real font metadata from commonObjs
       const blockFontSize = Math.round(fontSize * (block.fontScale || 1));
       const blockLH = blockFontSize * lineHeight;
+      const fm = block.fontMeta;
       const style = block.isItalic ? "italic" : "normal";
-      const weight = block.isBold ? 700 : 400;
-      // Use PDF's detected font family if available, otherwise fall back to configured
-      const blockFamily = block.pdfFontFamily
-        ? `${block.pdfFontFamily}, ${fontFamily}`
-        : fontFamily;
+      const weight = block.isBlack ? 900 : block.isBold ? 700 : 400;
+
+      // Use the actual embedded PDF font if available (PDF.js loaded it via @font-face)
+      let blockFamily;
+      if (fm?.loadedName) {
+        blockFamily = `"${fm.loadedName}", ${fm.fallbackName || "sans-serif"}`;
+      } else if (fm?.css) {
+        blockFamily = fm.css;
+      } else {
+        blockFamily = fontFamily;
+      }
       const font = `${style} ${weight} ${blockFontSize}px ${blockFamily}`;
 
       const prepared = prepareWithSegments(text, font);
@@ -413,6 +783,7 @@ function reflowAndComposite(analysis, opts) {
         fontStyle: style,
         fontWeight: weight,
         fontFamily: blockFamily,
+        align: block.align || "left",
         region,
       });
     } else {
@@ -456,73 +827,6 @@ function reflowAndComposite(analysis, opts) {
   return { totalHeight, reflowedRegions, fullPageFallback: false };
 }
 
-/**
- * Draw the reflowed content to canvas.
- */
-function drawComposite(ctx, reflowedRegions, analysis, opts, scrollY) {
-  const {
-    fontSize, fontFamily, lineHeight, padding,
-    background, textColor, canvasW, canvasH, dpr,
-  } = opts;
-
-  const d = dpr;
-  const baseLH = fontSize * lineHeight;
-
-  ctx.fillStyle = background;
-  ctx.fillRect(0, 0, canvasW * d, canvasH * d);
-
-  // Full page fallback
-  if (reflowedRegions.length === 0 && analysis.offCanvas) {
-    const availableWidth = canvasW - padding * 2;
-    const scale = Math.min(availableWidth / analysis.pageWidth, 1);
-    ctx.drawImage(
-      analysis.offCanvas,
-      padding * d, padding * d,
-      analysis.pageWidth * scale * d,
-      analysis.pageHeight * scale * d
-    );
-    return;
-  }
-
-  let cursorY = padding;
-  ctx.textBaseline = "top";
-
-  for (const r of reflowedRegions) {
-    if (r.type === "text" && r.lines) {
-      const fs = r.fontSize || fontSize;
-      const lh = r.lineHeight || baseLH;
-      const style = r.fontStyle || "normal";
-      const weight = r.fontWeight || 400;
-
-      ctx.fillStyle = textColor;
-      ctx.font = `${style} ${weight} ${fs * d}px ${fontFamily}`;
-
-      for (const line of r.lines) {
-        const screenY = cursorY - scrollY;
-        if (screenY > -lh && screenY < canvasH + lh) {
-          ctx.fillText(line.text, padding * d, screenY * d);
-        }
-        cursorY += lh;
-      }
-    } else if (r.type === "graphic" && r.bitmap) {
-      const screenY = cursorY - scrollY;
-      if (screenY > -r.drawH && screenY < canvasH + r.drawH) {
-        const tmpCanvas = document.createElement("canvas");
-        tmpCanvas.width = r.bitmap.data.width;
-        tmpCanvas.height = r.bitmap.data.height;
-        tmpCanvas.getContext("2d").putImageData(r.bitmap.data, 0, 0);
-        ctx.drawImage(
-          tmpCanvas,
-          padding * d, screenY * d,
-          r.drawW * d, r.drawH * d
-        );
-      }
-      cursorY += r.drawH;
-    }
-    cursorY += baseLH * 0.4;
-  }
-}
-
 // ─── Main API ─────────────────────────────────────────────────────────────
 
 export function createReflowRenderer(container, options = {}) {
@@ -530,7 +834,7 @@ export function createReflowRenderer(container, options = {}) {
   const maxFont = options.maxFontSize ?? 48;
   const fontFamily = options.fontFamily ?? '"Literata", Georgia, serif';
   const lhRatio = options.lineHeight ?? 1.6;
-  const padding = options.padding ?? 24;
+  let padding = options.padding ?? 24;
   const bg = options.background ?? "#f4f1eb";
   const textColor = options.textColor ?? "#252320";
   const imageFit = options.imageFit ?? "proportional";
@@ -539,6 +843,12 @@ export function createReflowRenderer(container, options = {}) {
   const friction = options.friction ?? 0.95;
   const onZoom = options.onZoom;
   const onPageReady = options.onPageReady;
+  const enableMorph = options.enableMorph ?? false;
+  const morphRadius = options.morphRadius ?? 300;
+  const edgeFontRatio = options.edgeFontRatio ?? 0.5;
+  const maxWidth = options.maxWidth ?? Infinity;
+  const autoDetectPadding = options.autoDetectPadding ?? true;
+  const minPadding = options.minPadding ?? 20;
 
   let pdfjs = null;
   let pdfDoc = null;
@@ -589,6 +899,15 @@ export function createReflowRenderer(container, options = {}) {
 
   function reflow() {
     if (!currentAnalysis || W === 0) return;
+    // Auto-detect padding from PDF page margins
+    if (autoDetectPadding && currentAnalysis.textBlocks.length > 0 && currentAnalysis.pageWidth > 0) {
+      const minX = Math.min(...currentAnalysis.textBlocks.map(b => b.bbox.x));
+      const maxX = Math.max(...currentAnalysis.textBlocks.map(b => b.bbox.x + b.bbox.w));
+      const rightMargin = currentAnalysis.pageWidth - maxX;
+      const pdfMargin = Math.min(minX, rightMargin);
+      const marginRatio = pdfMargin / currentAnalysis.pageWidth;
+      padding = Math.round(Math.max(minPadding, W * marginRatio));
+    }
     const result = reflowAndComposite(currentAnalysis, {
       fontSize, fontFamily, lineHeight: lhRatio, padding,
       background: bg, textColor, imageFit, canvasW: W, canvasH: H, dpr,
@@ -605,7 +924,6 @@ export function createReflowRenderer(container, options = {}) {
       ctx.fillRect(0, 0, W * dpr, H * dpr);
       return;
     }
-    // Inline draw for performance (avoid function call overhead in rAF)
     const d = dpr;
     const baseLH = fontSize * lhRatio;
 
@@ -626,19 +944,64 @@ export function createReflowRenderer(container, options = {}) {
 
     let cursorY = padding;
     ctx.textBaseline = "top";
+    const viewCenter = H / 2;
 
     for (const r of reflowedRegions) {
       if (r.type === "text" && r.lines) {
         const fs = r.fontSize || fontSize;
         const lh = r.lineHeight || baseLH;
         const rFamily = r.fontFamily || fontFamily;
-        ctx.fillStyle = textColor;
-        ctx.font = `${r.fontStyle || "normal"} ${r.fontWeight || 400} ${fs * d}px ${rFamily}`;
+        const style = r.fontStyle || "normal";
+        const weight = r.fontWeight || 400;
+        const centered = r.align === "center";
+        const justified = r.align === "justify";
+        const availW = W - padding * 2;
+
+        if (!enableMorph) {
+          ctx.fillStyle = textColor;
+          ctx.font = `${style} ${weight} ${fs * d}px ${rFamily}`;
+        }
 
-        for (const line of r.lines) {
+        for (let lineIdx = 0; lineIdx < r.lines.length; lineIdx++) {
+          const line = r.lines[lineIdx];
           const screenY = cursorY - scrollY;
           if (screenY > -lh && screenY < H + lh) {
-            ctx.fillText(line.text, padding * d, screenY * d);
+            // Justified: distribute extra space between words (not on last line)
+            const isLastLine = lineIdx === r.lines.length - 1;
+            const shouldJustify = justified && !isLastLine && line.text.includes(" ");
+
+            if (enableMorph) {
+              const dist = Math.abs(screenY - viewCenter);
+              const t = Math.min(dist / morphRadius, 1);
+              const ease = 1 - (1 - t) ** 3;
+              const morphedFS = fs * (1 - ease * (1 - edgeFontRatio));
+              const opacity = 1.0 + (0.2 - 1.0) * ease;
+              const c = Math.round(37 - (37 - 160) * ease);
+              ctx.save();
+              ctx.globalAlpha = opacity;
+              ctx.fillStyle = `rgb(${c},${c - 2},${c - 3})`;
+              ctx.font = `${style} ${weight} ${morphedFS * d}px ${rFamily}`;
+              if (centered) {
+                ctx.textAlign = "center";
+                ctx.fillText(line.text, (W / 2) * d, screenY * d);
+                ctx.textAlign = "left";
+              } else if (shouldJustify) {
+                drawJustifiedLine(ctx, line.text, padding * d, screenY * d, availW * d);
+              } else {
+                ctx.fillText(line.text, padding * d, screenY * d);
+              }
+              ctx.restore();
+            } else {
+              if (centered) {
+                ctx.textAlign = "center";
+                ctx.fillText(line.text, (W / 2) * d, screenY * d);
+                ctx.textAlign = "left";
+              } else if (shouldJustify) {
+                drawJustifiedLine(ctx, line.text, padding * d, screenY * d, availW * d);
+              } else {
+                ctx.fillText(line.text, padding * d, screenY * d);
+              }
+            }
           }
           cursorY += lh;
         }
@@ -646,7 +1009,19 @@ export function createReflowRenderer(container, options = {}) {
         const screenY = cursorY - scrollY;
         if (screenY > -r.drawH && screenY < H + r.drawH) {
           const tmp = getTmpCanvas(r.bitmap);
-          ctx.drawImage(tmp, padding * d, screenY * d, r.drawW * d, r.drawH * d);
+          if (enableMorph) {
+            const dist = Math.abs(screenY + r.drawH / 2 - viewCenter);
+            const t = Math.min(dist / morphRadius, 1);
+            const ease = 1 - (1 - t) ** 3;
+            const imgScale = 1 - ease * (1 - edgeFontRatio);
+            const opacity = 1.0 + (0.2 - 1.0) * ease;
+            ctx.save();
+            ctx.globalAlpha = opacity;
+            ctx.drawImage(tmp, padding * d, screenY * d, r.drawW * imgScale * d, r.drawH * imgScale * d);
+            ctx.restore();
+          } else {
+            ctx.drawImage(tmp, padding * d, screenY * d, r.drawW * d, r.drawH * d);
+          }
         }
         cursorY += r.drawH;
       }
@@ -742,7 +1117,7 @@ export function createReflowRenderer(container, options = {}) {
 
   function handleResize() {
     dpr = Math.min(devicePixelRatio || 1, 3);
-    W = Math.min(container.clientWidth, 680);
+    W = Math.min(container.clientWidth, maxWidth);
     H = container.clientHeight;
     canvas.width = W * dpr;
     canvas.height = H * dpr;
@@ -789,11 +1164,14 @@ export function createReflowRenderer(container, options = {}) {
       scrollY = 0;
       scrollVelocity = 0;
       reflow();
+      onZoom?.(fontSize);
 
       onPageReady?.({
         pageNum,
         textBlocks: currentAnalysis.textBlocks,
         graphicRegions: currentAnalysis.graphicRegions,
+        pageWidth: currentAnalysis.pageWidth,
+        pageHeight: currentAnalysis.pageHeight,
       });
     },
 
@@ -838,6 +1216,7 @@ export function createReflowRenderer(container, options = {}) {
       scrollY = 0;
       scrollVelocity = 0;
       reflow();
+      onZoom?.(fontSize);
     },
 
     async nextPage() {
@@ -866,6 +1245,13 @@ export function createReflowRenderer(container, options = {}) {
       pdfDoc = null;
     },
 
+    setPadding(newPadding) {
+      if (newPadding !== padding) {
+        padding = newPadding;
+        reflow();
+      }
+    },
+
     setFontSize(newSize) {
       const clamped = clamp(newSize, minFont, maxFont);
       if (clamped !== fontSize) {