pdf-lib icon indicating copy to clipboard operation
pdf-lib copied to clipboard

bad line height on the text of the form element

Open mbohovic opened this issue 2 years ago • 1 comments

What were you trying to do?

I want to display a PDF with form fields. If I enter a text with diacritics in such a field, e.g. "Čšť", the pdf will fall into an error

Error: WinAnsi cannot encode "č" (0x010d)
    at Encoding.encodeUnicodeCodePoint (Encoding.js:18:1)
    at StandardFontEmbedder.encodeTextAsGlyphs (StandardFontEmbedder.js:85:1)
    at StandardFontEmbedder.encodeText (StandardFontEmbedder.js:25:1)
    at PDFFont.encodeText (PDFFont.js:35:1)
    at splitOutLines (layout.js:73:1)
    at layoutMultilineText (layout.js:107:1)
    at defaultTextFieldAppearanceProvider (appearances.js:237:41)
    at PDFTextField.updateWidgetAppearance (PDFTextField.js:717:46)
    at PDFTextField.updateAppearances (PDFTextField.js:711:1)
    at PDFTextField.defaultUpdateAppearances (PDFTextField.js:687:1)
Encoding.encodeUnicodeCodePoint @ Encoding.js:18
StandardFontEmbedder.encodeTextAsGlyphs @ StandardFontEmbedder.js:85
StandardFontEmbedder.encodeText @ StandardFontEmbedder.js:25
PDFFont.encodeText @ PDFFont.js:35
splitOutLines @ layout.js:73
layoutMultilineText @ layout.js:107
defaultTextFieldAppearanceProvider @ appearances.js:237
PDFTextField.updateWidgetAppearance @ PDFTextField.js:717
PDFTextField.updateAppearances @ PDFTextField.js:711
PDFTextField.defaultUpdateAppearances @ PDFTextField.js:687
PDFForm.updateFieldAppearances @ PDFForm.js:540

GOOD line height Screenshot 2024-01-03 at 09 59 54 WRONG line height Screenshot 2024-01-03 at 09 59 17

How did you attempt to do it?

that's why I tried to use another font that supports diacritics. I created function setFormFont OpenSans it ia completely standard font.

const loadFileFromUrl = async url => {
  return fetch(url).then(res => res.arrayBuffer())
}

const doc = await PDFDocument.load(data)

const setFormFont = async doc => {
  doc.registerFontkit(fontkit)
  const form = doc.getForm()
  const fontBytes = await loadFileFromUrl(OpenSansFont)
  const font = await doc.embedFont(fontBytes)
  const rawUpdateFieldAppearances = form.updateFieldAppearances.bind(form)
  form.updateFieldAppearances = function () {
    return rawUpdateFieldAppearances(font)
  }
}

after applying it, however, the text in the multiline field is displayed in PDF with large line spacing, and the text itself goes beyond the edge of the field

What actually happened?

text in a multiline field has large line spacing

What did you expect to happen?

the text in the multiline field should be displayed with the diacritics font as with the font that is natively used in pdf-lib

How can we reproduce the issue?

in the description

Version

pdf-lib: 1.17.1 and @pdf-lib/fontkit: 1.1.1

What environment are you running pdf-lib in?

Browser, Node

Checklist

  • [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
  • [X] I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

No response

mbohovic avatar Jan 03 '24 09:01 mbohovic

+1

Michalev-Kevin-m2labo avatar Feb 22 '24 07:02 Michalev-Kevin-m2labo