اردوویب بلاگ

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.

Friends!
Couple of days past I received an email from this guy Qadeer Ahmed Rana that he liked our efforts and that he would get back to us soon. Now I received an email where he says:

I have completed the main file of phpBB and half of faq file, for translation. I hope it will be completed in one or two days InshaAllah. This is very hard to Type.

And please tell me how can I join your group. I have recently written an article on Blogging on Blogger and one on Urdu Fonts, which you can see on my blog.

More, I have some suggestion. I am thinking about templates, as you wrote in your blog. I am thinking that either some General StyleSheet be made which may comply with all of the Blogger’s templates, or We should modify the Templates of Blogger, for Urdu. But the second thing will lead to Piracy, so I think the First one is good. Another thing is that we make our own templates.
Please give me some advice. If I get positive response, I will try to make a general stylesheet or a general template which would be fit for all the colours.

ALLAH Hafiz
QADEER AHMAD RANA

It feels so good to see how people are joining hands with us in this noble cause. I welcome this fellow on behalf of all of us at UrduBlog, and UrduWiki. Qadeer! if you like to be an author on this blog, please let us know through comment or email, and we will create an account for you. For your questions regarding Blogger, I request the attention of concerned colleagues.

درج ذیل بحث “اردو ویب سائٹس” یا “اردو ویب سائٹ” میں سے کسی ایک کے اردو قواعد کے مطابق ہونے سے متعلق ہے۔ یہ ذہن میں رہے کہ اوپر دیے گئے مرکبات کا ویب سائٹس کے مجموعہ کی طرف اشارہ کرنا مقصود ہے۔ بحث کے آغاز سے آگاہی کیلئے اس صفحہ پر دیئے گئے تبصرہ جات سے رجوع کریں۔

اردو میں جمع کا مفہوم دینے کیلئے فقط اسم میں ہی تبدیلی کافی نہیں بلکہ اس سے پہلے آنے والے حروف جار (کا، کے، کی وغیرہ) بھی تبدیل ہوجاتے ہیں۔ مثلا آپ کی مثال میں “آم کا باغ”واحد ہوگا اور جمع کیلئے “آم کے باغات” (لیکن قواعد کے قریب ترین “آموں کے باغات” ہے۔) استعمال ہوگا۔ اگر کسی وجہ سے باغات نہ بھی استعمال کیا جائے (جس کی وجہ سوائے عوام الناس کے زبان زد عام ہونے کے، میرے لئے ناقابل فہم ہے) تو “آم کے باغ” میں “کے” کی موجودگی جمع کی طرف اشارہ کرتی ہے۔ ہمارے معاملہ میں “کے” نا پید ہے۔ براہ مہربانی اس بات کا نوٹس لیا جائے۔ دوسرا اہم معاملہ ہماری اس خآص مثال میں “اردو ویب سائٹس” کا بیک وقت مرکب اضافی اور توصیفی ہونا ہے۔ “اردو” یہاں بحثیت صفت کے بھی استعمال ہورہی ہے اور مضاف الیہ کے بھی۔ سائٹس موصوف بھی ہے اور
مضاف بھی۔ اردو کے قواعد کی رو سے صفت اور موصوف جنس، تعدار (واحد یا جمع) اور حالت (مرفوع، منصوب وغیرہ) میں ایک دوسرے سے مطابقت رکھیں گے۔ یہ علیحدہ بات ہے کہ اردو میں صفات اکٹر واحد بمنزلہ جمع بھی پائی جاتی ہیں مٹلا عمر رفتہ اور ایام رفتہ میں رفتہ۔ اگرچہ عمر اور ایام تعداد میں مختلف ہیں۔ میری گزارش ہے کہ اگر سائٹس ناگوار گزرتا ہے تو اس کا اردو نعم البدل استعمال کیا جائے ، یا سائٹ کو اردو میں بطور “جمع” بھی داخل کیا جائے، یا قواعد تبدیل کئے جائیں، اور یا اسے استعمال کرلیا جائے۔

یہاں ایک اور بات کرنے کو بھی میرا جی چاہ رہا ہے۔ وہ یہ کہ اگرچہ انگریزی نے دنیا کی تمام زبانوں کو متاثر کیا ہے لیکن ہمارے ہاں لوگ بھی متاثر ہوگئے ہیں۔ میں نے خود ملاحظہ کیا ہے کہ عربی اور فارسی وغیرہ میں اگرچہ عام استعمال میں بہت سے نئے الفاظ آ چکے ہیں لیکن لکھنے میں بہت خالص زبان استعمال کی جاتی ہے۔ اور قواعد سے بالکل بھی انحراف نہیں کیا جاتا۔ ہمارے ہاں لوگ چاہتے ہیں کہ جو بازار میں استعمال ہورہا ہے، قواعد اردو میں بھی وہی لکھ دیا جائے۔ اگر کوئی قواعد اور اصول کی بات کرے تو اسے نکو بنایا جاتا ہے۔ جو سمجھ سے بالاتر نہیں ہے اگر ہم دیکھیں کہ آئین پاکستان (جو سلسلہ روز و شب امور حکومت کے قواعد کا مجموعہ ہی تو ہے!) کے بارے میں ہمارے حکمران کیا نظریہ رکھتے ہیں۔ اللہ مولوی عبدالحق کو غریق رحمت کریں۔ مجھے اندازہ ہے انہیں کیا کچھ نہیں کرنا پڑا ہوگا۔

Things seem to be progressing fast and quite well. Good job, guys.

Here are a few things to remember about posting here:

• At the start of every Urdu paragraph, use: "p[ur](urdu). " (with a space at the end and without the quotes.)
• For Urdu word(s) in an English paragraph, use: <span>[ur](urdu)اردو</span>.

• For English word(s) in an Urdu paragraph, use: <span>[en](en)English words</span>.

  Also, please categorize your posts. Create new categories if the current ones don’t fit your post. And do remember to select “English” or “Urdu” as a secondary category for the main language of every post as the formatting of the post depends on it.

  By default, the post status is “Draft,” so you need to change it to “Publish” and then save it for it to appear on the blog.

صرف دیکھنے کیلئے کہ سب ٹھیک کام کر رہا ہے۔ زکریا بہت شکریہ۔ واہ کیا بات ہے!!! انشاءاللہ اس بلاگ سے اردو کو بہت فائدہ ہو گا۔

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

Welcome. The purpose of this blog is to brainstorm together to write up THE Urdu blogging resource. The idea of a blog was suggested by Danial. Other bloggers here would include Asif. The idea to build an Urdu blogging resource was mine.

If you are interested in helping out, please let us know by leaving a comment or emailing us. I’ll put up a post presently about what kind of thing we have in mind for that website. For now, you can go check the list at Asif’s weblog.