Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

autoPaging: 'text' messes up lineheights #3403

Open
valueerrorx opened this issue Apr 6, 2022 · 8 comments
Open

autoPaging: 'text' messes up lineheights #3403

valueerrorx opened this issue Apr 6, 2022 · 8 comments

Comments

@valueerrorx
Copy link

"I have read and understood the contribution guidelines.".

HTML

<h2>Hi there,</h2><p>this is a <em>basic</em> example of <strong>tiptap</strong>. <br>Next up: A bullet list:</p><ul><li><p>Free Open Source Software</p></li><li><p>Plattform independent</p></li></ul><p>Let’s try a code block:</p><pre><code class="language-css">
body {
    background-color: rgba(200,200,24,1);
}
</code></pre><p>1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt </p>

JSPDF

doc.html(editorcontent, {
          callback: (doc) => {     },
          x: 0,
          y: 0,
          margin: [20,20,20,20],
          width :400,
          windowWidth:420,
          autoPaging: 'text',  //text, slice, false
});

As you can see in the following screenshots the < em > and the < strong > tags as well as < code >< pre > tag are messed up somehow.

autoPaging: slice 👍
Screenshot_20220406_211512
autoPaging: text 👎
Screenshot_20220406_211605

i am using
"jspdf": 2.5.1
"node": 16.13.2

@PLP-Casey
Copy link

look at using the html2pdf library instead of jspdf. autopaging works with it

@valueerrorx
Copy link
Author

thx for the tipp but htm2pdf uses html2canvas and creates an image embedded in the pdf.. so i get 400k files instead of 4k files and you can not select the text.. or did i miss an option to create a real "text - pdf"

@PLP-Casey
Copy link

try not setting the bottom margin. i noticed having autopaging set to text and margin bottom 0, it would work sometimes

@valueerrorx
Copy link
Author

valueerrorx commented Apr 7, 2022

unfortunately this doesn't help.. i've been doing 2 hours of trial and error and played with all settings i could find.

BUT i was finally able to find something that at least points into the right direction

it's the amount of pages !???

the more pages the final pdf is going to have the bigger is the top margin (or line-height) for < em > or < strong >
oh.. and it has nothing to do with < em > .. every html tag is sufficient to produce the error.. for examle < span >

the attached txt file contains example code that produces the effect.. if you remove one of the lines with the dummy text the unwanted offset will get smaller .. if you remove all 3 of them and therefore reduce the final pdf to one single page the effect is gone.

example.txt

@HackbrettXXX
Copy link
Collaborator

Thanks for the bug report. A pull request would be very welcome.

@whitesunset
Copy link

Hello, is there any fix for this?

@primus11
Copy link

#3718

This isn't really solving the original problem but it does help. It might be better to update html2canvas and add option to reorder elements based on their vertical position. I am not sure however if that is possible and what other problems that might cause.

@exp625
Copy link

exp625 commented Apr 21, 2024

Hi, facing the same issue as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants