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:
- 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.
==<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.
اردو ایڈیٹر میں -ھ- استعمال نہیں ہو رہی مدد کریںٴ شکریہ
I need this editor, but the Download link is not working for me, please check the link
لگتا ہے یہ کی سافٹ ویّر
Firefox میں بھی اچہی طرح کام کرتا ہے۔۔۔۔
Nabeel bhi,
Perhaps Urdu characters will be saved in MySQL tables, not as they are shown, but in the codes like &#…; etc. Don’t they?
If they do, we should be more careful regarding field types. For example, a VARCHAR (20) field will accept 20 English characters, but will not accept 20 Urdu characters, since they are actually much more than 20…..
Is it true? Please help me.
Thanks.
%[ur] asghar%
I desperately need your help to install urdu phpbb on my web site, please contact me directly. I have a server on http://www.godaddy.com with mysql databases with lots of space and I am paying for it. I will appreciate your help, god bless you.
چوده اگست انیس سو سینتالیس کو پاکستان ایک آزاد مملکت کی حیثیت سے دنیا کے نقشے پر ابھرا۔ انگریز و هندو کی دوهری غلامی سے نجات حاصل کرنے کےلیے ملسمانان ھند نے الله سے گڑ گڑ گڑاگڑ کر دعائیں کیں، یاد کیجیۓ یه آزادی ھمارے بزرگوں نے جان و مال کی بے بھا قربانی اور هزاروں فرشته سیرت بھو و بیٹیوں کی عصمت گنوا کر حاصل کی تھی۔
آزادی یقیناً الله کا احسان عظیم اور ایک بھت بڑی نعمت هے لیکن اس کو قائم و دوائم رکھنے کے لیے اس کے تقاضے پورے کرنے پڑتے ھیں۔ هماری آزادی کا اولین تقاضا یه تھا که نظریه پاکستان یعنی اسلامی نظام کا عملی نفاذ کیا جاتا۔ لیکن بدقسمتی سے اس سمت کوئ پیش رفت نه هوسکی۔ آزادی کو مادر پدر آزادی سمجھ لیا گیا۔ قومی وسائل کی بندر بانٹ اور مفاد پرستی کی ایک دوڑ شروع ھوگئ۔ جس کا نتیجه یه نکلا که پاکستان مسائلستان بنتا چلا گیا۔ مھنگائ، بیروزگاری اور بدامنی نے عوام کی زندگی اجیرن کردی۔ یھاں تک که ملک دولخت هوگیا۔ لیکن روز بروز یه مسائل بڑھتے چلے گۓ۔ نفسانی خواهشات کو بھڑکانے والے پروگرام ترتیب دیۓ گۓ، راگ و رنگ اور رقص و سرور کی محفلوں کی حوصله افزائ کی گئ۔ بجلی کے بدترین بحران کے باوجود عمارات و سڑکوں کو بقعه نور بنا دیا جاتا هے۔
برادران اسلام، ذرا سوچۓ عام حالات میں بھی ایک مسلمان معاشره ایسی بے ھودگی کی اجازت نھیں دیتا۔ لیکن ایسے وقت میں جبکه دنیا کے کونے کونے میں مسلمانوں پر قیامت ڈھائ جارهی هے۔ کشمیر فلسطین افغانستان عراق اور چیچنیا میں ایک عرصے سے خون مسلم سے ھولی کھیلی جارهی تھی لیکن گذشته ماه سے اسرائیل امریکه کی شہہ پر لبنان کے بے گناه شهریوں پر جن میں بچے بوڑھے خواتین شامل هیں اندھادھند بمباری کے ذریعے ظالمانه طریقے سے ان کا قتل عام کررها ھے۔ آیۓ هاتھ میں هاتھ ڈالیں اور الله تعالیٰ کے دین کے غلبه اور اس کی اقامت کے لیے اپنا حصه ادا کریں۔ تاکه الله کی کتاب و اس کے رسول کی سنت کی روشنی میں اور مصور پاکستان علامه اقبال اور معمار پاکستان کے تصور کے مطابق یه ملک صحیح معنوں میں ایک اسلامی فلاحی مملکت بن سکے۔
assalam o alikum brothers.mery pass inpage3 hai mai is mai font install karna chahta hoo.kis tara install karo fonts kol
i want URDU language softwares
just like MS WORD
dear sir
i need a littel help
i’m using urdu editor in my web site after knowing ur efforts for urdu.i’ve converted my whole site in both language success fully (english,urdu).
i’m facing problem for numeric value.in english i’ve related some textbox with validation control to check only numeric value could b enterd.but in urdu it show problem .validation control does not take urdu numeric values as numeric value and give error to enter numeric values.
plz note on my master page when language is chaged my all text box converted into urdu editors.
need suport urgently.
regards,
Mohsin Javeed
Dear Brother,
I want to know about UrduPad if we can use it in WordPress as a plugin. And secondly, I tried to download link but I think there is some problem in it. Would you please help in downloading?
regards
Kashif
Dear Sir,
Its a nice one for the peoples who is using Urdu Editors.
And I want some clarifications based on this,
I am using IE 6, and when i type the characters of ” h, o, y” the proper letter is not getting.
By the same when i click on the letter “HaH” (third button from left bottom), i am not able to get the exact character.
And if I am using shortcuts for copy, cut and paste it is not working. some other characters are displaying.
When I am typing more lines, and when it exceeds the display of the long rich text box I am not able to view while typing.
But once i press enter key i can view. Again starts typing i am not able to view the text what i am typing.
Let me have some alternate way or a solution for this. So that it will be helpful for me.
Regards,
Kishen Raghav . G
پہلا دن ہیڈن، ظہیر، کمبلے کے نام پہلا دن ہیڈن، ظہیر، کمبلے کے نام
Download link has been updated.
well dear its a nice effort, but please do host on some site like code.google.com or sourceforge.net for open source projects. create a forum for its issues and feature enhancement discussion. I know its good effort but we need it to make it for future need, that is a must, so keep update it. we have to look into some other issue related to web. I know one of urdu text editor developed by Hassnain for desktop called as Raptpad, a platform independent opensource project hosted by sourceforge.net. But your effort for making it for web is good, but i again emphasis on the issues.
Best Regards
Rizwan Yasin Khan
hi Nabeel
i again here for giving one more idea for that, Urdu Web Editor.
I have seen an open source editor FckEditor for web http://www.fckeditor.net/, supporting multiple languages. this itself a very big one, please get a look on it. I am interested in to get it localize for Urdu and as well supporting multiple languages for input, considering Urdu as top priority instead of reinventing the wheel. So our effort will not be a waste for getting Urdu Web Pad to this stage where FckEditor is at present, which need lot of time to spent. Please Nabeel and development team i am requesting to introduce Urdu feature for this FckEditor instead of spending time in Urdu Web Editor to make it at this stage.
Best Regards
Rizwan Yasin Khan
Salam: Have a look at the following post:
http://www.urduweb.org/blog/2007/05/86/
It is better to first have a look around before letting loose with your suggestions.
Aoa Nabeel,
Great work. Just a small question – whenever I am using a simple FCKEditor to enter Urdu in to MS SQL, I get just garbage there: ?????
What is the reason for that and any suggested remedy?
Best regards
i want URDU language softwares
just like MS WORD
Can any please tell me where can i find Urdu translator for word press. What i want to do is .. when visitor click on a button .. the website converts into urdu..
Regards
Ali
Asalam oi alikum
Friend aj kal Booting ek aam showsha ahi lekin aj mey aap logo k liye eshi site laya ho jis k mey aap ko Anti booters aur bhot sarey Softwares miley gey
http://rssfa.blogspot.com
yar mai apne blog mai english ke sath sath urdu mai bi post karna chahta hoon , is k liye mujhe blog mai urdu bi add karna ho gi lakin kesey plz tell me????
Dear Sir Asalm o alakum
Sir i want to make Urud(font) Web Site with urdu Text but i can’t do this i use Inpage but it can’t suport in html. So how can i do this say me the name of soft ware ware i can type my text and i can applay on Html file.i m waiting your ansar thnnx Allah Hafiz.or message me on 0300/313-5608560
HI Nabeel, i have Urdu Editor 7.1 Demo verion which is not working properly and full, plz can u tell me the serial number of Urdu Editor 7.1
Or anyone know the serial number plz email me or sms me thanks
03002547155
slam bro n sis.
actually i want to create my own database in urdu language
like user can find his/her solution in urdu.
they can enter their q in urdu and the server will find in urdu
i m trying to learn sql. oracle
plz if any one know then plz help me
i shall be very thankful to him
I am in desperate need of urdu editor 7.1 or 4.6 edition serial key number Please help in this regards. I will be greatful to him. I have to compose litrature related Islam which will explore to all needy person who know urdu.
Please send me serial key of urdu editor 7.1 to
this address
suhailghjeelani@gmail.com
Wassalam to all
hye dere evry1..
Can ne1 snd me serial key of Urdu Editor 7.1 on babar_vilyam@yahoo.com.
Plz…..
aslam o alikum
iT expert members ki zarorat. abii join kare……..www.itelam.com
nice website cool
PakistaniPoint – Islam, Information Technology, Tutorials, Love corner, Designed poetry, Sports, Sms, Mobile games, Recepie, Movies
new free web
i want to write urdu text in my web page
please help me how i can …
thanx
you are doing nice.. can you main me instructions and all waht is requires to write urdu post at
bazinaqeebi@hotmail.com
thnx…
Pakistan’s Urdu Forum for Free IT Education ( ITUrdupages.com ) Please Join our forum.
Assalam o alaikum,
maiN koshish kar rahi hooN keh URDU EDITOR ko aap ke mentioned site se download karooN lekin shayed ab mentioned location par maujoood naheN hai.
maiN isey reuse karna chah rahi hooN as a Baluchi Keyboard. I hope aap allow kareNge keh maiN already for testing purpose aap ka urdu pad le chukii hooN lekin us meN Amjad SaaHeb ka naam as a creator naheN haTayaa hai.
jawab kee munt^azir
Zahida Raeesi
Zahida: You can download Urdu WebPad from the following link:
http://www.urduweb.org/mehfil/downloads.php?do=file&id=2
You can also find other Urdu editors and plugins here. You are most welcome to use any other keyboard mapping that you like.
koi batay ga k ma apnay blog ma urdu zban ma bloging kasay kar sakta hon
Assalam o Alikum
please join us………..www.urduelam.com
wasalam
AOA,
Really a very helpful and excellent article.
i want to start blog in urdu language any one help me to start
hye dere evry1..
Can ne1 snd me serial key of Urdu Editor 7.1 on
sattarniazi837@yahoo.com
Assalam_o_Alaikum all frnds
thanks for usefull information
aoa:
Nabeel bahi mai site keh forum per urdu pad add kernah chata hoon main phpbb3.0.8 use ker rah hoon
kindly help
Here is an offline application that can create, edit and print documents written in Urdu language.
http://bstdownload.com/reviews/urdu-editor-8/
plz help me..muj apna kye bord urdu ma karna ha
Dear Mr. Nabeel,
Hope you are fine and having a good day.
Can you please email the source code along with the procedure to use this plugin to my email ID?
I am a student doing MIT from Virtual University of Pakistan and had decided to prepare an Urdu accounting application that will be distributed under GPL license.
I can use your code in my project otherwise I will have no other option but to write it from scratch.
Please consider
wow, Its Great, Thanks Janab
It can assist you out with the flu. The problem with grains is that they simply couldn’t do without, whilst others are not only remove toxins from our diet plans that the best for your marathon and marathon exercise plans to follow a balanced diet, in which the fat down [url=http://phen375truf.blogspot.com]phen375 complaints[/url] first, there has not made equal.
Fluid restriction can help suppress appetite. Their diet and recapture control phen375 reviews 2011 The truth is the best selling selling slimming tablets that you dramatically limit your intake of 150 mcg may aggravate your acne http://phen375truf.blogspot.com like every other day.
آپ کی ویب سائٹ بہت اچھی ہیں اور آپ اچھی چیزیں بھی لکھتے ہیں۔ ایسے ہی لکھتے رہیں اور خوش رہیں۔
I and my pals have already been examining the great suggestions located on your web page while quickly I got a horrible feeling I had not thanked the site owner for those secrets. All the young men ended up passionate to learn them and have certainly been tapping into those things. Appreciation for truly being well helpful and also for choosing varieties of outstanding resources millions of individuals are really needing to discover. Our sincere apologies for not saying thanks to earlier.