Textarea-like Markup in WordPress.com Posts

Have you ever wanted to place a portion of one of your wordpress.com blog posts in its own textarea, using scrollbars? The obvious thing to do is to use an html textarea. Unfortunately, it appears to be very difficult to get line breaks to work correctly in text areas. I spent quite a bit of time searching the web to figure out how to get line breaks to work within a textarea, and most solutions required some sort of scripting language, which is not allowed in wordpress.com blogs. After trying many different things, I stumbled across some textarea-like markup that does not require scripting. (I’m refering to the markup as textarea-like because it doesn’t actually use the textarea tag.) I will give two scenarios using that markup below.

The first example uses pre-formatted text. A horizontal scrollbar is used if the pre-formatted text is wider than the post. The required markup is:

<pre style="border: 1px solid black; overflow: auto; width: 100%; height: 100%"><!-- YOUR TEXT HERE --></pre>

An example using that code is:

xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx
yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy yyyyy

In the next scenario we wish to limit the height of the emulated text area but are no longer using pre-formatted text.

<p style="border: 1px solid black; overflow: auto; width: 100%; height: 80px"><!-- LINE 1 OF YOUR TEXT -->
<!-- LINE 2 OF YOUR TEXT -->
<!-- LINE 3 OF YOUR TEXT ... -->

An example of that markup is:

aaaaa
bbbbb
ccccc
ddddd
eeeee
fffff
ggggg
hhhhh
iiiii
jjjjj
kkkkk
lllll
mmmmm
nnnnn
ooooo
ppppp
qqqqq
rrrrr
sssss
ttttt
uuuuu
vvvvv
wwwww
xxxxx
yyyyy
zzzzz

~ by Ryan Lefever on March 17, 2007.