Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.


Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: Adding lined paper style to text with CSS.

  1. #1

    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.

    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.

  2. #2
    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:

    HTML Code:
    <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 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
    Last edited by fasterthanlight™; April 23rd, 2008 at 12:08 PM.

  3. #3
    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.

  4. #4
    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
    Last edited by koolkrasher; April 24th, 2008 at 02:18 PM.

  5. #5
    ^ 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 :/
    Last edited by fasterthanlight™; April 24th, 2008 at 11:26 PM.

  6. #6
    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)}

    //edit, that made sense to me, don't know if it will help you.
    Last edited by Templarian; April 25th, 2008 at 12:05 AM.

    Join #kirupa | Click the ƒ under my Username | CL | Jeff

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

  8. #8
    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:

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

  9. #9
    Yea ^

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

  10. #10
    Quote Originally Posted by fasterthanlight™ View Post
    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.
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  11. #11
    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.

    Join #kirupa | Click the ƒ under my Username | CL | Jeff

  12. #12
    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.

  13. #13
    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.


    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>
    Last edited by Templarian; April 28th, 2008 at 02:37 PM.

    Join #kirupa | Click the ƒ under my Username | CL | Jeff

  14. #14
    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:
    HTML Code:
    <div style="visibility: hidden; position: absolute; left: -999em;">
    <div class="page" id="source"><p>1<br />2</p></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:
    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 Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  15. #15
    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.
    Last edited by Templarian; April 28th, 2008 at 07:16 PM.

    Join #kirupa | Click the ƒ under my Username | CL | Jeff

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Home About kirupa.com Meet the Moderators Advertise

 Link to Us


Copyright 1999 - 2012