Question

I got a task that I am not sure how best to do it. So I would like some input or suggestions 🙂

Alright, so here is what I need to do.

I have a page with content being sent to the print (it contains images, and text in divs, p, span, h1, h2, h3, hr, a etc tags). And let’s say it is roughly 1500 pixels high.

I have a container div say 300 by 500 pixels.

I need to take the page with all of the content, and split up that content into the divs.

So:

_______________
|              |
|              |
|              |
|   Content    |
|              |
|              |
|              |
|______________|

Goes into:

_______________
|   Part 1     |
|______________|
|   Part 2     |
|______________|
|   Part 3     |
|______________|
|   Part 4     |
|______________|

But my problem comes with how do I take a giant object of multiple elements on a page and go through it and determine that this div should be cut in half and placed in part 1 and part 2 because it can’t fit in the remaining space in part 1? And how do I determine what is remaining and what isn’t?

My thought was to read the entire contents of the body tag into a variable, looping through each element and adding it to another variable which would have remaining space, I could determine that based on the DOM elements height and width. But I’m not sure if that is the best idea.

Answer 1

If using a brute force type approach is not out of the question, then using something like following should work:

• Put everything in div 1
• Start taking things from div 1 into div 2 until div 1 is of the correct size
• Repeat process for div 2

An alternative approach would be to loop through each node in the div, summing the total height until it exceeds the limit. At that point, take a step back and start moving the content to the next div, repeating the process.

If your page has a lot of text in a single text node, then it may be a bit tricky. You would most likely need to implement some kind of system to split text nodes in order to be able to calculate the height of individual text blocks and to be able to split them between divs.