Proper way to create a text element to display over the PDF's text

[arun-mani-j]

Hii, I'm trying to understand how to properly position a span element over the PDF's rendered page, so user can copy the text etc.

This following script demonstrates how I get the "outer box" and font properties of a line block.

import { readFileSync } from "fs";
import * as mupdfjs from "mupdf/mupdfjs";

const data = readFileSync("unicode.pdf");
const doc = mupdfjs.Document.openDocument(data);

const page = doc.loadPage(0);

const structTxt = page.toStructuredText();
const txt = JSON.parse(structTxt.asJSON(1));
for (const block of txt.blocks) {
  for (const line of block.lines) {
    console.log(
      line.text,
      "X",
      line.bbox.x,
      "Y",
      line.y - line.bbox.h,
      "W",
      line.bbox.w,
      "H",
      line.bbox.h,
      "Family",
      line.font.family,
      "Weight",
      line.font.weight,
      "Style",
      line.font.style,
      "Size",
      line.font.size,
    );
  }
}

Then I convert each of these block into a span element. The span is styled like as follows (not actual CSS, just showing how I map the above values to the CSS values):

.page-span {
  position: absolute; // The parent is a div with the position: relative and dimensions of the PDF page
  left: X;
  top: Y;
  width: W;
  height: H;
  color: red; // For debug purpose
  line-height: Size;
  font-size: Size;
  font-family: Family;
  font-weight: Weight;
  font-style: Style;
  white-space: pre;
}

It works fine, but I found that for some lines, the span element is larger than the PDF's text. For example, see the below picture for "This HOWTO discusses Python's..." line. I have shifted the Y coordinate a little above to make it easy to read. (The CSS is visible on right).

Here font-size is 9px (as returned by MuPDF). However if I use a value like 8.4px, then it fits properly.

I'm not able to understand what I'm doing wrong and why the span element's text is bigger than the PDF's text. Any help to understand it is highly appreciated.

The book used for reference is Python's HOWTO Unicode - https://docs.python.org/3/howto/unicode.html#unicode-howto (Can be downloaded as PDF from here https://docs.python.org/3/download.html).

A sample output of the script to get the text properties on the book (showing only last few elements):

Release X 96 Y 605 W 31 H 9 Family serif Weight bold Style normal Size 9
1.12 X 118 Y 617 W 17 H 9 Family serif Weight normal Style normal Size 9
This HOWTO discusses Python’s support for the Unicode specification for representing textual data, and explains X 72 Y 635 W 451 H 9 Family serif Weight normal Style normal Size 9
various problems that people commonly encounter when trying to work with Unicode. X 72 Y 647 W 336 H 9 Family serif Weight normal Style normal Size 9
1 Introduction to Unicode X 72 Y 675 W 175 H 14 Family serif Weight bold Style normal Size 14
1.1 Definitions X 72 Y 705 W 82 H 11 Family serif Weight bold Style normal Size 11
Today’s programs need to be able to handle a wide variety of characters. Applications are often internationalized to X 72 Y 725 W 451 H 9 Family serif Weight normal Style normal Size 9
display messages and output in a variety of user-selectable languages; the same program might need to output an error X 72 Y 737 W 451 H 9 Family serif Weight normal Style normal Size 9
message in English, French, Japanese, Hebrew, or Russian. Web content can be written in any of these languages X 72 Y 749 W 451 H 9 Family serif Weight normal Style normal Size 9
1 X 294 Y 790 W 5 H 9 Family serif Weight bold Style normal Size 9

Tl;dr: How to properly position a span element over a PDF page such that it properly fits the text underneath. 😅

Thanks!