Let me caveat by saying that this may be better suited as an html/css question but (a) I\'m not too familiar with those techniques and (b) I wanted to keep it all in
Programatically. Create an HTML div. Set this div's width and height to a fixed amount and the overflow to scroll.
...
Process your markdown into HTML elements. I have 5 h1
tags that are 300px tall each.
First
Second
Third
Fourth
Fifth
These 5 h1
wont all fit on the same page. The page is only 1,000 pixels tall. Only 3 h1
tags will fit on this page. We'll need to insert a pagebreak after the third element.
Incrementally add each new item into the DOM. After inserting each item check to see if the browser's scroll bar is present. If it is, then we know that the item we just inserted was too big for this page; remove the item and insert a page break.
Before:
### First
### Second
### Third
### Fourth
### Fifth
After:
### First
### Second
### Third
------
### Fourth
### Fifth
This would work for any element and you wouldn't have to worry about an item's height. Because, if the item you just inserted made the HTML div scroll then we need a page break. Images, videos, h1, h2, p, custom/dynamic css, anything.
UPDATE
You could also calculate the height of each div element. http://api.jquery.com/height/ That way recalculating a 54 page document would be much easier.