CSS Styling Text Areas Like Notebook-Look

CSS Styling text areas like notebook-look

Here's probably what you looking for:

line

<style type="text/css">textarea { background: url(http://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;}
</style><textarea>    Textarea with style example    Line 1    Line 2    Line 3    Line 4    Line 5    Line 6    Line 7    Line n</textarea>

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

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.

make text area like notepad JavaFX

Approach

Create a lined linear gradient background for the content portion of a TextArea.

-jewelsea-lined-notepad:
    linear-gradient(
        from 0px 0px to 0px 11px,
        repeat,
        gainsboro,
        gainsboro 6.25%,
        cornsilk 6.25%,
        cornsilk
    );

Implementation Notes

The tricky part is having the lines in the linear gradient line up with the lines of text. I thought it would be a simple as specifying the gradient size as 1em (e.g. 1 measure of the font size per line), but that didn't allow the gradients to align. So I just specified the gradient in absolute pixel sizes (found by trial and error). Unfortunately, with this approach, as you change fonts or font sizes for the text area, you need to adjust the values in the gradient manually. But other than the sizing difficulty, it seems to work well.

References

JavaFX CSS Reference Guide.
modena.css - default JavaFX CSS stylesheet.

Sample Output

death and taxes

Sample Solution

Notepad.java

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Notepad extends Application {
    @Override
    public void start(Stage stage) {
        TextArea textArea = new TextArea();
        Label title = new Label(
                "Benjamin Franklin: Selected Quotes"
        );
        title.getStyleClass().add("title");

        VBox layout = new VBox(
                10,
                title,
                textArea
        );
        layout.setPadding(new Insets(10));
        VBox.setVgrow(textArea, Priority.ALWAYS);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(getClass().getResource(
                "notepad.css"
        ).toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

notepad.css

.root {
    -jewelsea-lined-notepad:
        linear-gradient(
            from 0px 0px to 0px 11px,
            repeat,
            gainsboro,
            gainsboro 6.25%,
            cornsilk 6.25%,
            cornsilk
        );
}

.title {
    -fx-font-size: 16px;
}

.text-area {
    -fx-font-family: "Comic Sans MS";
    -fx-font-size: 15px;
}

.text-area .content {
    -fx-background-color: -jewelsea-lined-notepad;
}

.text-area:focused .content {
    -fx-background-color:
        -fx-control-inner-background,
        -fx-faint-focus-color,
        -jewelsea-lined-notepad;
}

Styling Textarea with Background that Scrolls with Text?

Maybe:

<html>
  <head>
    <style>
      #fake_textarea{
        width:925px; 
        min-height:100%;
        background-repeat: repeat-y;
        background: url(http://www.artsinmotion.net/notebook_paper.jpg);
        padding-left:100px;
        font-family:arial;
      }

      #wrapper{
        width:1025px; 
        height:500px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id='wrapper'>
      <div id='fake_textarea' contenteditable></div>
    </div>
  </body>
 </html>

Ruled lines in input field

You could make use of CSS3 repeating-linear-gradient, which is just like a regular linear-gradient but makes unending repeats easy.

Use this to generate a gradient background on a textarea with hard one-pixel color-stop for the color of rule that you want it to have.

Example:

label, textarea {  font-family: sans-serif;  font-size: 15px; line-height: 27px;  padding: 0px 5px; margin: 8px; }label { font-weight: bold; }textarea {  border: none; outline: none;  background: repeating-linear-gradient(    to bottom, transparent, transparent 26px, #33d 27px  );  background-attachment: local;}

<label>General Business Information</label><br/><br/><textarea rows="8" cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </textarea>

Show page lines in a textarea

The easiest way to achieve this is to create a simple PNG-image containing a horizontal line and use it as a repeating background on your textarea.

I created a simple example: http://jsfiddle.net/r4c2a/1/

Step by step, what you should do is:

Create a repeating pattern image.
Create your textarea.
Use CSS to define the line-height of the image and make it as high as your pattern is.
???
Profit

Of course, this is just a rudimentary example and you can style it pretty much any way you want it to look.

CSS Styling Text Areas Like Notebook-Look