اردوویب بلاگ

السلام علیکم،

گزشتہ روز ریلیز کردہ ویب پیڈ کی اپڈیٹ میں چند مسائل سامنے آئے تھے۔ ان بگز کو فکس کرنے کے بعد میں نے اس ڈاؤنلوڈ کو اپڈیٹ کر دیا ہے۔ ویب پیڈ کو استعمال کرنے والوں سے گزارش ہے کہ وہ اس تبدیلی کو نوٹ فرمائیں۔

اردو ویب پیڈ ڈاؤنلوڈ کریں
اردو ویب پیڈ کا ڈیمو ملاحظہ کریں

والسلام

Urdu WebPad’s update is finally there after a long wait. I had finished work on this update a few weeks ago and I was about to release it but I experienced some problems during its testing. Therefore I fixed these problems and now it is time to release it. The highlights of this release are easier integration with web applications and some opera compatibility. Read here for more details.

Download Urdu WebPad
View Urdu WebPad’s demo
Urdu WebPad’s documentation
Urdu WebPad’s user’s guide

السلام علیکم،

ایک طویل انتظار کے بعد اردو ویب پیڈ کی اپڈیٹ حاضر ہے۔ حسب وعدہ اس میں ویب اپلیکیشنز کے ساتھ انٹگریشن کو آسان بنا دیا گیا ہے۔ اس کے علاوہ اردو ویب پیڈ کسی حد تک اوپیرا کمپیٹبل بھی ہے۔

دراصل میں نے کئی دنوں پہلے ہی اس اپڈیٹ پر کام مکمل کر لیا تھا اور اسے ریلیز بھی کرنے والا تھا لیکن اس کی ٹیسٹنگ میں چند مسائل نکل آئے۔ اس ٹیسٹنگ کے لیے میں نے ایس ایم فورم میں اردو ویب پیڈ کی انٹگریشن کا تجربہ کیا۔ اس سلسلے میں پیش آنے والے مسائل کے پیش نظر میں نے یہ مناسب سمجھا کہ اس پر مزید کام کیا جائے اور اس کے بعد اسے ریلیز کیا جائے۔ باقی تفصیلات یہاں پر موجود ہیں۔

اردو ویب پیڈ ڈاؤنلوڈ کریں
اردو ویب پیڈ کا ڈیمو ملاحظہ کریں
اردو ویب پیڈ کی ڈاکومنٹیشن
اردو ویب پیڈ کی یوزر گائیڈ

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.

All of this is very nice until you notice that the people at urdulife.com do not allow the use of the Urdu Pad outside the premises of urdulife.com. That means you cannot integrate this as an input component in your web applications. Urdu Life also safeguards its intellectual property by obfuscating the JavaScript source code of the Urdu Pad. Though it is true that every business has the right to protect its intellectual property, we need more open source way of thinking if we want to promote Urdu. While open source is thriving in the rest of the world, Urdu is still struggling to get out of the stranglehold of closed standards and proprietary software.

Seeing the need for a web-based Urdu editor component that could match in functionality to Urdu Pad, I decided to develop one myself. Considering that I am a novice in JavaScript programming, this task was somewhat daunting. I had set out several goals before starting this development, not all of which I could meet. I wanted to make this a reusable component. I have been partially successful in achieving that goal. The work on Urdu Editor is not finished. I hope that the Urdu community takes interest in this project and contributes to it.

Compatibility Issues

I faced a setback when trying to make the Urdu Editor component compatible with FireFox. It is working only with Internet Explorer at the moment. The working of Urdu Editor is simple. It inspects the key codes in the keypress event and based on the language setting modifies this key code. The event model in FireFox does not allow this alteration of key codes. Maybe there is some workaround for making it work but since this exploration was taking so much time, I gave up on it. I would request my friends with JavaScript expertise to inform me of any workaround, if there is one.

Licence

I am distributing the Urdu Editor component under GPL.

Use

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:

<script language="javascript1.2" type="text/javascript" src="yourpath/UrduEditor.js"></script>

where yourpath is the path to the JavaScript file UrduEditor.js. Now you have to call the initUrduEditor function as shown in the following.

<script language="JavaScript" type=text/javascript> initUrduEditor(cssPath); </script>

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:

1. Assign an id to the edit control if it already does not have one
2. Set the attributes lang="ur" and dir="rtl"
3. Apply the appropriate style e.g. style="font-family:Urdu Naskh Asiatype; font-size:16"
4. set the event handler, onfocus="setEditor(this)"
5. set the keypress event handler, onkeypress="processKeypresses()"
6. 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.

<script language="javascript1.2" type="text/javascript" src="templates/subSilver/UrduEditor.js"></script> <script language="JavaScript" type="text/javascript"> initUrduEditor('templates/subSilver/'); </script>

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:

<script language="JavaScript" type=text/javascript> makeUrduEditor("username", 12); </script>

and

<script language="JavaScript" type="text/javascript"> makeUrduEditor("subject", 12); </script>

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:

<tr> <td colspan="9"> <script language="JavaScript" type="text/javascript"> writeKeyboard(); </script> </td> </tr>

The following figure shows the results of the customisation of the post page.

Download UrduEditor
View demo page

Enhancements

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.