Question

I’m trying to create a editable textbox with HTML/CSS/Javascript that looks and functions like a printed textbox with lines appearing every row.

It must look like this because the form may be printed on paper for people to write in.

I see three approaches to this method:

1. Table row with ‘border-bottom’ on each row and using javascript to determine when the text-overflows and move the cursor to the input box on the next row when it does.
   This method is probably not very accurate.

2. Drawing absolute-positioned lines beneath the div/textarea that contains the text.

3. Using CSS3 repeating gradients to draw the lines behind the div/textarea. Like so: http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/
   . This method is only compatible with modern browsers though.

Which method is the best and why?

Answer 1

Here’s one option. You need a div to draw each line, that could be done beforehand or with JavaScript.

In short, set an explicit line height on your textarea, then absolutely position a container element behind it. Inside that container put a set of elements with a height equal to the line height of the textarea, a one-pixel bottom border, and a negative-one-pixel bottom margin.

It’s most similar to your #2 but a little simpler.