如何证明高级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

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

在这里，我向页面正文添加了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"。由于我们将整个表\页面正文定义为 RTL，因此向左对齐的所有内容都将自动镜像，从而使其向右对齐。