How can I show lines in a textarea to make it look like notepad?

Question

I need to show lines in my text-area to make it look a like notepad. I have a single text-area only. The below notepad is for reference.

enter image description here

.box{ background:#ffffff url(image.gif) no-repeat left; text-align:center; } Try this — Deepak Kumar, Feb 15 '12 at 08:05

Simon · Accepted Answer · 2013-02-02T22:16:00.510

12

Here's an idea: http://www.bookofzeus.com/articles/css-styling-textarea-give-notebook-notepad-look/

In short: set a background-image and set line-height to whatever line height the image is using.

edited Feb 02 '13 at 22:16

answered Feb 15 '12 at 08:07

Simon

3,667
1
35
49

You have to make sure to get the image exactly right, though. The examples others have posted break after a few lines. And the example you posted breaks as soon as there is a scrollbar. – DisgruntledGoat Feb 15 '12 at 15:04
Getting it not to break is definitely the challenge here. I have not tried this myself, but I would suspect that if you created an image 20px high, repeated that as a background-image and set the line-height to 20px as well it should align. I guess you would also want to stay away from too large `inline-block`s in the content, which might potentially shift the line-height a couple of pixels down. – Simon Feb 15 '12 at 16:33
2

The background also needs to move when scrolling, too. Otherwise you can scroll half a line and the text is over the lines, not the between the lines. – DisgruntledGoat Feb 15 '12 at 16:37

score 11 · Answer 2 · answered Feb 15 '12 at 08:08

11

You can do this with CSS styling, based on your image, you can do this:

textarea#area {
    width: 300px;
    height: 400px;
    padding: 0 0 0 20px;
    line-height: 30px;
    background: #fff url("https://i.stack.imgur.com/UfzKa.jpg") no-repeat -75px -160px
}

See the example fiddle here

answered Feb 15 '12 at 08:08

epoch

16,396
4
43
71

Looks nicer if you can see the whole image: http://stackoverflow.com/a/9289821/956397 – PiTheNumber Feb 15 '12 at 08:24

PiTheNumber · Answer 3 · 2012-02-15T08:24:26.090

2

This should get you started:

HTML

<textarea class="text">some text</textarea>

CSS

.text {
    background: url(https://i.stack.imgur.com/UfzKa.jpg);
    height: 664px;
    width: 495px;
    line-height: 29px;
    padding-top: 136px;
    padding-left: 120px;
}

Demo http://jsfiddle.net/ptpgb/4/

edited Feb 15 '12 at 08:24

answered Feb 15 '12 at 08:08

PiTheNumber

22,828
17
107
180

5

Why? Use a background image, that's what it's there for! – Madara's Ghost Feb 15 '12 at 08:10
Downvote removed. Don't be scared of downvotes, think of them as constructive comments to help you improve. If your answer is not helpful/incorrect, you'll be downvoted and notified of it. That's why I always leave a comment when I downvote. Happy editing! – Madara's Ghost Feb 15 '12 at 08:22
3

The [FAQ](http://stackoverflow.com/privileges/vote-down) says "Downvoting should be reserved for extreme cases". So I only use it if something is really wrong. Not for "working but ugly" cases. – PiTheNumber Feb 15 '12 at 08:46

score 1 · Answer 4 · answered Feb 15 '12 at 08:10

1

Try this one as well

<style type="text/css">
textarea {
 background: url(/source/notebook.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>

Hope this helps.

answered Feb 15 '12 at 08:10

Deepak Kumar

672
4
15
31

May be we both struck the link at same time. I first tried if its working and then posted here. – Deepak Kumar Feb 15 '12 at 08:16
sure, I was not saying it with a bad intention, was just saying :). – epoch Feb 15 '12 at 08:19

score 0 · Answer 5 · answered Feb 15 '12 at 08:08

0

Adding a background image via CSS should work.

textarea{ background-image:url(notepad.png); color:ff0000; }

look at here

answered Feb 15 '12 at 08:08

CyrillC

557
1
3
15

score 0 · Answer 6 · answered Feb 15 '12 at 08:14

You can check try

<textarea class="notepad"></textarea>

.notepad {
 background: url(https://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

http://jsfiddle.net/FzFaq/1/

How can I show lines in a textarea to make it look like notepad?

6 Answers6

Linked