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

Advertisements

~ by Ryan Lefever on March 17, 2007.

3 Responses to “Textarea-like Markup in WordPress.com Posts”

  1. All right, that is what i have been looking for.
    Thanks

  2. Thank you!!!!!!

  3. […] You can find that post here. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: