A text
area is a basic HTML form element that is used to allow for large amounts
of text to be typed in. They are seen all over the place from forms that ask
for your address to forms that ask for a comment from you. The problem with
most of these text areas is that they are very boring and only allow for standard
text to be placed in the box. What if you want text that has some formatting,
whether that means adding text in bold or maybe italics,
a standard text area does not allow you to do that. That is where some of
the new tools on the internet can help... Here
is a link to the official specifications of the text area as defined by the
World Wide Web Consortium.
Sample Text Area
This article is going to give a few examples of some of the options out there.
This is by no means a definitive guide, since things are always changing.
There are always new ways to do things on the internet. I am going to discuss:
A
feature in several of the newer browsers is the ability to set an iFrame to
Design Mode, this mode allows a user to type in text in a field with advanced
formatting. That just sounds great, but there are problems. The first problem
is the fact that this feature is not available in all browsers (compatible
browsers: IE5+/Mozilla 1.3+/Mozilla Firebird/Firefox 0.6.1+/Netscape 7.1+).
Missing in this list is any Mac based web browser and also Netscape 7.0 and
below, I mention this because in my job with the US Army, they have not installed
Netscape 7.1 or above yet.
As you can see in the sample above, it is not difficult to create an interface
that resembles Microsoft Word. The image is taken from this site: (http://www.kevinroth.com/rte/demo.php)
The code on this site will help you set up a rich text area, along with all
the images for the buttons on the top. I have used a modification of the code
on this page in several locations, the modification is usually to take out
some of the buttons that I do not want to allow users to use, like changing
the font size and color.
Wait, that is not all the problems yet. One of the more difficult problems
is that different browsers create different code to display the same text.
For instance, one browser might make something bold by using the <b>
and </b> tags while another browser might accomplish the same effect
with the <strong> and </strong> tags. Most people would say, who
cares, as long as it looks right. But that is where part of the problem comes
in, if you create something on one browser and save it away, then reload it
on another page in a different browser, the second browser might not be able
to edit all the content. Along with this issue, not allow browsers write well
formatted HTML. For instance, Internet explorer creates lists by doing this:
<ul>
<li>Item 1
<li>Item 2
<li>Item 3</li>
</ul>
Notice that each of the items are missing the </li> except for the
last element. Once again, this is not something that will mess up most things
since most web browsers can figure out what is meant. Where I had more problems
is when I wanted to convert an HTML string into PDF or RTF, because they expect
all the elements to be well formed.
There are a few other minor issues with this, but most people will not see
the problems 95% of the time. One of the last features/benefits/problems is
the ability to copy and paste directly from Microsoft Word. This is a nice
feature because if someone already had something types up, it is easy to paste
into this box and get the same formatting. At the same time, Microsoft Work
writes some of the worst HTML code that I have ever seen. The program adds
in all sorts of tags that are not really needed. Where this fits in is that
the text with formatting that is pasted into the box retains the Microsoft
Work HTML markup in all it's glory. There are ways to disable pasting text
into the box, but that is not really a good solution.
Macromedia
flash is a great little plug-in that most modern browsers come with by default,
that is because it is so useful. I have been using flash in various projects
for many years now, but I have not gotten a chance to use it in a while now.
Flash also has a solution to this problem of advanced rich text formatting.
There are some built in controls in the Macromedia Flash environment that
allows designers to create something very much like I have been discussing
in the previous sections.
The problem is this, the controls are only available in Macromedia Flash,
thus you would need to create you own flash file in order to use a solution
like this. For some reason, I have not been able to find any standalone flash
files that could be used for this sort of purpose. Currently, I do not have
access to the Flash development environment, thus I have not been able to
test out the features that would enable the creation of a rich text area.
I am hoping that in the near future, I will get the chance and be able to
create something that is generic enough that many people could use.
At this website, http://www.joshdura.com/,
there is a drop in flash component for use in the flash development environment
This makes creating the flash file fairly easy, but it still does not create
a flash movie that can be used in many places. So it is a start, but there
is still some rome for growth.
Standard Textareas with Tagging
Tagging
is the process of taking some standard text in a text box and adding in some
fake tags that then interpreted when the text is served from the web server
to the web browser. On the right is an example of some text that has been
tagged, as you can see, this method does not use standard HTML tags in the
actual text (mainly because of display issues when a given person goes back
to edit the text), instead you have some fake tags that look similar and act
similar. Already there is one problem with this interface, the person editing
the text can not see what the final text will look like, and also it can be
difficult to work around the tags.
This image was taken from a forum posting software that I have seen on many
sites. If you were entering text and you wanted to make something bold there
are three ways to do it. The first way is to type up all the text then select
the text that you would like to be bold and then get the
B button on the top. It would then add the [B] and [/B] around
the selected text. Secondly you can press the B button with
nothing selected, then a dialog box comes up asking you for text that you
would like to have bold. The final way is to use the enhanced
mode, what this does is that when you press the B for the
first time, it just inserts a [B] tag. Then you keep on typing and when you
want to end the bold, you press the B again to have it add
a [/B] tag.
As you can see, it is not difficult to use, but it can be more difficult
to visualize the final text than the previous examples. The advantage of this
method is that everything is done with javascript, so there is a lot more
control over the tags that are inserted. Once you reach this style of tagging,
it is not far away from people just entering in their own HTML code, which
chances are you are trying to stay away from because you do not want people
to have to worry about tagging and instead just worry about the text and the
way it looks.
So what
do I use? In my searching, I have not found just the right one but in the
mean time, while I am still searching, I will use the browser based rich text
area described in the first section. Even though there are limits and not
every browser supports the features that it uses, it is still the best alternative
out there. What I want though is a nice Flash based editor that I can drop
into any page I need it to, pass some parameters for it and have it return
the HTML string well formatted. In the end, I might just have to look at creating
this component for myself since I have not found it and it seems like most
people do not want to do this since Macromedia already offers most of the
needed components, just not in an easy to use way. I will keep searching,
and if I have time maybe I will start playing around and see what I can come
up with...
A text
area is a basic HTML form element that is used to allow for large amounts
of text to be typed in. They are seen all over the place from forms that ask
for your address to forms that ask for a comment from you. The problem with
most of these text areas is that they are very boring and only allow for standard
text to be placed in the box. What if you want text that has some formatting,
whether that means adding text in bold or maybe italics,
a standard text area does not allow you to do that. That is where some of
the new tools on the internet can help... 
A
feature in several of the newer browsers is the ability to set an iFrame to
Design Mode, this mode allows a user to type in text in a field with advanced
formatting. That just sounds great, but there are problems. The first problem
is the fact that this feature is not available in all browsers (compatible
browsers: IE5+/Mozilla 1.3+/Mozilla Firebird/Firefox 0.6.1+/Netscape 7.1+).
Missing in this list is any Mac based web browser and also Netscape 7.0 and
below, I mention this because in my job with the US Army, they have not installed
Netscape 7.1 or above yet.
Tagging
is the process of taking some standard text in a text box and adding in some
fake tags that then interpreted when the text is served from the web server
to the web browser. On the right is an example of some text that has been
tagged, as you can see, this method does not use standard HTML tags in the
actual text (mainly because of display issues when a given person goes back
to edit the text), instead you have some fake tags that look similar and act
similar. Already there is one problem with this interface, the person editing
the text can not see what the final text will look like, and also it can be
difficult to work around the tags. 
So what
do I use? In my searching, I have not found just the right one but in the
mean time, while I am still searching, I will use the browser based rich text
area described in the first section. Even though there are limits and not
every browser supports the features that it uses, it is still the best alternative
out there. What I want though is a nice Flash based editor that I can drop
into any page I need it to, pass some parameters for it and have it return
the HTML string well formatted. In the end, I might just have to look at creating
this component for myself since I have not found it and it seems like most
people do not want to do this since Macromedia already offers most of the
needed components, just not in an easy to use way. I will keep searching,
and if I have time maybe I will start playing around and see what I can come
up with...