SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Lined Textarea

  1. #1
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lined Textarea

    I'm trying to create textarea input that is lined - much like the way a ruled notepad is. I'm after a dashed line that appears equidistant between the top and bottom of each line of text displayed. I've managed to get the effect working on a paragraph tag but can't seem to get the textarea to do the same - as shown in the code below.

    Is it possible to do this in a textarea or should I bite the bullet and just use a background image?

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    	textarea, p{
    		font-family: georgia;
    		font-size: 16px;
    		line-height: 200%;
    		display:inline;
    		border-bottom: black 1px dashed;
    		padding: 0 0 6px 0;
    	}
     
    	textarea {
    		outline: none;
    		resize: none;
    		border: none;
    		overflow: auto;
    	}
    </style>
    </head>
    <body>
     
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam metus, gravida in luctus sit amet, venenatis nec massa. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at tellus nisl, eget molestie lectus. Quisque semper condimentum lectus, quis faucibus eros varius eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vel orci ac urna dignissim tincidunt vitae a enim. Cras lobortis vehicula diam, et semper leo ullamcorper vitae. Mauris tincidunt luctus quam id imperdiet. In sed lacus vitae lorem facilisis ullamcorper a vel nibh. Nullam molestie nibh ut odio malesuada accumsan. Donec pulvinar commodo augue, in faucibus nisi lacinia in. Vestibulum facilisis felis sed metus fermentum fringilla. Etiam venenatis magna in nulla sagittis vel convallis mi blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <br /><br /><br /><br />
    <hr />
    <br /><br /><br /><br />
    <textarea rows="10" cols="100">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam metus, gravida in luctus sit amet, venenatis nec massa. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at tellus nisl, eget molestie lectus. Quisque semper condimentum lectus, quis faucibus eros varius eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vel orci ac urna dignissim tincidunt vitae a enim. Cras lobortis vehicula diam, et semper leo ullamcorper vitae. Mauris tincidunt luctus quam id imperdiet. In sed lacus vitae lorem facilisis ullamcorper a vel nibh. Nullam molestie nibh ut odio malesuada accumsan. Donec pulvinar commodo augue, in faucibus nisi lacinia in. Vestibulum facilisis felis sed metus fermentum fringilla. Etiam venenatis magna in nulla sagittis vel convallis mi blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </textarea>
     
    </body>
    </html>

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Your example code does NOT do what you describe for paragraph, nor can textarea do that since it's a input-level box. That border-bottom would only appear AFTER the ENTIRE block (P or textarea) and not each line. That's not what border DOES. The only real way to accomplish what you are asking is to switch to px metric fonts, declare an exact line-height, and then repeat an image background behind it.

    Which pretty well throws accessibility in the trash. Which of course you've already done saying font-size:16px on them in the first place.

  3. #3
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Your example code does NOT do what you describe for paragraph, nor can textarea do that since it's a input-level box. That border-bottom would only appear AFTER the ENTIRE block (P or textarea) and not each line.
    Setting display:inline for P allows this to work.

    Quote Originally Posted by deathshadow60 View Post
    The only real way to accomplish what you are asking is to switch to px metric fonts, declare an exact line-height, and then repeat an image background behind it.

    Which pretty well throws accessibility in the trash.
    Maybe this solution could keep us both happy? http://stevenyork.com/tutorial/acces...ntages_and_ems

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanKing1809 View Post
    Setting display:inline for P allows this to work.
    Not here, at least not in Opera... or FF... Works in IE8 and 9 though.

    Quote Originally Posted by RyanKing1809 View Post
    Maybe this solution could keep us both happy? http://stevenyork.com/tutorial/acces...ntages_and_ems
    The moment you see ANYONE using that 62.5% routine, it's bull. Broken buggy non-functional bull... as a 120 dpi/large font windows user, EXACTLY the target audience for saying things in %/EM, that IDIOTIC NONSENSE doesn't work here.

    Since 62.5% doesn't equal 10px for those you're supposed to be using %/em for in the first place -- it could equal 7.5px, it could equal (as it does on my computer) 12.5px... That's what %/em is FOR -- trying to even THINK about a 1:1 relationship between them is broken methodology and a failure to understand why you're even supposed to be using %/em in the first place.

    Though... CSS3's background-size might be able to help on that -- you could screen cap a 1 line-height element to figure out how many PX it's rendering at, make an image to tile, then background-size: 100% 24px; to scale the image to fit properly. Wouldn't work in IE8/lower, but not having them line up there might not be the end of the world... or you could just use a filter instead of a background for them... no, the filter only does full scaling and not dimensional. Bugger.

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm... works with my firefox.


    Anyway. Maybe I could script it in? Or will that also have accessibility issues?

    Or is there a way to detect & set up different styles for those using accessibility doodads?


Bookmarks

Posting Permissions

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