Print Arabic Text - Right to Left

Question

In print page, I am passing css: direction: rtl to see arabic properly.

But while, printing all other css styles gets applied but direction: rtl is not working and prints normal left to right texts of Arabic.

Here is the JS Fiddler

Here is the codes



        
            
                الرجوع 
            
            
                               
             
        

               
                    
                            
                                 تم استلام طلبكم : الاستعلام عن تقرير الحادث
                              
                            
                                شكرا لاستخدامكم نظام شركة نجم للاستعلام 

                                المعلومات أدناه توضح الوضع الحالي لمستندات الحادث
                               
                            
                                
                                    
                                        بيانات الحادث
                                       
                                    
                                        حالة إرسال المستندات
                                       
                                
                                
                                    
                                        رقم الحالة
                                    
                                    
                                        حالة الإرسال
                                    
                                
                                
                                    
                                        RD21031414
                                    
                                    
                                            قيد المعالجة من شركة نجم
                                    
                                
                            

                            
                                شركة نجم لخدمات التأمين
                                لمزيد من المعلومات يرجى الاتصال بـ 920000460 كما يمكنك زيارة 
                                    Site.sa
                                    أو الفرع الأقرب لشركة نجم

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;
     });
 });

Jukka K. Korpela · Accepted Answer

The problem is, as per the comments, that when a print button is used, the data printed has text aligned to the left, not right (the writing direction is not the issue).

The reason is that the printing is performed this way:

var ObjdvPrint = $("#dvPrint");
window.frames["print_frame"].document.body.innerHTML = ObjdvPrint.html();
window.frames["print_frame"].window.focus()
window.frames["print_frame"].window.print()

So a frame is created, containing only an element (with id="dvPrint") of the original document. This element has various inline styles (in style attributes), but nothing that would set the horizontal alignment, so the default text-align: left is applied. Whatever is set on the body element of the original document has no impact.

The fix is to set the alignment on the content of that element, in a manner that is retained when the frame is created. Since you are using innerHTML, it does not help to set things on that element itself. But in this case, the content of that element is a single inner div element, so it helps to set the alignment to it:

You could alternatively just add text-align: right in the content of the style attribute of the inner element. But dir="rtl" by definition sets the horizontal alignment (text-align: right), among other things. It also sets the overall writing directionality, which is normally not necessary, but a good precaution against a) browser bugs and b) possible mix of e.g. Arabic and Latin characters in some future version of the document.

Print Arabic Text - Right to Left

Answers (2)

Related Questions