knitr/Rmd: page break after n lines/n distance

Question

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

Answer 1

Programatically. Create an HTML div. Set this div's width and height to a fixed amount and the overflow to scroll.

<div style="height:1000px; width: 500px; overflow-y: scroll;">
    ...
</div>

Process your markdown into HTML elements. I have 5 h1 tags that are 300px tall each.

<h1 style="height:300px;">First</h1>
<h1 style="height:300px;">Second</h1>
<h1 style="height:300px;">Third</h1>
<h1 style="height:300px;">Fourth</h1>
<h1 style="height:300px;">Fifth</h1>

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.