I wrote Urdu WebPad earlier this year, which is effectively an open source version of the Urdu Pad from urdulife.com. This is a web-based editor that allows the editing of Urdu text without the need of installing Urdu keyboard and language support on the computer. It works with Internet Explorer and FireFox. Urdu WebPad is fairly easy to integrate in web applications . The first Unicode Urdu forum Urdu Mehfil is a well-known example of the use of Urdu WebPad. The keyboard mapping provided by Urdu WebPad is that of the Phonetic Urdu keyboard. An on screen keyboard assists in entering Urdu text.
I have been thinking about incorporating multiple keyboard layouts in Urdu WebPad. Such a feature would benefit those accustomed to other keyboard layouts as well as other local languages such as Pashto and Sindhi. I got the inspiration for this idea from Unipad. This feature has to be accompanied by an on-screen keyboard which would reflect the currently selected keyboard layout. The result of the this work is Urdu OpenPad. The word OpenPad hints at the openness of the editor. It is now possible to incorporate custom keyboard layouts for web-based editing.
Unipad Keyboard Definitions
Unipad supports multiple keyboard layouts and it allows the definition of custom keyboard layouts. Figure 1 shows the virtual keyboard layout used by Unipad. The details of how to define a new keyboard layout in Unipad can be found here. As can be seen there, Unipad used a four state keyboard i.e. normal, shift, Alt Gr and shift+Alt Gr states. Alt Gr key is found on some non-English keyboards and it is equivalent to the Ctrl+Alt key combination.
Figure 1 – Virtual key map used by Unipad
OpenPad Keyboard Definitions
I have decided to implement a three-state keyboard mapping i.e. normal, shift and Alt Gr states. This should be sufficient in most of the cases. I had to implement Alt Gr differently for Internet Explorer and FireFox because of the different ways handling of shift keys in these browsers. Alt Gr is equivalent to Ctrl+Alt in Internet Explorer and to Crtl+Shift in FireFox for Urdu OpenPad users.
Defining and adding a new keyboard mapping is very easy in Urdu OpenPad. All you have to do is to create an array of Key type objects. An object of type Key contains a single key mapping. It should contain at least the information about the normal key state and it can contain up to three key states. Following is the syntax of defining a key mapping.
Mapping[KeyCharacter]=new Key(x, [y], [z]);
Where;
x:= Normal key state
y:= Shift key state
z:= Alt Gr key state
The following shows a section of the Urdu Phonetic key-mapping included in Urdu OpenPad:
var UrduPhonetic= new Array();
UrduPhonetic['a']=new Key(0x0627, 0x0622);
UrduPhonetic['b']=new Key(0x0628, 0x0628);
UrduPhonetic['c']=new Key(0x0686, 0x062B);
.
.
Having completed the keyboard-mapping, it then has to be added to the list of available keyboard layouts inside the InitUrduEditor function as shown in the flowing:
KeyMaps["UrduPhonetic"]=UrduPhonetic;
All that remains is to set the current keyboard layout used in the editor with the following function call:
setKeymap("UrduPhonetic");
I am including three keyboard mappings, one each for Urdu Phoentic, Sindhi and Pashto. I used the Unipad keyboard mappings of Sindhi and Pashto.
On-Screen Keyboard
I have tried to model Window’s on-screen keyboard as closely as possible. Its display changes to reflect the shift keys pressed. The user can also click directly on the Shift or the AlrGr key. In that event, the on-screen keyboard remains in that state until the user clicks another button or presses some key. A small bar above the on-screen keyboard shows the help. I have used the Tahoma font for displaying characters in on-screen keyboard because it contains support for most of the languages based on the Arabic script. There may be mistakes in the on-screen display as well as in the implementation of the key mappings of Sindhi or Pashto. Unfortunately I cannot check this since I am not conversant with either of these languages. I hope, however, that soon Sindhi and Pashto speaking brothers and sisters will pounce onto these mistakes and inform me about these. Following figures show the keyboard layouts that come with Urdu OpenPad.
Figure 2 – Normal Urdu Phonetic Keyboard
Figure 3 – Shift State of Urdu Phonetic Keyboard
Figure 4 – Normal Sindhi Keyboard
Figure 5- Shift State of Sindhi Keyboard
Figure 6- Normal Pashto Keyboard
Figure 7- Shift State of Pashto Keyboard
Figure 8- Alt Gr State of Pashto Keyboard
Enhancements over Urdu WebPad
Following is the list of changes in Urdu OpenPad compared with Urdu WebPad:
- English digits are used also in Urdu mode for Urdu Phoentic.
- Now each OpedPad edit-control (single- or multi-line) handles its language mode separately instead of having a global language setting for all edit controls.
- Some bugs are fixed for working with FireFox.
- Urdu Phonetic keyboard contains both single and double, left and right quotes
- It is possible to set different fonts and point sizes of the OpenPad control. This can be seen in the included demos.
- Each OpenPad control gets a pale yellow background to distinguish it from the other controls on the web page.
Fonts
I have used many fonts in one of the demos included in the download to demonstrate the capability of setting fonts of the editor control. I have included on Sindhi (MB Sindhi Web) and one Pashto font (Pashto Kror Asisatype). The Tahoma font also contains supports for Sindhi and Pashto. You can find many other Unicode fonts for Sindhi and Pashto here. Figure 9 shows the use of Nafees Nastaleeq font in OpenPad editor control.
Figure 9- UsingNastaleeq Font in Urdu OpenPad
FireFox Issues
For some inexplicable reason, FireFox would not display diacritics (aerab) in their isolated forms inside the on-screen keyboard. That is why I had to add the character alif to the diacritic to make it appear properly. The result is shown in Figure 10.
Figure 10- Diacritics in FireFox
Future Work
I have heard many people complaining about the Phonetic Urdu keyboard because they are used to using some other keyboard layouts. I would appreciate if somebody sends me other Urdu key-mappings e.g. Aftab, Muqtadra etc. Though I think the on-screen keyboard in Urdu OpenPad to be a significant achievement, it still lacks in its visual appeal. Adding a the English character in the background in each key would enhance its utility. I find it very cumbersome to use the mouse every time I want to toggle the language mode. It would be better to implement a short-cut key for that.
Some of you already use Urdu Editor Lite which in fact just embeds an html page (Editor.htm) to provide Urdu editing capabilities and the Urdu text can saved in UTF-8 format. The Editor.htm file included in the download can be used in place of the one already in use by Urdu Editor Lite. Make sure to copy all the necessary files along i.e. OpenPad.js, OpenPad.css and the other graphics. This will at allow the use of new capabilities that come with OpenPad. This way Sindhi and Pashto text can also be processed and saved in UTF-8 format. I have not updated the sources of Urdu Editor Lite accordingly. This means that the Save As html function still saves an html file with a fixed font (Urdu Naskh Asiatype) and point size. I will try to update the sources of Urdu Editor Lite as soon as possible.
Another future prospect is that of using the same logic of key mapping in web-based WYSIWYG controls e.g. RTE, TinyMCE etc. I have already done some work in this direction and I hope to come up with some workable solution soon.
I will be looking forward to your feedback and comments. Those who are already using Urdu WebPad in their forums and websites are encouraged to give Urdu OpenPad a try. You may post a comment on this blog or you can discuss it on the Urdu Mehfil forum.
Download Urdu OpenPad
View Demo 1
View Demo 2
