How to justify Arabic Text in Advanced PDF(HTML)?

Question

i have made an Arabic printout in Advanced PDF, the text printing is not JUSTIFIED.

var tb4 = '<table width="100%" table-layout="fixed" >'
    tb4 += '<tr>'
    tb4 += '<td align="right" lang="Ar">'
    tb4 += '<p align="right" style="font-family:ariel; text-align: justify; display:block;">إشارةً إلى التعميد رقم '
    tb4 += '<span align="right"> ( '+tranId+' ) </span>'
    tb4 += '&nbsp;'
    tb4 += '<span align="right" style="font-family:ariel; text-align: justify; display:block;">الصادر بتاريخ</span>'
    tb4 += '&nbsp;'
    tb4 += '<span align="right">'+tranDate+'</span>'
    tb4 += '<span align="right"> ، بخصوص  </span>'
    tb4 += '<span align="right" style="font-family:ariel;">" '+progName+' "</span>'
    tb4 += '<span align="right" style="font-family:ariel; text-align: justify; display:block;"> ، يتم إلحاق مبلغ وقدره </span>'
    tb4 += '<span align="right"> ( '+totAmt+' ) </span>'
    tb4 += '<span align="right" style="font-family:ariel; text-align: justify; display:block;">'+amtInwords+'</span>'
    tb4 += '<span align="right" style="font-family:ariel; text-align: justify; display:block;"> ريال سعودي فقط لا غير </span>'
    tb4 += '<span align="right" style="font-family:ariel; text-align: justify; display:block;"> ، لاستكمال المشروع. </span>'
    tb4 += '</p>'
    tb4 += '</td>'
    tb4 += '</tr>'          
    tb4 += '</table>'

i tried to put --> style="font-family:ariel; text-align: justify; display:block;" in <td> as well as in <span> but it seems not working at all.

Thatkookooguy · Answer 1 · 2019-09-10T13:17:35.320

In order to use right to left languages, you need to use the css attribute called direction, which allows you to reverse everything inside a specific element.

Here, I added direction: rtl; to the page body to make the entire site RTL. but you can do the exact same thing for the table specifically.

The direction: rtl; should switch everything that is aligned to the left, to the right.

You can also define the same thing using an HTML attribute. there's a dir="rtl" HTML attribute that does the same thing.

Here's the documentation on MDN and CSS-Tricks

const tranId = 'ID323232';
const tranDate = '28/03/95';
const progName = 'program';
const totAmt = 'amt';
const amtInwords = 'in words';

let tb4 = '<table width="100%" table-layout="fixed" >'
tb4 += '<tr>'
tb4 += '<td lang="Ar">'
tb4 += '<p style="font-family:ariel;">إشارةً إلى التعميد رقم '
tb4 += '<span> ( ' + tranId + ' ) </span>'
tb4 += '&nbsp;'
tb4 += '<span style="font-family:ariel;">الصادر بتاريخ</span>'
tb4 += '&nbsp;'
tb4 += '<span>' + tranDate + '</span>'
tb4 += '<span> ، بخصوص  </span>'
tb4 += '<span style="font-family:ariel;">" ' + progName + ' "</span>'
tb4 += '<span style="font-family:ariel;"> ، يتم إلحاق مبلغ وقدره </span>'
tb4 += '<span> ( ' + totAmt + ' ) </span>'
tb4 += '<span style="font-family:ariel;">' + amtInwords + '</span>'
tb4 += '<span style="font-family:ariel;"> ريال سعودي فقط لا غير </span>'
tb4 += '<span style="font-family:ariel;"> ، لاستكمال المشروع. </span>'
tb4 += '</p>'
tb4 += '</td>'
tb4 += '</tr>'
tb4 += '</table>'

$('body').append(tb4);

body {
  direction: rtl;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You don't need the align="right" on the spans. Because we define the entire table\page-body as RTL, everything that is aligned to the left will be automatically mirrored, which makes it align to the right.

Can you please elaborate on why did you remove `display:block;` ? is that what was making the text to be not justified ? — Accountant م, Sep 08 '19 at 13:04
I didn't remove the `display: block`. I did remove now the `align="right"` since you don't need it if you add `dir="rtl"` in the HTML or `direction: rtl` in the CSS. — Thatkookooguy, Sep 08 '19 at 13:26
The OP code has inline `display:block;` in most of his `span`s , but your code removed it. — Accountant م, Sep 08 '19 at 13:31
**I'll fix my comment then:** you don't need all those `display: block`s in order to achieve what you want. You can add them if you need them regardless of the alignment of the text. the `display` attribute in CSS sets whether an element is treated as a block or inline element and the layout used for its children, such as grid or flex. while direction deals only with the direction of the text. block\inline\inline-block is unrelated to the alignment\direction of the text, so it can be added or removed without any effect on the alignment. — Thatkookooguy, Sep 08 '19 at 14:31
Besides the default text direction, It will only affect the direction of the flow of HTML elements in the document. starting from the top right corner instead of the top left (for everything that is in the normal flow of the document) — Thatkookooguy, Sep 09 '19 at 07:58
@Thatkookooguy whatever u explained worked perfectly! though i m still not able to justify the Arabic text I know its so easy in normal english by using style ="text-align: justify;" but this property is not working with arabic. — 4N335, Oct 10 '19 at 07:28

How to justify Arabic Text in Advanced PDF(HTML)?

1 Answers1