Hopding / pdf-lib

Create and modify PDF documents in any JavaScript environment
https://pdf-lib.js.org
MIT License
6.6k stars 635 forks source link

bad line height on the text of the form element #1581

Open mbohovic opened 6 months ago

mbohovic commented 6 months ago

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

Additional Notes

No response

Michalev-Kevin-m2labo commented 5 months ago

+1