CODEWITHSUNDEEP
javascripthtmlnetsuitearabicsuitescript
4N335
4N335

Reputation: 281

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

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.

Upvotes: 3

Views: 1466

Answers (1)

Thatkookooguy
Thatkookooguy

Reputation: 7012

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.

Upvotes: 7

Related Questions