Adding lined paper style to text with CSS.

[CreationsCentre]

OK so here is what I want to do:



I want to add lines to the text as the image shows. I've tried in CSS with a background image. That sort of works - it adds the lines behind the text, but the text is not in line with the lines. I've tried to change the line-height to compensate but the optimum I can use with it going all over the place is 30px (which roughly puts the text in the centre of two lines).

So it looks like this:



I've tried doing it with an image of the single line and space let for the text - that started with the top lines of text being far away from the lines, whilst towards the end of the paragraph, the text is touching the lines.

Next idea was to create an image with multiple lines and space and just put text onto that. That's worked but it still doesn't look totally right.

The CSS I'm using for this is:

.entry {
	font-family: "Times New Roman";
	color: #606161;
	font-style: italic;
	font-size: 15px;
	margin-top: -15px;
	text-align: justify;
	line-height: 30px;
}

.post {
	background-image: url('line.png');
}

.entry = text.

.post = enclosing class with text and post title.


Any help would be appreciated.

[fasterthanlight™]

This is an extremely hard effect to pull off.

Given that different operating systems handle fonts differently, and the fact that not all users have the same font-size, its practically impossible.

I would have suggested adding a repeating background image but you already did that.

however, you could give each line of text a <span> and do this:

<p>
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  </span>
<span>Mauris placerat pharetra justo. Pellentesque auctor.  </span>
<span>Aliquam pellentesque laoreet neque. Suspendisse potenti.  </span>
<span>Cras turpis nisi, varius vitae, consequat ut, adipiscing non, velit. </span>
</p>

p span {
display: block;
padding-bottom: 5px /*adjust as necessary*/
background: url(my_lines.jpg) repeat-x bottom;
}

but, you would then be committing each line of text to display exactly like that, and if a user increases their font-size, you'll get some weird stuff happening

[CreationsCentre]

Thanks for the reply.I forgot to mention that this is for a custom Wordpress theme - so I don't see how I would be able to do this for each and every post.

[koolkrasher]

jus thinking out loud here but what if u gave the post class a p property

.post p{
bottom-border:1px solid #0000ff;
}

so every time u break to a new line it will carry over the line under the text and should flow to the edge of the div it sits in. i would imagine you would adjust the line height to tighten/space the lines up. maby that will help u out a bit

[fasterthanlight™]

^ Won't give you the desired effect, it would have the same problem as my "solution"... if a user increases the font-size and a few words start jumping to new lines, you're in for a wild ride...

but its better than nothing :/

[Templarian]

I did this with javascript once. It actually wasn't difficult at all, but weird in that you have to make a bunch of background images.

1px wide by 18px to 40px

where 18px to 40px is the desirable hight between each line. Your actual dot on the line may be anywhere on the 1px narrow line as line height will effect its exact positioning.

Example (blown up version, real one with be 1px):


Then in your JS you find the Height of a defined hidden element.

var h = document.getElementById("test").clientheight/2;
document.getElementById("test").class = "line_" + h;

<div id="test">t<br />t</div>

I did not test this, but I have an exam at 8am so I have to go to bed. After the exam if no one showed you I'll type it up. In the real version you would be changing out a document.getElementById("content").class = "content line_20"; see how here it would be a parent of test that way all content areas are effected

then in your css:

.line_20 p{background:url(img/line_20.png)}
.line_21 p{background:url(img/line_21.png)}
ect...

//edit, that made sense to me, don't know if it will help you.

[CreationsCentre]

^ If you could write this up for me properly that would be great... seeing as though I've never actually used javascript before. Thanks.

[simplistik]

Ummm ... well ... you don't need JS to do it, and it's not as difficult as you think. It's called designing on a baseline, it's more used in print but can be translated to the web, but it's more restricted on the web. You just need to have a good understanding of font sizes, line heights and margins and it's not restricted by different system fonts really. Here's an example that I just put up:

http://dev.beyondthepixel.com/_lab/kirupa_baseline/

[fasterthanlight™]

Yea ^

I just wish there was a way to do this that won't bork it all up when you increase font sizez

[simplistik]

Yea ^

I just wish there was a way to do this that won't bork it all up when you increase font sizez

Yea shouldn't really matter though really, not many people increase their font size, if the font size is already legible. Using a whole bunch of javascript IMO is a much worse solution.

[Templarian]

We'll in my method the JS auto corrects for font size change, so if JS disabled it doesn't really matter as its just overwriting the defaults.

Sorry I took a nap before the party so I don't have time to code it so maybe later tomorrow if I find time.

[CreationsCentre]

Thanks everybody. Simplistik, I think I'll give yours a go. I'm not really comfortable with javascript. But also knowing how to do it in javascript would be good too for future reference. Thanks again.

[Templarian]

I coded it yesterday, see this is why your suppose to badger someone so they remember to post the source. I coloured the lines the same as in your example.

Example:
http://www.kirupa.templarian.com/index.html
http://www.kirupa.templarian.com/lines.zip

Small Flaw:
The problem is that I don't know where to put this, remember you can't get height from it if its floated or positioned absolute.

<div class="page" id="source"><p>1<br />2</p></div>

Don't forget to set a default just incase javascript is disabled, for example:

<div class="page line_20" id="page"><p>text text text</p></div>

[simplistik]

Have to admit, that's pretty hot, still don't agree w/ using javascript to do it, but still pretty hot nonetheless. Having to have the "sample" paragraph kinda sucks.

Also for your flaw you can fix it by making a container for it and positioning the container. It will keep the source element it's default attributes. So you could do:

<div style="visibility: hidden; position: absolute; left: -999em;">
<div class="page" id="source"><p>1<br />2</p></div>
</div>

but of course w/o inline styling should work ... in theory. the left would only be to reduce the chance of flicker. you could even get rid of visibility: hidden and only use left if you wanted, would prolly help you from getting black listed

OR you could just comment it out:

<!--
<div class="page" id="source"><p>1<br />2</p></div>
-->

since commenting is strictly html display based javascript will prolly still read it as if it's there.

[Templarian]

I didn't think about putting it in another div. I'm gonna try that and update the examples.

Fixed, and it works perfectly. Also the flicker effect is just caused because I only have it recheck the text height ever half a second. If you lower the number the flicker goes away.