Search code examples
javascriptcssprinting-web-page

Printing horizontally scrolling content onto the next page - possible?

I've been unsuccessfully trying to print horizontally scrolling content. I've come to a point where I'm tired of searching and I think it's time to ask -

So here goes, below is a really simplified version of the content I want to print -

The HTML

<div id="printingDiv">

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

</div>

The CSS

.printDiv {
     font-size: 12pt; //else the content adjusts its font-size just to fit the print page
     width: auto;
}

.filterRow {
     white-space: no-wrap; //just for the sake of this example, to make sure the content overflows
     width: auto;
}

The Javascript

$("#printingDiv").show();
window.print();

The Output

On the printout - I only see content till about Something long to print#5 and part of Something long to print#6.

What I want to see is the rest of Something long to print#6 upto Something long to print#10 printed on the next page.

So, to sum it up, I want to be able to print horizontally scrolling content that doesn't fit in the first page onto another page. Is this even possible?

Some of the links I've referred to -

http://alistapart.com/article/goingtoprint

http://meyerweb.com/eric/articles/webrev/200001.html

Print Stylesheets for pages with long horizontal tables - (This link has some other options, is that the only way?)

Solution

  • Short and sweet: no...

    You have absolutely no control over the way things get printed with javascript. The best you can do is wrap the "Something long to print#6+ onto the next line".