html() method: Bold text (<strong>) renders vertically offset causing text overlap in multi-page documents

[SK-Aqib-Innovatech]

Description

When using the html() method to convert HTML content containing <strong> tags to PDF, bold text renders with a vertical offset (positioned lower than normal text), causing it to overlap with subsequent lines. This issue only occurs in multi-page documents and the offset appears to accumulate progressively across pages.

Environment

• jsPDF version: 2.5.2
• jspdf-autotable version: 3.8.4
• Framework: Angular/TypeScript
• Custom fonts: Montserrat (Regular, Bold, Italic, BoldItalic)
• Document size: 8 pages
• Affected pages: Pages 1-6+ (worsens with page count)

Expected Behavior

Bold text from <strong> tags should align on the same baseline as normal text without vertical offset or overlap.

Actual Behavior

• Bold text renders vertically lower than normal text
• Bold text overlaps with the line below it
• The offset increases progressively across multiple pages
• Adding more content increases the offset magnitude
• Issue does not occur on single-page documents

Reproduction Steps

import jsPDF from 'jspdf';

 public static async generateBlobFromHTML(
    htmlContent: HTMLElement,
  ): Promise<Blob> {
    // Create a new jsPDF instance
    let doc = new jsPDF();

    // Add the Montserrat font to jsPDF
    doc = PdfUtility.addMontserratFont(doc);

    await document.fonts.ready;
    // Convert HTML to PDF and then to a Blob
    return new Promise((resolve) => {
      doc.html(htmlContent.innerHTML, {
        callback: (doc) => {
          const totalPages = doc.getNumberOfPages();

          for (let i = 1; i <= totalPages; i++) {
            doc.setPage(i);
            doc.setFontSize(10);
            doc.text(
              `${i}/${totalPages}`,
              doc.internal.pageSize.getWidth() - 10,
              doc.internal.pageSize.getHeight() - 10,
              { align: "right" },
            );
          }
          const blob = doc.output("blob");
          resolve(new Blob([blob], { type: "application/pdf" }));
        },
        autoPaging: "text",
        margin: 15,
        //180 as page is 200 in total. So 200 - 15 (margin) - 5(for adjusting single character in the end of paragraph), to make it break correctly.
        width: 180,
        //800, as it scales the size of the text correctly
        windowWidth: 800,
      });
    });
  }

  private static addMontserratFont(doc: jsPDF): jsPDF {
    doc.addFileToVFS("Montserrat-Regular-normal.ttf", MontserratReuglar);
    doc.addFont("Montserrat-Regular-normal.ttf", "Montserrat", "normal");
    doc.addFileToVFS("Montserrat-Bold.ttf", MontserratBold);
    doc.addFont("Montserrat-Bold.ttf", "Montserrat", "bold");
    doc.addFileToVFS("Montserrat-Italic.ttf", MontserratItallic);
    doc.addFont("Montserrat-Italic.ttf", "Montserrat", "italic");
    doc.addFileToVFS(
      "Montserrat-BoldItalic-bolditalic.ttf",
      MontserratBoldItallic,
    );
    doc.addFont(
      "Montserrat-BoldItalic-bolditalic.ttf",
      "Montserrat",
      "bolditalic",
    );
    doc.setFont("Montserrat");
    return doc;
  }

HTML Content Sample:

<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</strong> Nullam vel nisi. Etiam semper ipsum ut lectus...</p>
<p>More paragraphs with mixed bold and normal text...</p>
<!-- Content that spans 8+ pages -->

Visual Evidence

See attached screenshot showing bold text overlapping with normal text below it.

Additional Context

• Issue only manifests with multi-page documents (8 pages in my case)
• Offset accumulates across pages (worse on later pages)

[bunny8469]

Hi @SK-Aqib-Innovatech, I'm interested in taking this up. Please let me know if you're already working on it

[SK-Aqib-Innovatech]

Hi @SK-Aqib-Innovatech, I'm interested in taking this up. Please let me know if you're already working on it

Hey @bunny8469 👋
Yes, I’ve been working on it, but haven’t found any leads so far. If you’re interested, feel free to take it up — and if I find anything useful, I’ll definitely let you know. 🙌

[SK-Aqib-Innovatech]

Hi @bunny8469 👋
I noticed that this issue occurs when I add the autoPaging text.

[bunny8469]

Yes @SK-Aqib-Innovatech, I have noticed that. The offsetting issue is because of the "text" autopaging. Additionally, I have also observed that this occurs not only for "bold/strong", but any inline tag <b> or <strong>, <i> or <em>, <u>, <span>.

However, this issue does not occur when the bold / italic has been set through CSS styles (inline / normal). And like @SK-Aqib-Innovatech has mentioned, this is only happening in case of multi-pages, due to autopaging.

So, following the trail of "autopaging", I have reviewed the files html.js and context2d.js which were relevant to our context.

Then, I found a function putText in context2d.js which is responsible for painting our text in html to pdf.

            var baseLineRectOnPage = pathPositionRedo(
              [JSON.parse(JSON.stringify(baselineRect))],
              this.posX + this.margin[3],
              -previousPageHeightSum +
                topMargin +
                this.ctx.prevPageLastElemOffset      // <--- the offset in question
            )[0];

This part of code in putText is what governs position of the text.

So, playing with that offset around, I felt that this specific offset (this.ctx.prevPageLastElemOffset) is what might be causing the issue we're facing. I tried removing this offset from the equation.

            var baseLineRectOnPage = pathPositionRedo(
              [JSON.parse(JSON.stringify(baselineRect))],
              this.posX + this.margin[3],
              -previousPageHeightSum +
                topMargin +
                0      // <--- replaced with zero
            )[0];

After changing this, I rebuilt jsPDF, and tried again, then it worked. Visually, it is same as the html, the offset is gone, and for this specific example, the pdf generated was correct.

(I know it doesn't make sense to remove the offset out of nowhere, but it worked)

But IT DID NOT PASS THE UNIT TEST

How I reproduced:

I created a test.html file with the following code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsPDF Bold Offset Test (Local Build)</title>
    <!-- Use local jsPDF -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="./dist/jspdf.umd.min.js"></script>
  </head>
  <body>
    <div id="content" style="width: 600px;">
      <h2>Bold Text Offset Test</h2>
      <div>
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </span>
        Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.
      </div>
      <div id="repeat"></div>
    </div>

    <button id="generate">Generate PDF</button>

    <script>
      const { jsPDF } = window.jspdf;

      // Create multi-page content
      const paragraph = document.querySelector("#content div").outerHTML;
      const repeatDiv = document.getElementById("repeat");
      for (let i = 0; i < 100; i++) repeatDiv.innerHTML += paragraph;

      document.getElementById("generate").onclick = async () => {
        const doc = new jsPDF();

        await document.fonts?.ready;

        doc.html(document.getElementById("content"), {
          callback: function (doc) {
            doc.save("bold-offset-test.pdf");
          },
          margin: 15,
          width: 180,
          windowWidth: 800,
          autoPaging: "text",
        });
      };
    </script>
  </body>
</html>

This did not solve the problem completely, just my observations.

Summing Up, my findings are as follows:

1. This occurs not only for <strong>, but for all inline tags in HTML.
2. Doesn't occur if the font style is set through CSS
3. So, if we were to fix it, context2d.js > putText (function) > this.ctx.prevPageLastElemOffset is one place that we should look into, since this is causing the additional offset to the additional elements.

P.S. I'm new to contributing for big projects, feel free to point out any mistakes I've done or the approach I took.

[SK-Aqib-Innovatech]

Yes @SK-Aqib-Innovatech, I have noticed that. The offsetting issue is because of the "text" autopaging. Additionally, I have also observed that this occurs not only for "bold/strong", but any inline tag <b> or \<strong\>, <i> or \<em\>, <u>, <span>.

However, this issue does not occur when the bold / italic has been set through CSS styles (inline / normal). And like @SK-Aqib-Innovatech has mentioned, this is only happening in case of multi-pages, due to autopaging.

So, following the trail of "autopaging", I have reviewed the files html.js and context2d.js which were relevant to our context.

Then, I found a function putText in context2d.js which is responsible for painting our text in html to pdf.

        var baseLineRectOnPage = pathPositionRedo(
          [JSON.parse(JSON.stringify(baselineRect))],
          this.posX + this.margin[3],
          -previousPageHeightSum +
            topMargin +
            this.ctx.prevPageLastElemOffset      // <--- the offset in question
        )[0];

This part of code in putText is what governs position of the text.

So, playing with that offset around, I felt that this specific offset (this.ctx.prevPageLastElemOffset) is what might be causing the issue we're facing. I tried removing this offset from the equation.

        var baseLineRectOnPage = pathPositionRedo(
          [JSON.parse(JSON.stringify(baselineRect))],
          this.posX + this.margin[3],
          -previousPageHeightSum +
            topMargin +
            0      // <--- replaced with zero
        )[0];

After changing this, I rebuilt jsPDF, and tried again, then it worked. Visually, it is same as the html, the offset is gone, and for this specific example, the pdf generated was correct.

(I know it doesn't make sense to remove the offset out of nowhere, but it worked)

But IT DID NOT PASS THE UNIT TEST

### How I reproduced: I created a `test.html` file with the following code. <title>jsPDF Bold Offset Test (Local Build)</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> <script src="./dist/jspdf.umd.min.js"></script>

Bold Text Offset Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.Nullam vel nisi. Etiam semper ipsum ut lectus, ut aliquam nisl fringilla non.

<button id="generate">Generate PDF</button>

<script>
  const { jsPDF } = window.jspdf;

  // Create multi-page content
  const paragraph = document.querySelector("#content div").outerHTML;
  const repeatDiv = document.getElementById("repeat");
  for (let i = 0; i < 100; i++) repeatDiv.innerHTML += paragraph;

  document.getElementById("generate").onclick = async () => {
    const doc = new jsPDF();

    await document.fonts?.ready;

    doc.html(document.getElementById("content"), {
      callback: function (doc) {
        doc.save("bold-offset-test.pdf");
      },
      margin: 15,
      width: 180,
      windowWidth: 800,
      autoPaging: "text",
    });
  };
</script>

This did not solve the problem completely, just my observations.

Summing Up, my findings are as follows:

1. This occurs not only for <strong>, but for all inline tags in HTML.
2. Doesn't occur if the font style is set through CSS
3. So, if we were to fix it, context2d.js > putText (function) > this.ctx.prevPageLastElemOffset is one place that we should look into, since this is causing the additional offset to the additional elements.

P.S. I'm new to contributing for big projects, feel free to point out any mistakes I've done or the approach I took.

Hi @bunny8469 👋,
I’m also quite new to contributing to projects 😅.

I think we’ve already identified the root cause, but replacing it with 0 might not be the best way to handle it 🤔. From what I’ve observed (not sure if you noticed this too), the last page and the last paragraph seem to work fine.

I guess that this.ctx.prePageLastElemOffset is somehow reflecting the offset of the last paragraph on each page. So, we might need to fix it by ensuring that each page has its own specific offset, rather than using the one from the last page 🔧✨

[tswood]

Experiencing this issue as well and testing some additional cases with the temporarily fix, I noticed that it does address the text being offset but drawn elements such as borders around the element suffer from the same offset issue:

Modifying the Context2D.prototype.drawImage to force the offset to zero as the other workaround like so seems to address the problem, but can assume this will lead to other issues.