I am making a web application for reading books. From the server I get a long string with all the text of the book in HTML format. It looks something like this:
<div><p>Alice was beginning....</p></div></div>to get very ... </div>
I want to paginate this text. I want to get something like this:
<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...
One page should fill the viewport. Users should not be able to scroll through the text of a book. Instead, they should be able to navigate between pages using buttons.
I need some function to measure all content, break it into pieces of the same maximum height, and mark parts with page numbers. It should also take into account photographs and long paragraphs (which may not fit on one page).
How can I accomplish all this?