The forums have permanently moved to
forum.kirupa.com. This forum will be kept around in read-only mode for
archival purposes. To learn how to continue using your existing account on the new forums,
check out
this thread.

Hybrid View

Adding lined paper style to text with CSS.

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.

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

HTML Code:

.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

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

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:

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.

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:

HTML Code:

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

Let us live so that when we come to die even the undertaker will be sorry. - Mark TwainDon't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.