Splitting a long page into a number of pages

Question

I want to pull a dynamic content, which consists of a long text input with some images, into a div with a fixed width (300px) and height (1000px), the challenge is I cannot use overflow: auto in css when the content's length is exceeding the div's height (1000px), instead, I am asked to split the long content into pages with a pagination.

Is it possible to achieve with PHP or do I have to use javascript (jquery)?

I was thinking to count the number of characters and splitting them, but it doesn't seem correct when the content comes with different sizes of images...

Any ideas??

Answer 1

You could use PHP. Find out how many characters you can get per line, and how many lines of characters will fit in your div. Then, with PHP, count characters, divide by characters/line, then you'll have how many lines your text will take up. Then you can use getimagesize() to get an images dimensions, and go from there.

See the PHP function for more info.

Answer 2

This might be very complicated(I'd like to say "impossible") to do it on the serverside, because there are too many clientside effects that can't be calculated(browser-default-settings for margins, paddings, line-height, font-size and user-setting for zooming), I would prefer to do this on clientside.

I made a little example using jQuery: http://jsfiddle.net/doktormolle/XwUuA/

It takes the childnodes of the target-element, and wraps them into new elements which have the same dimensions like the target-element(as long as the height of the wrapper does'nt exceed the height of the target-element).

Maybe it's useful to you(It's a draft, of course there still has to be worked on it to match your needs)

Answer 3

I wanted to do something similar with HTML but in a C# Windows Forms application. What I wanted to do was to generate some contents based on some database tables and send them out to the printer. The contents had to fit into A4 papers.

After lots of trial and error I measured the maximum size of the contents based on their size, place etc. and wrote the numbers in the CSS portion of my HTML. With that I could get a nice result. Still some slight errors on some inputs, but that worked for me!