fix issues with conflicting styles causing baseline for fonts to be wrong.

[mikey0000]

Summary

When css targeting body, spans and images exist it can cause the baseline to be calculated incorrectly.

for example display: flex on body will cause it to miscalculate the baseline.

This PR fixes/implements the following bugs/features

• [x] Text alignment issues with miscalculated baseline

Explain the motivation for making this change. What existing problem does the pull request solve?

When css properties on body change the offset for the container for calculating the baseline, the baseline is wrong and results in text that is not aligned correctly.

Test plan (required)

Set body css to flex, can also target span and img but its not necessary. I've added this in the reftests in text and its kind of reflected in my change.

This PR might fix the text alignment issue #1888 but I haven't checked that specific issue.

closing remarks are the styles could use !important but since they are inline I doubt that matters.

Before:

After:

[niklasvh]

Do you have an example repro for this issue?

[kewp]

This worked for me! Thank you so much

[mikey0000]

Do you have an example repro for this issue?

Sorry no but I can try and gather one together, all it should require is setting the styles I changed on a page to something else.

[arnaudambro]

Hi! 👋

Thanks @mikey0000 for this PR.

As it's not merged and it seems it's not going to be, today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/html2canvas/dist/html2canvas.js b/node_modules/html2canvas/dist/html2canvas.js
index 84cb30d..8f2c75f 100644
--- a/node_modules/html2canvas/dist/html2canvas.js
+++ b/node_modules/html2canvas/dist/html2canvas.js
@@ -6572,6 +6572,8 @@
             container.style.margin = '0';
             container.style.padding = '0';
             container.style.whiteSpace = 'nowrap';
+            container.style.position = 'absolute';
+            container.style.top = '-1000px';
             body.appendChild(container);
             img.src = SMALL_IMAGE;
             img.width = 1;
@@ -6579,10 +6581,13 @@
             img.style.margin = '0';
             img.style.padding = '0';
             img.style.verticalAlign = 'baseline';
+            img.style.display = 'inline-block';
             span.style.fontFamily = fontFamily;
             span.style.fontSize = fontSize;
             span.style.margin = '0';
             span.style.padding = '0';
+            span.style.lineHeight = 'normal';
+            span.style.height = 'auto';
             span.appendChild(this._document.createTextNode(SAMPLE_TEXT));
             container.appendChild(span);
             container.appendChild(img);

This issue body was partially generated by patch-package.