CSS Page Layout w/ Breaks

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

CSS mostly applies styles to a full element due to its box model. Exceptions are pseudo elements. So to create an appropriate break after a fixed length you would have to separate your text into correctly sized different elements.

EDIT: It would be possible using javascript. But even in the simplest case, where everything inside the pages delivered as just one text element with no sub elements (not even other text elements), the code will be a development nightmare and will run quite crappy. This is because there is no measure function in javascript. So you would be forced to do trail and error to find the correct position to break the element. Since the properties of the elements are live it means, that the viewer of the website will see a lot of flickering of your page just after loading. If you dare put other elements inside the html element to break into pages you get even more problems. More or less you get hundreds of special cases (break inside other elements, what if those elements are inside even other elements) to look out for.

Answer 2

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.

Answer 3

<p style="page-break-before: always">This would print on the next page</p>