Why is having a HTML-based Urdu editor so important? After all you could just set a few attributes of the HTML textarea element and you could start typing away both Urdu and English. The input language changes with the keyboard layout selected. As it turns out, this arrangement is not available to the Windows 98 users who still constitute the majority of computer users in Pakistan and probably in India too. The web-based Urdu Pad created by Urdu Life has proved highly popular in the Urdu community. Even many Windows XP and Windows 2000 users use Urdu Pad because of its easy to use and intuitive interface. You do not have to switch keyboard layouts. Instead you can just toggle the input language using the radio buttons. The key mappings, which are similar to those provided by the Urdu phonetic keyboard, are said to be similar to those present in the InPage Urdu composing system.
I am distributing the Urdu Editor component under GPL.
The Urdu Editor is different from Urdu Pad in that you can place as many single-line and multi-line Urdu enabled edit areas on your web page. The keyboard control is not tightly coupled with any one specific edit area. It sends characters to the edit area which currently has focus.
Include the following line in you HTML code before you can use the Urdu Editor:
As is shown by the semantics, cssPath is the relative path to the UrduEditor.css file. The function initUrduEditor initialises some variables and event handlers.
After the necessary initialisation, there are more than one ways to create an Urdu edit area in you web page. One possibility is to call the writeUrduEitor function. This function has the following semantics:
WriteUrduEditor(id, rows, cols, pointsize);
id is the identifier assigned to the edit control. The rows parameter determines height of the edit control. An input element of type text is placed if rows is equal to one, otherwise a multi-line textarea is created. The width of edit control is determined by the cols parameter and the pointsize parameter sets, well, the point size of the edit area. The Urdu Editor uses the Urdu Naskh Asiatype font. Use of this font makes sure that Urdu Editor also works in Windows 98.
There are situations where you may want to customize the edit areas of existing web pages. An existing edit area can be converted to an Urdu Editor control by carrying out the following steps:
- Assign an id to the edit control if it already does not have one
- Set the attributes @lang=”ur”@ and @dir=”rtl”@
- Apply the appropriate style e.g. @style=”font-family:Urdu Naskh Asiatype; font-size:16″@
- set the event handler, @onfocus=”setEditor(this)”@
- set the keypress event handler, @onkeypress=”processKeypresses()”@
- set the event handlers @onclick=”storeCaret(this)” onkeyup=”storeCaret(this)”@
I have provided a function @makeUrduEditor(id, pointsize)@ which does almost all of the above for an edit control identified by @id@. Strangely enough, setting the @onfocus@ event does not work with @makeUrduEditor@. Therefore onfocus must be manually set as described above.
The keyboard control has a table-based layout. As you can see from the source code, it expands or shrinks to fit the space provided. How the keyboard control appears on screen and how easily it is accessible for all edit areas depends on how the web page was designed. The toggle language buttons are also part of the keyboard control. Calling the @writeKeyboard@ function creates the keyboard control.
Example: Integration into phpBB
Our friend Qadeer was especially getting impatient to get his hands on the Urdu Editor because he wanted to integrate it with phpBB. In his opinion such a control would go a long way in promoting Urdu on the net. We have to wait and see if he his prognosis is right. I successfully integrated the Urdu Editor inside phpBB’s post page. I am including the modified template file posting_body.tpl in the download. First of all I copied the files UrduEditor.js and UrduEditor.css into the folder templates/subSilver/ and then added the reference to UrduEditor.js to the posting_body.tpl template file. Following shows the inclusion of the reference to the UrduEditor.js file and the call to the initUrduEditor function.
There are two single-line edit controls and one textarea element on the posting page. The single line edit control correspond to the user name and the subject fields and hence are assigned name values of “username” and “subject”. As described above, I assigned id’s to both edit fields which were the same as their names. I also added the onfocus event handler. The final touches are given by the makeUrduEditor function call as shown in the following:
The multi-line textarea element receives the actual message post text. The only customisation required in this case is the assignment of the id as well as the setting of the event handlers @onfocus@ and @onkeypress@.
The elements on the post page are arranged using a table-based layout. I added another table row and a table cell where I inserted the keyboard control using the follwing code:
The following figure shows the results of the customisation of the post page.
There is still lots of room for improvement. Possible improvements include opening the keyboard control in a separate modeless dialog, a better color scheme of the keyboard layout, adding more key codes and diacritics etc. You are most welcome to take the provided source code apart and introduce enhancements. My request is just to notify me of any new feature that you add or make it yourself available to the others.