在打印页面中,我正在通过css:direction:rtl正确地看阿拉伯语。
但是,虽然打印所有其他css样式但是方向:rtl不起作用并打印正常的从左到右的阿拉伯语文本。
以下是JS Fiddler
以下是代码
<div class="formBLock" style="padding-top:0px;">
<div class="formCon CaseDetailsButton">
<div class="divbtn">
<a class="btn more2" href="/ClientInquiry/ar/CaseInquiry">الرجوع </a>
</div>
<div class="divbtn">
<input type="button" id="btnPrint" class="btn more2" value="طباعة "/>
</div>
</div>
<div id="dvPrint">
<div style="border:1px black solid;width:90%;margin-left:5%;margin-right:5%;float:right;margin-top:10px;">
<div style="border-bottom:1px black solid;float:right;margin-top: 10px;width: 100%;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; font-weight:bold;"> تم استلام طلبكم : الاستعلام عن تقرير الحادث</span>
</div>
<div style="border-bottom:1px black solid;float:right;margin-top: 10px;width: 100%;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%;">شكرا لاستخدامكم نظام شركة نجم للاستعلام </span><br />
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%;">المعلومات أدناه توضح الوضع الحالي لمستندات الحادث</span>
</div>
<div style="border:1px solid black;width:90%;margin-left:5%;margin-right:5%;height:200px;float:right;margin-top: 10px;">
<div style="float:right;width:30%;">
<div style="height:50px;border-bottom:1px solid black;text-align:center;border-left:1px solid #000000">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:7%;">بيانات الحادث</span>
</div>
<div style="height:150px;text-align:center;border-left:1px solid #000000">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:30%;">حالة إرسال المستندات</span>
</div>
</div>
<div style="height:200px;width:33.3%;margin-top:0px;float:right;border-left:1px solid #000000">
<div style="border-bottom:1px solid black;height:50px;text-align:center;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:6%;">رقم الحالة</span>
</div>
<div style="border-bottom:1px solid black;height:50px;text-align:center;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:6%;">حالة الإرسال</span>
</div>
</div>
<div style="height:100px;width:36.3%;margin-top:0px;float:right;">
<div style="border-bottom:1px solid black;height:50px;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:6%;">RD21031414</span>
</div>
<div style="border-bottom:1px solid black;height:50px;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; margin-top:6%;"> قيد المعالجة من شركة نجم</span>
</div>
</div>
</div>
<div style="border-top:1px solid black;float:right;margin-top: 10px;width: 100%;">
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%; font-weight:bold;">شركة نجم لخدمات التأمين</span>
<span style="color: #8F8E8E;float: right;font-family: Tahoma;font-size: 15px;font-weight: normal;margin-bottom: 5px;margin-right: 10px;margin-top: 1px;vertical-align: middle;width: 90%;">لمزيد من المعلومات يرجى الاتصال بـ 920000460 كما يمكنك زيارة
<a href="CaseFooterLink" target="_blank">Site.sa</a>
أو الفرع الأقرب لشركة نجم
</span>
</div>
</div>
</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</div>
javascript:
$(document).ready(function () {
$("#btnPrint").click(function () {
var ObjdvPrint = $("#dvPrint");
window.frames["print_frame"].document.body.innerHTML = ObjdvPrint.html();
window.frames["print_frame"].window.focus()
window.frames["print_frame"].window.print()
return false;
});
});
答案 0 :(得分:2)
问题在于,根据评论,当使用打印按钮时,打印的数据的文本与左侧对齐,而不是右侧(书写方向不是问题)。
原因是打印是这样进行的:
var ObjdvPrint = $("#dvPrint");
window.frames["print_frame"].document.body.innerHTML = ObjdvPrint.html();
window.frames["print_frame"].window.focus()
window.frames["print_frame"].window.print()
因此创建了一个框架,仅包含原始文档的元素(带有id="dvPrint"
)。此元素具有各种内联样式(在style
属性中),但没有任何设置水平对齐的内容,因此应用了默认的text-align: left
。无论在原始文档的body
元素上设置什么都没有影响。
修复方法是以创建框架时保留的方式设置该元素内容的对齐方式。由于您使用的是innerHTML
,因此对该元素本身进行设置无效。但在这种情况下,该元素的内容是单个内部div
元素,因此有助于设置对齐:
<div id="dvPrint">
<div dir="rtl" style="...">
您也可以在内部元素的text-align: right
属性的内容中添加style
。但是dir="rtl"
根据定义设置了水平对齐(text-align: right
)等等。它还设置了整体书写方向性,这通常是不必要的,但是对a)浏览器错误以及b)可能的混合的良好预防措施。文档的某些未来版本中的阿拉伯语和拉丁字符。
答案 1 :(得分:1)