Arabic letters not connected after converted from HTML to PDF

Asked Jun 19 '22 at 13:13

Active Jun 19 '22 at 13:13

Viewed 534 times

I am working on a project to transform Arabic articles text to bionic reading text, something like this website: Bionic Reading

I run user input through this function to generate the transformed text

const transform = (text) => {
let bionicText = '';
let arr = text.split(" ")
for (let i = 0; i < arr.length; i++) {
    let len = Math.ceil(arr[i].length/2)
    bionicText += arr[i].slice(0, len).bold() + arr[i].slice(len) + " ";
}
return bionicText; 
}

I use html-pdf to convert the generated HTML to a PDF file. The function takes an HTML template containing the transformed text as an argument.

import pdf from 'html-pdf';
const options = { format: 'Letter', border: {top: ".5in"}, type: "pdf" };

const generatePdf = (template) => {
    pdf.create(template, options).toFile('./generated-bionic.pdf', function(err, res) {
        if (err) return console.log(err);
        console.log(res);
   });
}

The problem is, the generated PDF file seperates the arabic letters, although it renders fine as a part of the HTML file.