How to adjust preview box spacing (more content above, less padding below)?

[abinas93]

Hi Ben,

Thank you for developing and sharing this wonderful project. It has made reading technical papers with lots of inline references (to equations, images, citations, etc.) significantly smoother. I no longer have to jump back and forth between pages to check referenced content—it's honestly a lifesaver!

I’d like to customize the preview box a bit to better suit my reading workflow. Specifically:

1. Include a few lines before the line containing the referenced object.
   Currently, the preview starts exactly at the line of the referenced object. It would be really helpful if it could also show some context above that line.

The PDF

Preview_top

2. Trim excess space at the bottom of the preview box.
   Right now, there seems to be a lot of empty or unnecessary space below the previewed content. I’d like to reduce this padding if possible.

Preview_bottom

Could you please tell me how to achieve these customizations?

Thanks again for your great work!

[belinghy]

Hey! I'm happy that it is working for you.

For 1, you can add padding by setting the PADDING value in the line below. I think +10 is probably a good start.

For 2, I'm not sure how to get the height of a reference object, or if it's possible. It is possible to estimate how much blank space is at the end of the preview from the reference location. Multiplying both previewStyle.height and preview.height keeps the aspect ratio.

const viewport = page.getViewport({
    scale: scale,
    offsetY: (offsetY - tempViewport.height + PADDING) * scale,
});

const estBlankPortion = 1 - Math.abs(offsetY - tempViewport.height) / tempViewport.height;
previewStyle.height = `${height * estBlankPortion}px`;
preview.height = viewport.height * estBlankPortion;
preview.width = viewport.width;

All together, here is the complete bookmarklet that I tested

javascript:(async function togglePreview() {
  const app = window.PDFViewerApplication;
  const anchor = document.getElementById("viewer");
  if ("_previewHandler" in app) {
    anchor.removeEventListener("mouseover", app._previewHandler);
    delete app._previewHandler;
    delete app._previewing;
    return;
  }

  const box = anchor.getBoundingClientRect();
  const halfWidth = (box.left + box.right) / 2;
  const destinations = await app.pdfDocument.getDestinations();
  app._previewing = false;

  async function mouseoverHandler(event) {
    if (!event.target.offsetParent.hasAttribute("data-internal-link") || app._previewing) return;

    const hash = event.target.hash;
    const parent = event.target.parentElement;

    const preview = document.createElement("canvas");
    const previewStyle = preview.style;
    previewStyle.border = "1px solid black";
    previewStyle.direction = "ltr";
    previewStyle.position = "fixed";
    previewStyle.zIndex = "99";
    previewStyle.top = `${event.clientY + 4}px`;
    previewStyle.boxShadow = "5px 5px 5px black, -5px 5px 5px black";

    const namedDest = decodeURIComponent(hash.substring(1));
    const explicitDest =
      namedDest in destinations
        ? destinations[namedDest]
        : JSON.parse(namedDest);
    const pageNumber = app.pdfDocument.cachedPageNumber(explicitDest[0]);
    app.pdfDocument.getPage(pageNumber).then(function (page) {
      const tempViewport = page.getViewport({ scale: 1.0 });
      const height = tempViewport.height * 1.2 * app.pdfViewer.currentScale;
      const width = tempViewport.width * 1.2 * app.pdfViewer.currentScale;
      const leftOffset =
        event.clientX > halfWidth ? (2 * width) / 3 : width / 3;
      previewStyle.height = `${height}px`;
      previewStyle.width = `${width}px`;
      previewStyle.left = `${event.clientX - leftOffset - 4}px`;

      let offsetY;
      switch (explicitDest[1].name) {
        case "XYZ":
          offsetY = explicitDest[3];
          break;
        case "FitH":
        case "FitBH":
        case "FitV":
        case "FitBV":
          offsetY = explicitDest[2];
          break;
        default:
          console.log(`Oops, link ${explicitDest[1].name} is not supported.`);
      }

      const scale = 4;
      const viewport = page.getViewport({
        scale: scale,
        offsetY: (offsetY - tempViewport.height + 10) * scale,
      });

      const estBlankPortion = 1 - Math.abs(offsetY - tempViewport.height) / tempViewport.height;
      previewStyle.height = `${height * estBlankPortion}px`;
      preview.height = viewport.height * estBlankPortion;
      preview.width = viewport.width;

      const renderContext = {
        canvasContext: preview.getContext("2d"),
        viewport: viewport,
      };
      page.render(renderContext);
    });

    anchor.prepend(preview);
    app._previewing = true;

    parent.addEventListener("mouseleave", function (event) {
      preview.remove();
      app._previewing = false;
    });
  }
  anchor.addEventListener("mouseover", mouseoverHandler);
  app._previewHandler = mouseoverHandler;
})();

[abinas93]

Hi Ben, thanks a lot for your helpful reply!

The solution for the top issue works great — I can tweak the padding as needed.

For the bottom part, I’m a bit unsure. Does the modified code allow me to control the amount of space below the reference line, similar to how I adjust the top padding? Or is there a specific value I should change?

If it's not possible to get the height of the reference object:

1. Is there a way to specify a fixed space (e.g. 10 or 20 units) below the line containing it?
2. Alternatively, for objects at the end of a page, can we detect the page end and stop the preview there to avoid extra white space?

Thanks again!