How to implement Aprant Web IME ( Unicode )
Posted on by admin

This tutorial talks about HOW TO implement Aprant Web IME ( Unicode ) on your website. Please note that Aprant Web IME is a licensed product.

Implementing Aprant Web IME is a two phase process. The first phase implements the Aprant Font ( Step-1 though Step-4 ) and the second implements Web IME itself ( Step-5 through Step-6).

OS Support: Tested successfully on MS Windows (XP, 7 and 8), Linux ( using Firefox), Android ( using Google Chrome), Apple iOS and Mac OS X ( using Apple Safari).

Note: Open AprantDynamic.js file, and see the javascript variable “path_to_eot” is pointing to the right path. In our case it is “/aprant_ime/”. If you want a different path or folder then, you have to replace “aprant_ime” path with your path, in this file and acordingly in this tutorial wherever “aprant_ime” is mentioned.

Steps :

1. Upload the entire “aprant_ime” folder ( after you unzipped the zipped file you received from us ) and it’s entire content to document root of your server ( public_html or htdocs or httpdocs etc.) .

2. Include the following Javascript as the top most lines among all others Stylesheets and Javascript lines.

<script type="text/javascript" src="/aprant_ime/AprantDynamic.js"></script>
<script src="/aprant_ime/aprant_ime_basic.js" type="text/javascript"></script>
<link href="/aprant_ime/aprantstyle.css" rel="stylesheet" type="text/css" />

. . . . . other stylesheet and javascript files follow from here...

. . . . . 

3. Important: Your new Odia Font Family is “AprantWeb”. And for your convenience and to make it easy for you, using this font family we have defined some style classes in the aprant_ime/aprantstyle.css file that is included in the package and for ready to use purpose. If you wish you can modify or customize the css file.

4. Important: Now wherever you want Aprant font to take it’s effect for the Odia text on a html page, ( usually inside a DIV or SPAN tag), you can do so as following:

<div class="aprant18">
odia texts goes here....
odia texts goes here....

<div class="some other class">
<span class="aprant16">odia texts goes here....</span>

See how we have used here the classes “aprant18” and “aprant16” (both in DIV and SPAN). These classes are already defined for you in the stylesheet file “aprant_ime/aprantstyle.css” provided to you. If you want to learn more, you can go through this stylesheet file. You can also customize the stylesheet files to change the font size or color or weight.

Note: If you are hard-coding Odia Text in a static HTML file ( i.e, not using Database or CMS ) then make sure you save your HTML file encoded with UTF-8 BOM. Most of the Text Editor such as Notepad++ has this option available.
Important Note: Without understanding and implementing properly the point #3 and #4, your website will not become cross-browser and cross-platform compatible.

5. Now in order the Aprant Web IME to appear on webpage ( the select box ), you need to place the following javascript code wherever you want this to appear on your webpage.

<script type="text/javascript">startAprantIME();</script>

For example, let us say we want this to be in a table cell.

      <script type="text/javascript">startAprantIME();</script>

6. Finally you have to enable a textbox or textarea on your webpage for someone to write Odia. To do that, you have to simply use a class “aprant_bharat” for that element.

For example, for textboxes ,

<form id="searchform" method="get" action="/">
  <strong><input class="aprant_bharat" type="text" name="s" id="s" size="30" /></strong></form>

if you have another class already defined for the that textbox then you can still attach Aprant IME in the following way. There is already a class called “otherclass” attached to the textbox in the following example.

<form id="searchform" method="get" action="/">
  <input class="otherclass  aprant_bharat" type="text" name="s" id="s" size="30" /></form>

You are done !

To switch between Odia and English , you have to press F12 ( this will change the selectbox we talked about in step 5 to English or Odia ) .

Please note that, on your desktop if Aprant IME ( the desktop version ) is already running then please exit from it. Otherwise, the Aprant WEB IME may not function properly because there is already an Aprant IME running on your desktop.


Leave a Reply