如何证明高级PDF（HTML）中的阿拉伯文字正确？

Question

我已经用高级PDF进行了阿拉伯文打印输出，但文本打印不正确。

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>'

我试图放-> style =“ font-family：ariel; text-align：justify; display：block;” 在<td>和在，<span>但似乎根本不起作用。

Answer 1

为了使用从右到左的语言，您需要使用名为的css属性direction，该属性允许您反转特定元素内的所有内容。

在这里，我添加direction: rtl;到页面正文中以使整个站点成为RTL。但是您可以为该表做完全相同的事情。

本direction: rtl;应切换，对齐到左边，右边的一切。

您还可以使用HTML属性定义相同的内容。有一个dir="rtl" HTML属性可以执行相同的操作。

这是有关MDN和CSS技巧的文档

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>

您不需要align="right"跨度。因为我们将整个table \ page-body定义为RTL，所以将自动镜像所有与左侧对齐的内容，从而使其向右对齐。