From ee4ca018d8436d16f3657d439abab20a87ba9f01 Mon Sep 17 00:00:00 2001 From: Mythie Date: Thu, 6 Apr 2023 23:16:20 +1000 Subject: [PATCH] fix: improve text insertion accuracy Previous inserted text would appear a little off center from where the user had selected which could cause some frustration. We improve upon this by updating the code responsible for centering the text to behave in a more accurate manner. From what I can tell it looks to be quite solid but could do with more rigorous testing with shorter and longer inputs. You can see the improved accuracy in action here: https://www.loom.com/share/1095fee7605c4790b8b30f573a04f0f0 --- packages/pdf/insertTextInPDF.ts | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/pdf/insertTextInPDF.ts b/packages/pdf/insertTextInPDF.ts index 83487e94b..b24a920c5 100644 --- a/packages/pdf/insertTextInPDF.ts +++ b/packages/pdf/insertTextInPDF.ts @@ -12,27 +12,36 @@ export async function insertTextInPDF( ): Promise { const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf"); - const existingPdfBytes = pdfAsBase64; + const pdfDoc = await PDFDocument.load(pdfAsBase64); - const pdfDoc = await PDFDocument.load(existingPdfBytes); pdfDoc.registerFontkit(fontkit); - const customFont = await pdfDoc.embedFont(fontBytes); - const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica); + + const font = await pdfDoc.embedFont(useHandwritingFont ? fontBytes : StandardFonts.Helvetica); const pages = pdfDoc.getPages(); const pdfPage = pages[page]; + const textSize = useHandwritingFont ? 50 : 15; - const textWidth = customFont.widthOfTextAtSize(text, textSize); - const textHeight = customFont.heightAtSize(textSize); + const textWidth = font.widthOfTextAtSize(text, textSize); + const textHeight = font.heightAtSize(textSize); const fieldSize = { width: 192, height: 64 }; - const invertedYPosition = pdfPage.getHeight() - positionY - fieldSize.height; + + // Because pdf-lib use a bottom-left coordinate system, we need to invert the y position + // we then center the text in the middle by adding half the height of the text + // plus the height of the field and divide the result by 2 + const invertedYPosition = + pdfPage.getHeight() - positionY - (fieldSize.height + textHeight / 2) / 2; + + // We center the text by adding the width of the field, subtracting the width of the text + // and dividing the result by 2 + const centeredXPosition = positionX + (fieldSize.width - textWidth) / 2; pdfPage.drawText(text, { - x: positionX, + x: centeredXPosition, y: invertedYPosition, size: textSize, - font: useHandwritingFont ? customFont : helveticaFont, color: rgb(0, 0, 0), + font, }); const pdfAsUint8Array = await pdfDoc.save();