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

https://github.com/pdfme/pdfme/assets/45564901/31bf079c-d667-4c62-afe6-381667e7ccd2

After

https://github.com/pdfme/pdfme/assets/45564901/b68da68b-34f0-40e1-88b7-f2a31aec9e81

[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.

https://github.com/pdfme/pdfme/assets/24843808/5412874a-ce3a-4674-a1bd-a56b91c54db1

[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