Lined Textarea

HTML & CSS
1

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?


<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

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

Setting display:inline for P allows this to work.

Maybe this solution could keep us both happy? http://stevenyork.com/tutorial/accessible_pixel_perfect_font_sizing_using_percentages_and_ems

4

Not here, at least not in Opera… or FF… Works in IE8 and 9 though.

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

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?