CODEWITHSUNDEEP
javascriptnode.jspdfarabicpdfkit
Ronak Patel
Ronak Patel

Reputation: 68

Arabic Text issue with PDFKit plugin

To generate dynamic PDF files, I'm using PDFKit. The generation works fine, but I'm having trouble displaying arabic characters, even after installing an arabic font. Also, Arabic text is generated correctly, but I believe the word order is incorrect.

As an example,

I'm currently using pdfkit: "0.11.0"

Text: مرحبا كيف حالك ( Hello how are you )

Font: Amiri-Regular.ttf

const PDFDocument = require("pdfkit");
var doc = new PDFDocument({
  size: [595.28, 841.89],
  margins: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
});
const customFont = fs.readFileSync(`${_tmp}/pdf/Amiri-Regular.ttf`);
doc.registerFont(`Amiri-Regular`, customFont);
doc.fontSize(15);
doc.font(`Amiri-Regular`).fillColor("black").text("مرحبا كيف حالك");
doc.pipe(fs.createWriteStream(`${_tmp}/pdf/arabic.pdf`));
doc.end();

OUTPUT:

PDF with arabic text

Upvotes: 2

Views: 3311

Answers (4)

Zurghani
Zurghani

Reputation: 1

I would suggest you do one of the following depending on your needs

1 ) if you have a low number of doc.text functions used to generate the document you can add {features: ['rtla']} as second parameter to the function as follows:

doc.text('تحية طيبة وبعد', { features: ['rtla'] });

2 ) if you have many calls to doc.text instead of adding {features: ['rtla']} as a parameter to each call, you can reverse all you text before hand by iterating on your data object and reversing the word order as follows:

let str = "السلام عليكم ورحمة الله وبركاته";

str = str.split(' ').reverse().join(' ');

doc.text(str);

Upvotes: 0

Asman Takilt
Asman Takilt

Reputation: 124

this problem allowed me to go through here, but unfortunately I am not convinced by the answers posted and even add a library to change the direction of the text with pdfkit. after several minutes on the pdfkit guide docs, here is the solution:

doc.text("مرحبا كيف حالك", {features: ['rtla']})

Upvotes: 3

Zaid Al Shattle
Zaid Al Shattle

Reputation: 1534

Answer adapted from the info here:

  1. install the package: npm install twitter_cldr

  2. Run this function to generate the text:

const TwitterCldr = TwitterCldrLoader.load("en");
     
private maybeRtlize(text: string) {
  if (this.isHebrew(text)) {
    var bidiText = TwitterCldr.Bidi.from_string(text, { direction: "RTL" });
    bidiText.reorder_visually();
    return bidiText.toString();
  } else {
    return text;
  }
}
     
Value = maybeRtlize("مرحبا كيف حالك")

doc.font(`Amiri-Regular`).fillColor("black").text(Value);

Another method that's also possible is to reverse the text (using something such as text.split(' ').reverse().join(' ');, however while this will work for simple arabic text, it will start having issues the moment you introduce English-numericals for example. so the first method is recommended.

Upvotes: 1

Molham Al Nasr
Molham Al Nasr

Reputation: 99

You are right the order of the Arabic words are wrong and you habe to set-up the direction of the sentence

try to use this

doc.rtl(true);

or This as a configuration for single line or text

doc.font(`Amiri-Regular`).fillColor("black").text("مرحبا كيف حالك", {rtl: true});

Upvotes: 2

Related Questions