One idea to count lines in a wicked_pdf to determine page breaks for arbitrary length content (i.e. text)

wicked_pdf_test.rb

template =<<eos
<style>
#comments li {line-height:16px; margin:0; padding: 0;}
</style>
<h1>this is original text</h1>
<ul id="comments">
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</li>
  <li>esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  <li>esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. esque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
</ul>
<div id="calcs"></div>
<script type="text/javascript" src="file:///Users/mark/Sites/notable/public/javascripts/marketing/jquery.min.js"></script>
<script type="text/javascript">
$("#comments li").each(function(){
  var lh = parseInt($(this).css("line-height").split("px")[0], 10),
      lh_factor = lh * 10,
      lines = Math.ceil($(this).height() / lh_factor);
  $("#calcs").append("LINES: " + lines + "<br />");
});
</script>
eos
File.open("/Users/mark/Desktop/sample.pdf","w") {|f| f.puts WickedPdf.new.pdf_from_string(template)}

One implementation idea is to add a page-break:always style to comments that will not fit on the current page. The javascript could also duplicate the previous image in this circumstance.

Example file can be found here: http://cl.ly/2H1f2g3s2M2G (The line count on the first is off by one)

One other idea in pseudocode is to use height instead of lines. Here's what the algorithm could look like to handle this:

if (total_height_of_comments + height_of_next_comment) > page_height
  add_page_break
  duplicate_current_post_image  
end