Question

I’m looking to create a ruled page effect in CSS or Javascript/JQuery, for example. I know this can be achieved with CSS by setting a fixed line height and create a background image to suit.

I would, however, prefer to create a vector solution (ie no images) much like this, but I need it to work in IE.

---

Is it possible to generate this effect without use of images that works across all modern browsers?

---

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).

---

I forgot to mention that the text is dynamic.

Answer 1

Try heading in this direction: http://jsfiddle.net/Jw8pw/
It’s very basic but You can get more in depth, if you consider the line border height, the text position.
Basically everything needs to be based on em height. Use a transparent div for the margin with a border and divs for hole punches via border radius.

Just added some more: to it http://jsfiddle.net/julienetienne/Jw8pw/6/

//jquery
var lineHeight = $('#content p').css('line-height') ;
$('.line').css({height: lineHeight },0);

    var x = $('#content').height();
    $('#paper').css('height', x + 40 +"px");

You will need to write a script to manually add the line divs so they fill the paper past the overflow but not too much.

• Estimate how many pixels to em you use in the max case, (lets say 40px),
  You will do something like “height of text #content div” divided by custom (40px)ratio, add 10 (to be on the safe side), and that’s how many lines you need to “write”

• The #paper has no overflow so more div lines are welcomed but too much over (as in hundreds) is a bit lazy