Question

I’m trying to make a webpage where it basically looks like a word document. There would be multiple boxes that would scroll down and the text would flow and page break from one page to the next.

Does anyone have any idea where I would even start? Thanks.

Edit: It should be right in the browser, looking similar to this:

(Ignore the columns)

Answer 1

Something like that sounds possible using javascript, but it depends a bit on the structure of your html and whether or not you want to break paragraphs or just move the next paragraph to the next page if it doesn´t fit

So the simplest example, not breaking paragraphs / html elements with a flat html structure (no nested divs, columns, etc) like:

<div class="document">
  <h1>title</h1>
  <p>texts</p>
  <h2>subtitle</h2>
  <p>texts</p>
  ...
  <p>texts</p>
</div>

would be to do something like:

height = 0
loop through all direct child elements of .document
{
    if ( (height + element_height) > page_height)
    {
        add page_break_element before current element
        height = 0
    }
    height = height + element_height
}

I´d use jquery because it makes it easy to loop through the elements, measure heights, etc.

I guess breaking paragraphs would be possible as well, but a lot of extra work.