Incorrect Text Rendering When Scaling PDF View

[13unk0wn]

I am using Svelte 5 and Tauri to build a PDF viewer. When I try to zoom in, the text does not render properly. Some text that renders correctly at scale 1.0 does not render at all at larger scales, and a lot of the text alignment is incorrect.

If someone can help with this issue, I would be very grateful.

I am using:

• pdfjs-dist@5.3.31
• Svelte v5
• Tauri v2

Here is the code

<script>
  //@ts-nocheck
  import { invoke } from "@tauri-apps/api/core";
  import { onMount } from "svelte";
  import { readFile } from "@tauri-apps/plugin-fs";
  import * as pdfjs from "pdfjs-dist";
  import "pdfjs-dist/web/pdf_viewer.css";

  const { data } = $props();
  let pdfId;
  let pdfCanvas;
  const minScale = 1.0;
  const maxScale = 5;
  let scale = $state(1.0);
  let scaleRes = 2.0;
  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    "pdfjs-dist/build/pdf.worker.mjs",
    import.meta.url,
  ).toString();

  let pdfPages = [];
  let pdfContainer;
  let pdfRenderContext;
  let doc;
  let pageCount;
  let renderCanvasList = $state([]);
  let textContainer;

  async function renderPage(pageNumber, pageRenderElement) {
    const page = await doc.getPage(pageNumber);
    const viewport = page.getViewport({ scale });
    const outputScale = window.devicePixelRatio || 1;

    pdfRenderContext = pageRenderElement.getContext("2d");

    pageRenderElement.width = Math.floor(viewport.width * outputScale);
    pageRenderElement.height = Math.floor(viewport.height * outputScale);
    pageRenderElement.style.width = Math.floor(viewport.width) + "px";
    pageRenderElement.style.height = Math.floor(viewport.height) + "px";

    const transform =
      outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;

    await page.render({
      canvasContext: pdfRenderContext,
      transform,
      viewport,
    }).promise;

    // Clear previous text layer
    textContainer.innerHTML = "";
    textContainer.style.width = `${viewport.width}px`;
    textContainer.style.height = `${viewport.height}px`;

    // Get text content and render text layer
    const textContent = await page.getTextContent({ scale });
    const textLayer = new pdfjs.TextLayer({
      container: textContainer,
      textContentSource: textContent,
      viewport,
    });

    // Remove manual positioning and let the viewport handle it
    textContainer.style.position = "absolute";
    textContainer.style.left = "0";
    textContainer.style.top = "0";
    textContainer.style.width = "100%";
    textContainer.style.height = "100%";

    await textLayer.render();
    console.log("rendered");
  }

  function zoomIn() {
    if (scale < maxScale) {
      scale = Math.min(maxScale, scale + 0.25);
      renderPage(100, pdfCanvas);
    }
  }

  function zoomOut() {
    if (scale > minScale) {
      scale = Math.max(minScale, scale - 0.25);
      renderPage(100, pdfCanvas);
    }
  }

  function resetZoom() {
    scale = 1.0;
    renderPage(100, pdfCanvas);
  }

  onMount(async () => {
    pdfId = data?.pdfId;
    try {
      const pdfPath = await invoke("get_pdf_path", { pdfId });
      const contents = await readFile(`${pdfPath}`);
      const loadPdfTask = pdfjs.getDocument({ data: contents });
      doc = await loadPdfTask.promise;
      await renderPage(100, pdfCanvas);
    } catch (e) {
      console.error("PDF render error:", e);
    }
  });
</script>

<div class="pdfContainer relative w-fit" bind:this={pdfContainer}>
  <div class="zoom-controls">
    <button onclick={zoomOut} disabled={scale <= minScale}>-</button>
    <span>{Math.round(scale * 100)}%</span>
    <button onclick={zoomIn} disabled={scale >= maxScale}>+</button>
    <button onclick={resetZoom}>Reset</button>
  </div>
  <div class="page-container">
    <canvas bind:this={pdfCanvas}></canvas>
    <div id="textLayer" class="textLayer" bind:this={textContainer}></div>
  </div>
</div>

<style>
  .zoom-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
  }

  .zoom-controls button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: #f0f0f0;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
  }

  .zoom-controls button:hover:not(:disabled) {
    background: #e0e0e0;
  }

  .zoom-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .zoom-controls span {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 14px;
    color: #666;
  }

  .pdfContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .page-container {
    position: relative;
  }
</style>

[13unk0wn]

  async function renderPage(pageNumber, pageRenderElement) {
    if (!pageRenderElement || !pageNumber || !doc) return;

    const page = await doc.getPage(pageNumber);
    const viewport = page.getViewport({ scale });
    const outputScale = window.devicePixelRatio || 2;

    pdfRenderContext = pageRenderElement.getContext("2d");
    pageRenderElement.width = Math.floor(viewport.width * outputScale);
    pageRenderElement.height = Math.floor(viewport.height * outputScale);
    pageRenderElement.style.width = Math.floor(viewport.width) + "px";
    pageRenderElement.style.height = Math.floor(viewport.height) + "px";

    const transform =
      outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : undefined;

    await page.render({ canvasContext: pdfRenderContext, transform, viewport })
      .promise;

    textContainer.style.width = `${viewport.width}px`;
    textContainer.style.height = `${viewport.height}px`;

    // Clear previous text layer content
    textContainer.innerHTML = '';

    const textContent = await page.getTextContent();
    const textLayer = new pdfjs.TextLayer({
      container: textContainer,
      textContentSource: textContent,
      viewport,
      enhanceTextSelection: true,
      textLayerMode: 2,
    });

    textContainer.style.position = "absolute";
    textContainer.style.left = "0";
    textContainer.style.top = "0";
    textContainer.style.width = `${viewport.width}px`;
    textContainer.style.height = `${viewport.height}px`;

    await textLayer.render();

    // Scale the text layer container and its contents
    textContainer.style.transform = `scale(${scale})`;
    textContainer.style.transformOrigin = '0 0';
    textContainer.style.width = `${viewport.width / scale}px`;
    textContainer.style.height = `${viewport.height / scale}px`;

    page.cleanup();
  }

Apparently this fixed the zoom problem for me