Update canvas-renderer.ts to fix Vertical alignment issues with text #2938
Conversation
Fixes vertical alignment of text within divs
haztheo
changed the title
| } else { | ||
| const letters = segmentGraphemes(text.text); | ||
| letters.reduce((left, letter) => { | ||
| this.ctx.fillText(letter, left, text.bounds.top + baseline); | ||
|
|
||
| this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + text.bounds.height - baseline); |
There was a problem hiding this comment.
I am just testing this out on my current project. Should the first 2 parameters here not stay as letter and left?
|
Can we merge it? |
|
Hey, this was approved for close to a year now? Can we merge it? |
|
Can be tested in |
|
I tried this out and for me the text got justified too much. Latest release: With this patch: This patch, but after applying this suggestion https://github.com/niklasvh/html2canvas/pull/2938/files#r972962898 |
|
I have done a little more research into this, and it seems that the calculation is using the incorrect parameters. The |
|
Ah, damn. @acurrieclark do you mind pushing your fix to this project too: https://github.com/cantoo-scribe/html2canvas ? This one seems a bit abandoned and I tried to merge the most promising PRs inside it |
|
@Sharcoux in case you didn't see, I raised this as an issue on your fork. There are a couple of possible solutions to the problem. I have found one which fixes things on my end, but it may not be the most general solution. |
Bug 1 Fixes vertical alignment of text within divs - issue shown here: Text vertical alignment is off #2937
Now the fillText usage logically makes sense
Tested across Chrome, Firefox, Safari
Before:
After:
