Click here to Skip to main content
Click here to Skip to main content

Using CSS to Force Landscape Printing in IE

, 15 Feb 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to force landscape printing using CSS styles

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)

Share

About the Author

zl2934046

Canada Canada
No Biography provided

Comments and Discussions

 
GeneralThis does not appear to work in IE 6.0 PinmemberAndyChilling2-Oct-07 8:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 15 Feb 2012
Article Copyright 2006 by zl2934046
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid