question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PDFFont.heightAtSize returns full height without a way to get y offset

See original GitHub issue

I am using some custom handwriting styled fonts (like https://fonts.google.com/specimen/Alex+Brush) to implement my own electronic signatures. These fonts have some pretty crazy tails on some letters. pdf-lib draws text from the baseline, above these tails. PDFFont.heightAtSize returns the height above and below the baseline, which on standard fonts the extra height is negligible but these handwriting fonts can add substantial amounts.

I am styling a pdf-fillable app using css which places text from the top-left corner and I am trying to get that html view to match up with the generated pdf view. In order to do that I have to calculate the height of the font and subtract it from the x/y position I placed in html to draw correctly in pdf-lib. Using the height from heightAtSize can overshoot the signature line up to 10 pixels depending on the font.

Is there a way to obtain the font’s baseline offset or be able to draw text starting from the top left?

Screen Shot 2020-04-13 at 4 58 14 PM

(The red box is the font height drawn at the same coordinates as the text. The green box uses the font size which is more accurate but still taller than the actual text from the baseline.)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jarommadsencommented, May 2, 2020

Thanks @hopding, I appreciated the insight. Haven’t had time to investigate further but the 3/4 workaround has been good enough to get by.

0reactions
Hopdingcommented, May 2, 2020

I’m going to close this issue for now. Please feel free to reopen if you’d like to discuss this further.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Get the font height of a character in PDFBox - Stack Overflow
c - The character code to get the width for. offset - The offset into the array. length; The length of the data....
Read more >
PDFFont - PDF-LIB
sizeAtHeight. The height to be used for this calculation. The font size at which this font is the given height.
Read more >
How to Tame Line Height in CSS
When a browser encounters the line-height property, what it actually does is take the line of text and place it in the middle...
Read more >
font-size-adjust - CSS: Cascading Style Sheets | MDN
The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of ...
Read more >
Line height behavior – Figma Help Center
We changed how we calculate and display Line height in April, 2019. ... supported on your operating system without the Figma font installer,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found