Fix text height rendering for PDF generation

[steffancarrington]

• Font position adjustment logic added to the UI to ensure it displays in the same places as the generated PDF
• Custom heightOfFontAtSize() method added to correctly render text in generated PDFs.

Before

Screen.Recording.2023-07-17.at.12.32.30.mov

After

Screen.Recording.2023-07-17.at.12.28.57.mov

[hand-dot]

Just minor fix, other than this, Looks good.

[hand-dot]

I'll check this PR behavior on the playground from now.
after check, I'll comment.

[hand-dot]

Hey @steffancarrington
Did you try npm run build on play-ground?

I got some errors on the production build.

[steffancarrington]

Hey @hand-dot ,

Thanks for reviewing, will look at addressing this feedback today 👍

[hand-dot]

Hey @steffancarrington ,
Thanks!

[hand-dot]

@steffancarrington @jbarton123
Could you please explain what exactly the point of issue in the pdfme/pdf-lib library when calculating the heightOfFontAtSize()

[hand-dot]

I found another problem.
once click text type schema, the text position slightly shifts down from the initial text position.

CleanShot.2023-07-18.at.22.25.19.mp4

[steffancarrington]

@steffancarrington @jbarton123 Could you please explain what exactly the point of issue in the pdfme/pdf-lib library when calculating the heightOfFontAtSize()

Hey @hand-dot ,

The update that was made to the heightOfFontAtSize() in the helper was to account for the descent value * the font scale, as this wasn't being considered in the pdf-lib version of the method.

The change that was introduced was the following (to ensure that we were always taking into account the descender value of the text):

Before
height -= Math.abs(descent) || 0;

After
height -= Math.abs(descent * scale) || 0;

[peteward]

Hi @hand-dot,
We did some visual tests with this updated code.
The vertical position of fonts is much better, although not perfect, especially at smaller font sizes.
I don't think there's anything we can do to improve it further though due to the difference in browser font rendering.
Testing Artwork Builder pdfme fonts.pdf