问打印阿拉伯文本-从右到左
EN

Stack Overflow用户

提问于 2014-03-25 01:28:57

回答 2查看 3.1K关注 0票数 1

在打印页，我传递css:方向: 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%;">&nbsp;قيد المعالجة من شركة نجم</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;
     });
 });

css

printing

腾讯云大数据新春特惠

从基础引擎到开发治理平台，再到数据应用，赋能企业数字化转型。大数据产品9.9元起！

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-25 22:44:48

问题是，根据注释，当使用打印按钮时，打印的数据文本与左对齐，而不是向右(书写方向不是问题)。

原因是印刷是这样进行的：

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)在未来版本的文件中可能混合了阿拉伯文和拉丁文字符。

票数 3