text in <pre> tag not formatted correctley in innerHTML

tango1948 · Dec 5, 2007

Hi
I'm trying to print part of a page using innerHTML.
The text inside the <pre> tage is incorrectly formatted.
If I print the whole page - without innerHTML - everything's
ok. Please can you check the code snippet below.

Code:

function printEmp(EmpID)
{
var printContent=document.getElementById(EmpID);
var windowUrl='about:blank';
var uniqueName=EmpID;
var windowName='Prt' + EmpID;
var printWindow=window.open(windowUrl, windowName,
		'left=50000,top=50000,width=0,height=0');
printWindow.document.writeln('<style type="text/css">');
printWindow.document.writeln('@media print {' );
printWindow.document.writeln('.payslip {');
printWindow.document.writeln('background-image: url("payls.gif")');
printWindow.document.writeln('writing-mode: tb-rl;');
printWindow.document.writeln('page-break-after: avoid}');
printWindow.document.writeln('}');
printWindow.document.writeln('</style>');
printWindow.document.writeln('<div class="payslip">');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}

<Body> 

<a name="012345678"></a>
<input type="button" value="print me"
 style="top: 20px; position: relative"
 onClick="printEmp('emp001');"></input>
<DIV class="payslip" id="emp001"><pre>
the
preformatted
text
</pre></DIV><BR><BR>

BillyRayPreachersSon · Dec 6, 2007

The page you're printing is in no way valid HTML. It has no HTML or BODY tags for starters.

Why not make it a valid page and see what you get?

In fact, why bother doing it with JS at all? Why not just set up a print style sheet to only print what you need? That way, users without JS will also be able to print as you intend. Ask in forum215 for more help on doing this.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

tango1948 · Dec 6, 2007

Hi Dan
Thanks for your reply, sorry I did'nt explain fully the page is very large (company payroll). What I'm trying to do is add a button to each payslip that will print a single employee. What I sent was only a snippet, I've tried to send a more complete example this time, please can you let me know if you see any errors.

Code:

<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-8">
<SCRIPT LANGUAGE="Javascript">
function printEmp(EmpID)
{
var printContent=document.getElementById(EmpID);
var windowUrl='about:blank';
var uniqueName=EmpID;
var windowName='Prt' + EmpID;
var printWindow=window.open(windowUrl, windowName,
		'left=50000,top=50000,width=0,height=0');
printWindow.document.writeln('<HTML><HEAD>');
printWindow.document.writeln('<meta http-equiv="Content-Type"');
printWindow.document.writeln('content="text/html; charset=iso-8859-8">');
printWindow.document.writeln('<style type="text/css">');
printWindow.document.writeln('@media print {' );
printWindow.document.writeln('.payslip {');
printWindow.document.writeln('background-image: url("payls.gif")');
printWindow.document.writeln('writing-mode: tb-rl;');
printWindow.document.writeln('page-break-after: avoid}');
printWindow.document.writeln('}');
printWindow.document.writeln('</style></HEAD> ');
printWindow.document.writeln('<body>');
printWindow.document.writeln('<div class="payslip">');
printWindow.document.write(printContent.innerHTML);
printWindow.document.writeln('</div></body></html>');
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
</script>
<body>
<a name="012345678"></a>
<input type="button" value="print me"
 style="top: 20px; position: relative"
 onClick="printEmp('emp001');"></input>
<DIV class="payslip" id="emp001"><pre>
the
preformatted
text
</pre></DIV><BR><BR></body></html>

Thanks

David

BillyRayPreachersSon · Dec 6, 2007

Have you tried your own code? I saved that code as-is, ran it, and the text printed out perfectly as shown on screen (both in IE 6 and Fx 2).

I even tried with a single tab in front of the word "preformatted" to prove indentation worked as expected.

Perhaps you could try the code above - if it doesn't work for you, post which browser it fails in.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

tango1948 · Dec 6, 2007

Hi Dan
Thanks for checking, what I failed to tell you and now
understand is the problem is the preformatted text is in
Hebrew which should appear right to left and in the main form is ok, but when I use the innerHTML the text appears left to right, so that's the real problem but I don't know how to show you the Hebrew text or send you an example.

David

BillyRayPreachersSon · Dec 7, 2007

I give up. Why you couldn't have given us a good description to start with is beyond me.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

tango1948 · Dec 7, 2007

Sorry about that, I was trying to present a symplified version of the problem cause I did'nt know how to show the script with the Hebrew.
Here's the whole page, hope you can see it (if not let me know how I can upload it). I'd really appriciate your comments on how I can get this to work.

Code:

<FORM name="big" action=" ">
<HTML><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-8">
<SCRIPT LANGUAGE="Javascript">
var div_to_print
var slctd
function printOved(ovedID)
{
var printContent=document.getElementById(ovedID);
var windowUrl='about:blank';
var uniqueName=ovedID;
var windowName='Prt' + ovedID;
//var printWindow=window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
var printWindow=window.open(windowUrl, windowName, 'menubar=1,resizable=1,left=0,top=0');
printWindow.document.write('<HTML><HEAD>\r\n');
printWindow.document.write('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r\n');
printWindow.document.write('<style type="text/css">\r\n');
printWindow.document.write('@media print {\r\n' );
printWindow.document.write('.tlush {background-image: url("[URL unfurl="true"]http://www.mll.co.il/images/tlush/otlushls.gif");\r\n');[/URL]
printWindow.document.write('background-repeat: no-repeat;\r\n');
printWindow.document.write('background-position: 6px -2px;\r\n');
printWindow.document.write('overflow: hidden;\r\n');
printWindow.document.write('margin: 0cm 0cm 0cm 0cm;\r\n');
printWindow.document.write('left: 100px;\r\n');
printWindow.document.write('width: 500px;\r\n');
printWindow.document.write('height: 1015px;\r\n');
printWindow.document.write('line-height: 10px;\r\n');
printWindow.document.write('position: relative;\r\n');
printWindow.document.write('writing-mode: tb-rl;\r\n');
printWindow.document.write('page-break-after: avoid}\r\n');
printWindow.document.write('}\r\n');
printWindow.document.write('</style></HEAD>\r\n ');
printWindow.document.write('<body>\r\n ');
printWindow.document.write('<BDO DIR="rtl">\r\n ');
printWindow.document.write('<div class="tlush">\r\n');
printWindow.document.write(printContent.innerHTML);
printWindow.document.write('</div>,</BDO>');
printWindow.document.write('</body>');
printWindow.document.write('</html>\r\n');
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}

function getDATA()
{
 var tluNum
 if ( div_to_print == "all_Tlushim" )
      return document.getElementById("all_Tlushim").innerHTML;
 slctd = document.big.link.selectedIndex + 1;
 tluNum =(slctd > 99)? slctd : (slctd > 9)? '0'+slctd : '00'+slctd;
// alert("div_tlush" + tluNum);
  slctd = document.big.link.selectedIndex - 1;
 return document.getElementById("div_tlush" + tluNum).innerHTML;
 }

function getPrintPage()
{ var pp = window.open("[URL unfurl="true"]http://www.mll.co.il/images/tlush/printme.htm");[/URL] }

function slctPrevTlush()
{ slctd = document.big.link.selectedIndex;
  if(slctd > 0)
      window.location = document.big.link.options[slctd - 1].value;
  if(slctd > 0)
      document.big.link.selectedIndex = slctd - 1;
}
function slctNextTlush()
{ slctd = document.big.link.selectedIndex;
  if(slctd < document.big.link.options.length - 1)
      window.location = document.big.link.options[slctd + 1].value;
  if(slctd < document.big.link.options.length - 1)
      document.big.link.selectedIndex = slctd + 1;
}
</script>
    <script language="Javascript" src="[URL unfurl="true"]http://www.mll.co.il/images/tlush/autosuggest.js"></script>[/URL]
<style type="text/css">
@media print {
.tlush {background-image: url("[URL unfurl="true"]http://www.mll.co.il/images/tlush/otlushls.gif");[/URL]
        background-repeat: no-repeat;
        background-position: 6px -2px;
        overflow: hidden;
        margin: 0cm 0cm 0cm 0cm;
        left: 100px;
        width: 500px;
        height: 1015px;
        line-height: 10px;
        position: relative;
        writing-mode: tb-rl;
        page-break-after: avoid}
.AutoSgst{display: none}
.clsLink{display: none}
.clsS1{display: none}
.tmplt{display: none}
#footer{display: none}
}

.hdrClass
{position: absolute;
 height: 120px;
 width: 100%
}
@media screen
{
div.tlush
{background-image: url("[URL unfurl="true"]http://www.mll.co.il/images/tlush/otlush.gif");[/URL]
background-color: grey;
background-position: -3 5;
background-repeat: no-repeat;
top: 20px;
position: relative;
width: 1015px;
line-height: 10px;
}
div.main
{
background-color: grey;
position: relative;
overflow: auto;
z-index: -1;
top: 50px;
width: 1025px;
height: 540px;
}
.AutoSgst
{position: absolute;
 top: 33px;
 left: 585px;
 width: 150px;
 font-family: monospace;
 font-size: 15px
}
.hdrClass
{position: absolute;
 background-color: #E6E6FA;
 height: 60px;
 width: 105%
}
.tmplt
{ position: absolute;
  color: navy;
  top: 20px;
  left: 550px;
  width: 250px;
  font-family: monospace;
  font-size: 15px
}
.clsLink
{ position: absolute;
  color: navy;
  top: 0px;
  left: 447px;
  width: 290px;
  font-family: monospace;
  font-size: 15px
}
hr { position relative;
     top 25px;
     color: navy;
     height: 3px
   }

.thisline
{
  top: 50px
}
.clsS1
{ position: absolute;
  background-color: EBEBEB;
  color: navy;
  top: 25px;
  left: 10px;
  width: 370px;
  font-family: monospace;
  font-size: 15px
}
.tbl,.tbl TABLE, .tbl SELECT
{ font-family: monospace;
  font-size: 11pt;
}

 .suggestion_list
 {
  background-color: #E6E6FA;
  border-style: groove;
  font-family: monospace;
  font-size: 15px
 padding: 4px;
 }

 .suggestion_list ul
 {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }

 .suggestion_list a
 {
 text-decoration: none;
 color: navy;
 }

 .suggestion_list .selected
 {
 background: navy;
 color: white;
 }

 .suggestion_list .selected a
 {
 color: white;
 }

 #autosuggest
 {
 display: none;
 }}
</style>
<body>
<DIV class="hdrClass">

<BDO dir="rtl">
<label class="tmplt" style="left: 707px; top: 3px; width: 100px; font-family: arial; font-size: 16px; text-decoration: underline">??? ????:</label>
<label class="tmplt" style="left: 250px; top: 3px; width: 130px; font-family: arial; font-size: 16px; text-decoration: underline">??"? ?????:</label>
<label class="tmplt" style="top: 50px; left: 290px; width: 130px; font-family: arial; font-size: 16px; text-decoration: underline; Visibility: Hidden">????:</label>
<label class="tmplt" style="left: 708px; top: 38px; width: 100px; font-family: arial; font-size: 16px; text-decoration: underline">?? ?????:</label>
<img  name="bl"  src="[URL unfurl="true"]http://www.mll.co.il/images/tlush/prev.gif"[/URL]  style="position: absolute; top:25px; left: 485px" onClick="slctPrevTlush()">
<img  name="b2"  src="[URL unfurl="true"]http://www.mll.co.il/images/tlush/next.gif"[/URL]  style="position: absolute; top:25px; left: 445px" onClick="slctNextTlush()">
<img  name="b3"  src="[URL unfurl="true"]http://www.mll.co.il/images/tlush/print.gif"[/URL]  style="position: absolute; top:20px; left: 830px" onClick="window.print()">
<select name="link" class="clsLink" onChange="location=document.big.link.options[document.big.link.selectedIndex].value;">                                                                                                                      
<OPTION VALUE = "#021954052">?????? ????&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 1008</option>
<OPTION VALUE = "#034027151">?????? ???&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 1009</option>
<OPTION VALUE = "#028719094">??? ????&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 1014</option>
</select>
<select name="S1" class="clsS1">
<OPTION>??"? ??????? ??? ???????.....859492.75</option>
<OPTION>??"? ?????? ????...............1136.00</option>
<OPTION>??"? ?????? ????.............164955.83</option>
<OPTION>??"? ??? ??????..............693400.92</option>
<OPTION>??"? ?????? ???????.................97</option>
<OPTION>??"? ?????? ??????..................98</option>
<OPTION>??"? ????? ????.....................98</option>
<OPTION>??"? ?????? ???? ???.................0</option>
<OPTION>??"? ?????? ?????....................1</option>
</SELECT>
<DIV ID="autosuggest"><ul></ul></DIV>
<input Class="AutoSgst" type="text" name="state" id="state" />
<script language="Javascript">
var states = new Array(
                       "??????? ???????  ",
                       "?????? ???? ??   ",
                       "?????? ???       ",
                       "???? ??????      ");
var Ktovot = new Array(
                       "0042",
                       "0027",
                       "0068",
                       "0095");
new AutoSuggest(document.getElementById('state'), states, Ktovot);
</script></div></bdo>
<DIV Class="main">
<a name="021954052"></a>
<input type="button" value="print me" style="top: 20px; position: relative" onClick="printOved('div_tlush001');"></input>
<DIV class="tlush" id="div_tlush001"><PRE>

                                                         "?????" ?????
50    9           ????             2007 ?????                  1              2222     111111111            ?"?? ???????? 741

               ???
               ? ? 0   0 1     ?   ?    250286     10000        000000 11   01060511026   179302 21954052      ????? ?????
                                                                                                          ??????????????????

   28182??? ?????                          620000      ????? ???
    3333??? ?????






                    620000                                        620000


                                                  51100 ????? ??   22000                       ?      ????? ??????105
                                                  16208  ?????.? 1498200                             ?????? ??????111
                                                  24303 ??????.?   15900                                     ?????148











                                                  91611          1536100
          25                         25 21.0                     2156100


                              2.25                                                                      ?.? ???
 2064489                       401              2064489   6579                14982                               6579
                                         401                 ?? ?????
                                                           511   6579                                                     405
                                                                                                                        ?????

                       83        83       10.0 ?????
                                                ????                                              ?????? ???? ?????





</PRE></DIV><BR><BR>
<a name="034027151"></a>
<input type="button" value="print me" style="top: 20px; position: relative" onClick="printOved('div_tlush002');"></input>
<DIV class="tlush" id="div_tlush002"><PRE dir="ltr">

                                                         "?????" ?????
50    1           ????             2007 ?????                  2              3333     222222222           ?"?? ????????741

               ???
 1 2101        ? ? 0   0 1     ?   ?    290377     10000        000000 11   010605 0000          34027151       ??? ????????
                                                                                                        ????????????????????

   54545??? ?????                         1200000      ????? ???
    6452??? ?????





                                        1/02/2007 -? ????? ?????
                   1200000                                       1200000


                                                1309200 ????? ??         133000                ?    ????? ??? ????030
                                                 182663  ?????.?           8500                ?       ?????? ????050
                                                 143199 ??????.?  820000                                 ????? ???101
                                                  68800      ???*1705200                             ?????? ??????111
                                                  37500  ???????* 290000                                     ?????118
                                                                   45200                          ????? ???? ?????132
                                                                 1102900                          ??? ???? ???????144
                                                                   19900                                     ?????148
***********************************************                           32800                   ????.?? ??? ????G02
 ?????   ?????    ????    ?????   ?????? ?????*                   531629                                    ????? GMS
----------------------------------------------*
   328     688   13760     5.0%       ????????*
          1125   15000     7.5%     ???????.??*

                                                1741362          4514829 174300
          25                         25 48.0                     5714829


                   126        2.75                                                                      ?.? ???
 3973467                       490              3973467  41387                17504          5316   4230         27627  13760
                                         616                 ?? ?????
                                                         13092  30358                                       375    688   3259
                                                                                                     375   1125    688  ?????

                       83        83       10.0 ?????
                                                ????





</PRE></DIV><BR><BR>
<a name="028719094"></a>
<input type="button" value="print me" style="top: 20px; position: relative" onClick="printOved('div_tlush003');"></input>
<DIV class="tlush" id="div_tlush003"><PRE>

                                                         "?????" ?????
50  151          ?????             2007 ?????                  3              6666     444444444            ?"?? ????????741

               ???
 1             ? ? 0   0 1   1 ?   ?    101171                  000000 11   01090517672   274410 28719094         ????????
                                                                                               40300 ??????????????????????

   20280??? ?????                                                                                      250     ????? ???
    2400??? ?????                                                                                       50      ???? ???
                                                                                                3830401596     ????? ???
                                                                                                 28440  79       %150?.?


                                                                  411480




                                                  15551  ?????.?   50000                       ?        ??? ??????104
                                                  23833 ??????.?    3000                                ??? ??????104
                                                  21312      ???  118600                                     ?????118
                                                                   14400        375  160   2400    %37.5???? ?????142
                                                                   28800        750  160   2400      %75???? ?????143
                                                                   15000                                ?"? ??????160
                                                                    7227                                    ????? GMS
                                                                                     330       ?  ????? ???? ?????002

***********************************************
 ?????   ?????    ????    ?????   ?????? ?????*
----------------------------------------------*
           213    4262     5.0%       ????????*

                                                  60696           237027
          25                         25 21.0                      648507


                    47        4.75                                                                      ?.? ???
  587811                       846               587811   6485                                 72    530          2223   4262
                                         892                 ?? ?????
                                                                 6485                                              213    394
                                                                                                                   213  ?????

                       83        83       10.0 ?????
                          3300                  ????





</PRE></DIV></DIV>

MarkZK · Dec 7, 2007

I get the feeling that code won't validate.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

text in <pre> tag not formatted correctley in innerHTML

tango1948

Programmer

BillyRayPreachersSon

Programmer

tango1948

Programmer

BillyRayPreachersSon

Programmer

tango1948

Programmer

BillyRayPreachersSon

Programmer

tango1948

Programmer

MarkZK

Technical User

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

text in &lt;pre&gt; tag not formatted correctley in innerHTML

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor

text in <pre> tag not formatted correctley in innerHTML