The Multi-lingual Textbox concept

A few days back, one of the PMs in the SME division in Photon got in touch with me - they had a client who was asking for a multi-language capable textbox. The idea is that an user can type in a language they do not know or are learning(such as Portuguese) ; as they type, they get a dictionary of words and their meanings. They can choose a word and it should be highlighted.
The client was technical - so he had already created a basic textbox along with several Javascript classes to manage the dictionary. The problem was he wanted a textbox in which styles can be applied. Now, the basic HTML textbox does not let you style. The solution is to use a that would be editable.
The client thought we can use a cursor gif file (that is an artificial cursor) and then manipulate it back and forth as the user types. It was obvious to me that this approach would be difficult to maintain; further, the client also wanted to manage Arabic with Right-to-Left text using this approach.
So I researched a little bit and found that the div tag has a property in IE - called contentEditable. Setting this property to "true" has the effect of making it editable. Unfortunately this property is only available in IE (and in Safari, I think). Firefox won't work with it.
Firefox and other browsers try to implement such editable controls using a property called designMode. Setting designMode to "on" has the effect of making a control editable.
This kind of editable divs are, of course, the essence of any Content Management System (CMS). For example, most CMS have a Rich Text Editor (RTE); in fact the blogger window I am typing this in, is an RTE. Most RTE out there (even Google's mail composer) use the above two options - contentEditable in IE and designMode in Firefox.
Both the above properties are not part of any DOM standard.
Because I used contentEditable, handling Arabic was extremely easy - it was reduced to setting the dir property:

divTag.dir = "rtl";

There are a few gotchas about using these properties:

1. In Firefox, setting designMode to "on" has the effect of reloading the document. Typically you use an iframe to host the editable region. If you set designmode to "on" in the window load event handler, it will reload the document and refire the load event and so on in an infinite loop. I managed this by using a hack - making sure the document does not load twice by using a global flag.
2. In IE, the markup that IE generates for the inner HTML in the editable div is very non-standard. You can read more about this here:.

You can find more details on building an RTE using Mozilla from the Midas spec

here