Using CSS to Force Landscape Printing in IE

Download source code

Introduction

Some time ago I need to create a web page to print some tables in Landscape orientation. After searching the internet and asking many questions, I found this way to do it, so I want to share this.

In the style sheet, use the following to force the whole DIV to rotate 90 degrees.

.LandscapeDiv{
    PAGE-BREAK-BEFORE: always;
    width="100%";
    height="100%";
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
}

With this, it is possible to print in landscape orientation. The following is the entire web page:

/***************************************************************************
Created By: Long Zhou, Sr. Software Engine">xxxx@xxxx.xxx</a />
        Created On: 08 December 2006
        Last Modified: 09 December 2006
***************************************************************************/

// if you change the margin and the page display unexpected results, please
// try changing this var
var MaxLineEachPagePortrait=38;
var MaxLineEachLandscape=27;

//Generating Pop-up Print Preview page
function getPrint(print_area , MaxRecord,PageSize)
{ 
    //Creating new page
    var pp = window.open();
    // var pp = showModalDialog("","Print Preview",
    //               "dialogHeight:520px;dialogWidth:760px; center:yes;");
    // Adding HTML opening tag with <HEAD> … </HEAD> portion 
    pp.document.writeln('<HTML><HEAD><title>Print Preview');
    pp.document.writeln('</title>');
    pp.document.writeln('<LINK href=Styles.css type="text/css" ');
    pp.document.writeln('rel="stylesheet">');
    pp.document.writeln('<base target="_self"><style TYPE=');
    pp.document.writeln('"text/css" media="print">');
    pp.document.writeln('.PrintTable{visibility:hidden;} ');
    pp.document.writeln('.LandscapeDiv{ PAGE-BREAK-BEFORE: always;');
    pp.document.writeln('width="100%";');
    pp.document.writeln('height="100%";filter: ');
    pp.document.writeln('progid:DXImageTransform.Microsoft.');
    pp.document.writeln('BasicImage(Rotation=3);');
    pp.document.writeln('}</style> </HEAD>');
    // Adding Body Tag
    pp.document.writeln('<body MS_POSITIONING="GridLayout" ');
    pp.document.writeln('bottomMargin="0" ');
    pp.document.writeln('leftMargin="0" topMargin="0" ');
    pp.document.writeln('rightMargin="0" >');
    // Adding form Tag
    pp.document.writeln('<form method="post">');
    // Creating two buttons Print and Close within a table
    pp.document.writeln('<TABLE class="PrintTable" width=100%>');
    pp.document.writeln('<TR><TD></TD>');
    pp.document.writeln('</TR><TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" ');
    pp.document.writeln('type="button" value="Print" ');
    pp.document.writeln('onclick="javascript:location.reload(true);');
    pp.document.writeln('window.print();"><INPUT ID="CLOSE" ');
    pp.document.writeln('type="button" ');
    pp.document.writeln('value="Close" onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD>');
    pp.document.writeln('</TR></TABLE>');
    // Writing print area of the calling page
    // pp.document.writeln(document.getElementById(print_area).innerHTML);
    PageSeperate(pp,print_area , MaxRecord,PageSize);
    // Convert innerHTML to each page
    // Ending Tag of </form>, </body> and </HTML>
    pp.document.writeln('</form></body></HTML>'); 

} 

// Must fill all the blanks in <table> </table> and only accept on table
function PageSeperate(pWinhandle,print_area, MaxRecord,PageSize)
{
    var iLeft,iRight,strLeft,strRight,strTable,strTemp,MaxLength;
    //<TABLE
    var bIsDone=0;
    var iCurrent=0;

    strTemp=document.getElementById(print_area).innerHTML;
    //alert(strTemp);
    //Found First <>
    iLeft=strTemp.indexOf('<');
    iRight=strTemp.indexOf('>');
    strTable=strTemp.substr(iLeft-1,iRight - iLeft);
    if(PageSize==2){//Landscape 
        strTable='<div class="LandscapeDiv">'+
            strTable+">";
    }else{
        strTable='<div>'+strTable+">";
    }
    iLeft=strTemp.length;
    strTemp=strTemp.substr(iRight+1,iLeft - iRight -1);

    MaxLength=PageSize==2?MaxLineEachLandscape:MaxLineEachPagePortrait;
    var TotalPage=Math.ceil(MaxRecord/MaxLength);
    pWinhandle.document.writeln(strTable);

    for(var i=0;i<MaxRecord;i++){
        //Found First <>
        iRight=strTemp.indexOf('/tr');
        if(iRight<0){
            iRight=strTemp.indexOf('/TR');
        }
        if(iRight<0){
            iRight=strTemp.indexOf('/tR');
        }
        if(iRight<0){
            iRight=strTemp.indexOf('/Tr');
        }

        //Write it and count lines
        strLeft=strTemp.substr(0,iRight+4);
        pWinhandle.document.writeln(strLeft);

        iLeft=strTemp.length;

        strTemp=strTemp.substr(iRight+4,iLeft - iRight -4);

        iCurrent++;
        if(iCurrent==MaxLength){
            //separate this page
            iCurrent=0;
            pWinhandle.document.writeln('</table>Page ' + 
                Math.ceil(i/MaxLength)+'/'+TotalPage);//Print Page x/Y
            pWinhandle.document.writeln('</div>');
            pWinhandle.document.writeln(strTable);
        }

        pWinhandle.document.writeln('</table> Page '
            + TotalPage+'/'+TotalPage); //last page
        pWinhandle.document.writeln('</div>'); 
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

zl2934046

Canada

Member

No Biography provided

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

How to force landscape printing using CSS styles

Type	Article
Licence	CPOL
First Posted	11 Dec 2006
Views	84,286
Downloads	943
Bookmarked	17 times

JavascriptWindows
Visual-StudioHTMLDev, +

		9,887,886 members (30,990 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using

Using CSS to Force Landscape Printing in IE

Introduction

License

About the Author

Comments and Discussions