jspdf justify arabic text

[saadss1990]

I have an issue with justifying Arabic I add algin "right" it work with me but there is small issue the last line not fit with paragraph
@arasabbasi

[saadss1990]

[Uzlopak]

Justifying utf8 text is not possible.

Please provide complete code you wrote to generate the pdf and the generated file.

[saadss1990]

I solved it manually by edit of jspdf.js

if (align === "right") { //The passed in x coordinate defines the //rightmost point of the text. left = x - maxLineLength; x -= lineWidths[0]; text = []; for (var i = 0, len = da.length; i < len; i++) { delta = maxLineLength - lineWidths[i]; if (i === 0) { newX = x *k; newY = (pageHeight - y)*k; } else { newX = (prevWidth - lineWidths[i]) * k; newY = -leading; } //this is my code if(i === len-1){ text.push([da[i], newX-21, newY]); prevWidth = lineWidths[i]; }else{ text.push([da[i], newX, newY]); prevWidth = lineWidths[i]; } //end } }

[saadss1990]

if (align === "right") { //The passed in x coordinate defines the //rightmost point of the text. left = x - maxLineLength; x -= lineWidths[0]; text = []; for (var i = 0, len = da.length; i < len; i++) { delta = maxLineLength - lineWidths[i]; if (i === 0) { newX = x *k; newY = (pageHeight - y)*k; } else { newX = (prevWidth - lineWidths[i]) * k; newY = -leading; } //this is my code if(i === len-1){ text.push([da[i], newX-21, newY]); prevWidth = lineWidths[i]; }else{ text.push([da[i], newX, newY]); prevWidth = lineWidths[i]; } //end } }

[Uzlopak]

you manually wrote -21 to newX?

[saadss1990]

yes if that allowed :)

[saadss1990]

issue not solved yet return the same problem if I changed a length of string
@arasabbasi

[Uzlopak]

I wrote already what I need:
Your code and the generated pdf. Unless I have that I can not provide you with a solution.

[saadss1990]

PR :
var doc = new jsPDF();
doc.addImage(imgData, 'PNG', 0, 0, 214, 295)
doc.addFileToVFS("NafeesNastaleeq.ttf", NafeesNastaleeq );
doc.addFont('NafeesNastaleeq.ttf', 'NafeesNastaleeq ', 'normal', 'Identity-H');

doc.setFont('NafeesNastaleeq '); // set font
doc.text(text, 220, 205, {maxWidth: 250, align: "right",lang: 'ar'})

[saadss1990]

@arasabbasi

[Abdullah-FAl]

Hello @arasabbasi I tried to add arabic To my page
Like the following =>

doc.setLanguage('ar-SA')
form this => file
https://github.com/MrRio/jsPDF/blob/master/plugins/setlanguage.js
/**
* Add Language Tag to PDF
*
* @returns {jsPDF}
* @name setLanguage
* @example
* var doc = new jsPDF()
* doc.text(10, 10, 'This is a test')
* doc.setLanguage("en-US")
* doc.save('english.pdf')

Language 'ar-SA' form this => file

https://github.com/MrRio/jsPDF/blob/master/plugins/arabic.js

---

I use angular 5 framework + typescript

this is my code >>>

Result after save >>

Please help me to
Add Arabic language to my pdf page

Thank you keep up the good work

[Uzlopak]

I started debugging ....

[Abdullah-FAl]

When I add setLanguage("en-US")
This error appears this.doc.setLanguage is not a function

[Uzlopak]

@Abdullah-FAl
You I dont know why it fails. Maybe you are not using jspdf.debug.js and using wrongfully jspdf.js. Anyhow... to activate the arabic plugin you set the arabic language code in the text-function and not by using setLanguage.

[Abdullah-FAl]

Please tell me how to download the latest version of jsPDF 1.4.0

#1654
Note I am using
nodjs & npm

Thank you for quick reply

[Abdullah-FAl]

you set the arabic language code in the text-function and not by using setLanguage.

How to give me an example ؟

## Documentation
no example I can find

[Uzlopak]

@Abdullah-FAl

https://github.com/MrRio/jsPDF/blob/master/tests/unicode/arabic.spec.js

Btw. I committed right now a bugfix to repair the arabic plugin. Please refresh and rebuild.

[Abdullah-FAl]

Please refresh and rebuild.
like this...
npm install jspdf --save

[Uzlopak]

git pull origin master
npm install
npm run build

[Abdullah-FAl]

Oh Ok
I will try it
Thank you

[saadss1990]

any update for justifing of arabice text

[Uzlopak]

@saadss1990
No, not possible because of PDF Reference restriction.

[saadss1990]

:(

thanks

[ahawary92]

When the next stable release will be available via npm ?

[saadss1990]

sounds good 👍

[ahawary92]

@saadss1990 i saw that you have successfully added Arabic text. while i keep getting foreign symbols.
here is my code:

var doc = new jsPDF();
        doc.setFont('NafeesNastaleeq '); // set font
        doc.text("مرحبا", 20, 20, { maxWidth: 250, align: "right", lang: 'ar' })
        doc.save('sample.pdf');

and here is the output, what am i missing here ?

[Abdullah-FAl]

Hello @ahawary92
The same problem I had in the system

You can review my comment ^^^^

Thank God with the help of my brother @arasabbasi

Now I solved my problem

Result after save >>

[Uzlopak]

Right now i am more worried about the right alignment, which doesnt work as expected, if you use maxWidth parameter....

[Abdullah-FAl]

@arasabbasi How to generator base64
Such as exists in this file
https://github.com/MrRio/jsPDF/blob/master/tests/unicode/arabic.spec.js
I tried with websites like
https://www.web-font-generator.com/
https://www.fontsquirrel.com/tools/webfont-generator
But it does not work

[Uzlopak]

I know now why the alignment doesnt work... it is a little bit tricky...
But I will solve it tomorrow or so

@Abdullah-FAl
https://jpillora.com/base64-encoder/

[Uzlopak]

Fixed the right alignment hopefully with PR #1669

But somehow, if I write two times with arabic font in Acrobat Reader only one arabic text is shown :(

@saadss1990
To your problem with justifying Unicode-Text... you would have to break text in to separate words. Then you have to measure each word and then you calculate for each word the position to justify it. So it is possible... But in the long run, the PDF-file gets very very big because you need atleast additional 6-16 Bytes per word and your text cant be recognized as one text anymore...

So I am not writing the justification-nethod for Unicode-text.

[alkincakiralar1996]

hello i get doc.addFileToVFS is not a function ? why it happend ?

[Maicha]

@arasabbasi
I get "addFileToVFS is not a function" ?!!

[DevMahmoudFawzy]

Hello @arasabbasi
i have a problem here in fromhtml() function as the html arabic content still not working.
but the arabic text is actually working thanks to your helpings

`const doc = new jsPDF();

const AmiriRegular = environment.AmiriRegular.trim();

doc.addFileToVFS('Amiri-Regular.ttf', AmiriRegular);
doc.addFont('Amiri-Regular.ttf', 'Amiri', 'normal');

doc.setFont('Amiri'); // set font
doc.setFontSize(20);

doc.text('مرحبا', 200, 10, { align: 'right', lang: 'ar' });

const fromDateDay = this.fromDate.getDate();
const fromDateMonth = this.fromDate.getMonth() + 1;
const fromDateYear = this.fromDate.getFullYear();

const localFromDate = fromDateDay + '/' + fromDateMonth + '/' + fromDateYear;

const toDateDay = this.toDate.getDate();
const toDateMonth = this.toDate.getMonth() + 1;
const toDateYear = this.toDate.getFullYear();

const localToDate = toDateDay + '/' + toDateMonth + '/' + toDateYear;

let content = `
<div style="margin-left: 400px;">
  <div>
    From :
    <label>` + localFromDate + `</label>
  </div>
  <br>
  <div>
    To :
    <label>` + localToDate + `</label>
  </div>
</div>
<table style="width: 100%; font-size: 8px;">
                  <thead>
                    <tr>
                      <th>Request No.</th>
                      <th>Product Type</th>
                      <th>Printed %</th>
                      <th>Stored %</th>
                      <th>Dispenced %</th>
                      <th>Returned %</th>
                    </tr>
                  </thead><tbody>`;

for (let index = 0; index < this.requests.length; index++) {
  content += `<tr>
                <td>` + this.requests[index].RequestID + `</td>
                <td>` + this.requests[index].ProductType + `</td>
                <td>` + this.requests[index].PrintedPercentage + `</td>
                <td>` + this.requests[index].StoredPercentage + `</td>
                <td>` + this.requests[index].DispencedPercentage + `</td>
                <td>` + this.requests[index].ReturnedPercentage + `</td>
              </tr>`;
}

content += `</tbody></table>`;

doc.fromHTML(content, 15, 15, {
  'width': 180,
  align: 'right',
  lang: 'ar'
});

// Save the PDF
doc.save('Requests Status.pdf');`

i want to mention that i'm working in angular 6 application

here is the result:

the second column from left is arabic words but rendered as html

i hope that there is a solution for this
thank you

[Uzlopak]

Hello @DevMahmoudFawzy

first the bad news: fromHTML is deprecated so I wont touch the code of it anymore.
good news: in the latest code-stand arabic is automatically recognized and parsed. So without changing something in fromHTML with the latest code stand you should be able to show arabic text correctly. You would have to build the distro by yourself (npm run-script build)

Right now I work for the next release to have a different html method based on html2canvas, which will take away alot of the html-parsing.

[DevMahmoudFawzy]

thanks for the reply and keeping me updated about the new stuff.
but actually this is my first time to use this command 'npm run-script' as i didn't build the distro by myself before, can you explain more what it does and should i just run this command while building the distro or maybe i need to do something else before running it.

[NoorElzaman]

Hello @arasabbasi
Until now Arabic is not supported inside HTML Tags like table as example .
any updates ??

[DevMahmoudFawzy]

@NoorElzaman

html2pdf solved the problem for me.. but the only issue with it which i personally can live with it is that it render the html as an image in pdf so you can not copy the text or something like that.

the source code i posted as an answer on stackOverFlow here https://stackoverflow.com/questions/51289430/adding-a-utf-8-font-to-jspdf-library-to-print-utf-8-arabic-pdfs-in-angular-appli/53636468#53636468

[a7md940]

doc.text('مرحبا', 200, 10, { align: 'right', lang: 'ar' });

so i'm, arabic text doesn't appear correctly.
is there a solution !?

[EslamElmadny]

Hello @ahawary92
The same problem I had in the system

You can review my comment ^^^^

Thank God with the help of my brother @arasabbasi

Now I solved my problem

Result after save >>

yes but this solution for .text() but fromHTML() is not working :( any luck please ?

[rehamashrafshouman]

@Abdullah-FAI I have an issue in the environment.base64 give an error any idea ?

[ramyrgab]

@Uzlopak any update regarding support html() for the Arabic language?

[HackbrettXXX]

@ramyrgab not that I know of, any help is welcome, though :)

[ramyrgab]

Thank you @HackbrettXXX, I have an issue in html method with Arabic font, it's not correct,

I tried to use setLanguage() and setFont() As shown below but nothing new

[Uzlopak]

I guess the problem is that the content of the page has to be piped through bidiEngine and the arabicParser to the .html-method. I touched the code like 2-3 years ago the last time.

--- redacted to avoid implementation ---

[Uzlopak]

Even without the proposed change, arabic works as expected:

https://raw.githack.com/Uzlopak/jsPDF-arabic-test/main/arabic.html

So what is the real issue here?!

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[Joseph42A]

Hi, I think I have the same problem, I wan't to make an arabic pdf, but I don't know what is the issue because I set the language to 'ar-SA' and added fonts but still doesn't appear to work!

[HackbrettXXX]

@Joseph42A please provide more information: jspdf version, code snippets, etc.

[Bensmed]

How to specify the font you want to use?
tried 'environment.font64' and it gives an error!

Hello @ahawary92
The same problem I had in the system

You can review my comment ^^^^

Thank God with the help of my brother @arasabbasi
Now I solved my problem

Result after save >>

yes but this solution for .text() but fromHTML() is not working :( any luck please ?

[AtiaDjaber]

i solved it with html also
must add font family to div like this :
<div id="pdf" style="font-family: amiri"><table> <tr> <th>الاسم</th><th>اللقب</th> <th>العمر</th> </tr> </table> </div>

Thank you @HackbrettXXX, I have an issue in html method with Arabic font, it's not correct, I tried to use setLanguage() and setFont() As shown below but nothing new