Text Misalignment for Arabic in PDF Editor Using pdf-lib

[Shaheer388]

I'm using Fabric.js on the frontend for a PDF editor, and pdf-lib to apply fields to the PDF for later retrieval. Everything works fine with English text. However, when using Arabic text, it shifts downward from its intended position and appears cropped.
I tried vertical alignment, but only horizontal alignment works when using field.setAlignment(TextAlignment.Center). I need the Arabic text to be fully visible and not cropped.
Any suggestions would be greatly appreciated. Thanks in advance!

With Fabric.js:

With pdf-lib:

Code:

export class PdfTemplateTextField extends TextField implements PdfTemplateFieldV2 {
    async draw(fonts: PDFFont[], fallbackFont: PDFFont, page: PDFPage, form: PDFForm): Promise<void> {
        console.log("this:", this.formatting);
        let font = getFont(fonts, this.formatting);
        try {
            if (this.type === FieldTypeV2.Text) {
                font.encodeText(this.defaultValue);
            }
        } catch (e) {
            font = fallbackFont;
        }
        const field = form.createTextField(this.id);
        if (this.required) {
            field.enableRequired();
        }
        if (this.type === FieldTypeV2.Text) {
            field.setText(this.defaultValue);
        }
        field.addToPage(page, {
            x: this.position.x,
            y: page.getHeight() - this.size.height - this.position.y,
            font: font,
            width: this.size.width,
            height: this.size.height,
            backgroundColor: undefined,
            textColor: this.formatting.rgbColor(),
            borderColor: { type: ColorTypes.RGB, red: 1, green: 1, blue: 1 },
        })
        field.setFontSize(this.formatting.fontSize);
        field.setAlignment(TextAlignment.Center); // Center align the text vertically
    }
}


PDFTextField.prototype.addToPage = function (page, options) {
        var _a, _b, _c, _d, _e, _f, _g;
        utils_1.assertIs(page, 'page', [[PDFPage_1.default, 'PDFPage']]);
        PDFField_1.assertFieldAppearanceOptions(options);
        if (!options)
            options = {};
        if (!('textColor' in options))
            options.textColor = colors_1.rgb(0, 0, 0);
        if (!('backgroundColor' in options))
            options.backgroundColor = colors_1.rgb(1, 1, 1);
        if (!('borderColor' in options))
            options.borderColor = colors_1.rgb(0, 0, 0);
        if (!('borderWidth' in options))
            options.borderWidth = 1;
        // Create a widget for this text field
        var widget = this.createWidget({
            x: (_a = options.x) !== null && _a !== void 0 ? _a : 0,
            y: (_b = options.y) !== null && _b !== void 0 ? _b : 0,
            width: ((_c = options.width) !== null && _c !== void 0 ? _c : 200),
            height: (_d = options.height) !== null && _d !== void 0 ? _d : 50,
            textColor: options.textColor,
            backgroundColor: options.backgroundColor,
            borderColor: options.borderColor,
            borderWidth: (_e = options.borderWidth) !== null && _e !== void 0 ? _e : 0,
            rotate: (_f = options.rotate) !== null && _f !== void 0 ? _f : rotations_1.degrees(0),
            hidden: options.hidden,
            page: page.ref,
        });
        var widgetRef = this.doc.context.register(widget.dict);
        // Add widget to this field
        this.acroField.addWidget(widgetRef);
        // Set appearance streams for widget
        var font = (_g = options.font) !== null && _g !== void 0 ? _g : this.doc.getForm().getDefaultFont();
        this.updateWidgetAppearance(widget, font);
        // Add widget to the given page
        page.node.addAnnot(widgetRef);
    };