HTML分页的两列布局

Question

I have a two-column page ( <p> tags after the first half are moved to column 2 with javascript).

My problem is that I want to break it up into "pages" like you'd see if you were reading a PDF.

Is there a neat way to do this? Or do I need to check if each page is overflowing programmatically as I fill them? Would that even work?

Answer 1

A possible way to do it is to make all different div's with all the copy in it and then with scrollTop go to the according page/collumn.

Something like:

<div id="page1" class="page">
    <div id="p1_column_1" class="column">Here all the copy</div>
    <div id="p1_column_2" class="column">Here all the copy</div>
</div>
<div id="page2" class="page">
    <div id="p2_column_1" class="column">Here all the copy</div>
    <div id="p2_column_2" class="column">Here all the copy</div>
</div>

Then css give it a height a width and overflow hidden and then with javascript/jquery something like:

var curr_col = 0;
var col_height = $('.column').height();
$('.column').each(function() {
      $(this).scrollTop(col_height*curr_col);
      curr_col++;
})

Edit Check this fiddle to see the result: http://jsfiddle.net/taPjR/3/ . In the example I copied the text with jQuery from the first div.

And I know it's very a dirty way, but I'm not sure if there is another keeping different fonts/font sizes and the images in the copy in mind.

Maybe a pdf generator like LaTex ( http://www.latex-project.org/ ) could also be interesting? Hope I could help.