title: Ruled-page effect in CSS/Javascript
body: <p>I'm looking to create a ruled page effect in CSS or Javascript/JQuery, <a href="http://costamesachiro.com/wp-content/uploads/2011/04/moleskine_ruled_notebook__inside_view.jpg" rel="nofollow">for example</a>. I know this can be achieved with CSS by setting a fixed line height and create a background image to suit. </p>
  
  <p>I would, however, prefer to create a vector solution (ie no images) much <a href="http://bmccreative.com/blog%3alined-paper-with-css" rel="nofollow">like this</a>, but I need it to work in IE. </p>
  
  <hr>
  
  <p>Is it possible to generate this effect without use of images that works across all modern browsers? </p>
  
  <hr>
  
  <p>The ideal solution would be to detect the top and bottom of a line in paragraph and draw a line in between with javascript - so it'll work with undefined line heights (but I'm happy to define them if necessary).</p>
  
  <hr>
  
  <p>I forgot to mention that the text is dynamic.</p>