Who said geez site should be ugly? Introducing jGeez 1.2.0.0

One of the driving forces that gave birth to jGeez is the damage geez fonts cause on the look and feel of websites with such a content. Be it a missing Unicode font or plain dreadful font that destroys the UI design that consumed hundred hours of the developers time, at the end of the day this geez content would degrade your web application in the eyes of the user unless you took steps to ensure consistent visual and interactive experience to the user.

Previous versions of jgeez tackle most of the pitfalls of geez font contents like missing Unicode detection and software independent geez typing, but one aspect that needed enhancement is its rigid default font approach. If you are using jgeez, you will be required to use one font (Jiret) and there was no option to change that.

With the newly released jgeez library (version 1.2.0.0), I have added more flexibility in using different kind of fonts to display your geez content. Courtesy of Eyasu from http://www.techsefer.com, I have included a list of fonts that can be used with jgeez. Now you can choose different  font based on the look you are trying to achieve on your website and maintain a level of uniqueness in your work.

By using jgeez and choosing the appropriate geez font to your site you will ensure that your layout is consistent and predictable across all the users and your design work is maintained regardless of the capability of the user’s operating system. The UI will retain its looks as you have defined it on your original design and you will be relieved of the unjust horror of the decisions made by the operating system and the browser geez fonts.

In addition to this major enhancement, with the release of jgeez 1.2.0.0 I have fixed a bug related to jquery plugins and AJAX calls. Courtesy of Getnet from http://www.ethiowired.com/ for identifying this issue and helping me fix it. I have a different blog entry about this issue and how I managed to fix it, if interested click here to view that detail.

All the downloads related to this release can be found at jgeez main website jgeez.com/downloads and details on how to utilize the new options can be found at jgeez.com/developerguide

jQuery plugin and Ajax

In the time when a data driven website’s only way to deliver the tiniest information to the user was a full-fledged web request, the advent of AJAX (Asynchronous JavaScript and XML) was one of the most significant milestone in dynamic web development. The browsers were able to do partial updates to their DOM (Document Object Model) and developers rejoiced to make web browsing experience more efficient and smoother.

AJAX came with the price of pitfalls like lower control to the browser user as well as bookmark unfriendliness among other things. But when compared to the amount of ease of use it brings to your web application, I believe introducing AJAX in your web application is more of a requirement that just a fancy addon at this point.

One of the benefits of having the capacity to do partial updates is the ability to create HTML elements on the fly based on the data retrieved from these AJAX requests. This dynamic restructuring of the DOM ( a fancy Acronym for HTML structure on the page :)) sometimes changes the location of elements on the page and hence messing up any jQuery events that might have been attached to these elements.

Well on a normal day you would have a simple routine to re-attach all the events on your page every time you make restructuring on your page (AJAX calls or DOM manipulation using Javascript). But when it comes to jQuery plugins this is not that simple as most jQuery plugins tend to create a lot of HTML elements to serve their purpose. Like for example jGeez creates toggle buttons and help button around the target input element. Obviously we can’t simply reapply the plugins to the elements as that would cause your plugin to regenerate the adorning elements. So the jQuery plugin author has the responsibility to empower the developers with a method to reattach the plugin events when he/she moves the target element around.

So the bottom line is the previous version of jGeez stops working when you are using AJAX or javascript to restructure your DOM, Thanks to Getnet from ethiowire.com who pointed out this bug. But in the new version of jGeez(1.2.0.0) I have added features where the plugin detects whenever the page does AJAX calls and reattaches all the events after the AJAX call is completed. I will just try to go through the technical details of how I have implemented the fix, if you are not interested in the inner workings click here to jump start your experience the latest and greatest jgeez library.

The first thing you need to do is to make sure you make the event handlers independent of (loosely couple) the business logic used to modify the DOM structure when the plugin is first applied, meaning avoid a code like this

$(this).click(function(event){

//do stuff

});

Instead use

//hold the reference in a local variable array

eventHandlers=[];

eventHandlers.push({element:$(this),eventName:’click’,handler:function(event){//do stuff});

Because you can iterate through each of the objects, you can reattach the event handlers whenever you want to. Well that is the methodology I used to make sure the utility is available for developers to invoke “reattaching” on jgeez plugins.

Bullet Proof your geez website with jGeez in just two lines

One of the most annoying looks of Ethiopian websites that further degrades our amateur graphics into a low … low level of child’s scrapbook is the fonts. Most, if not more than 95% of all Ethiopian websites with geez literal content, does not work if the user does not have a Unicode font installed on their client computers. What is even worse is that, it is very misleading to the web developers as they try to test the appearance of their WebPages on their computers.

“Looks pristine and nice” on their windows 7 operating system, chrome 10 browser and power geez Unicode installed. Little do they know that their website is a whole page full of squares when viewed in different platforms with no geez font installed. Well I don’t have to hammer it in any more J

Lucky for us, this is not only our problem. Any language literal that is not English shares our fate. So developer communities throughout the world came up with a neat solution which is to install fonts on demand and went further ahead to create very simple free open source tool for us to use. http://www.fontsquirrel.com/ provides exclusive tools to generate what they call “@font-face” kits for any font that is not available on the client computer. So in simplest terms, you can use any of your favorite geez fonts to generate the appropriate files (CSS and font files compatible with different browsers).

Even with this implementation, couple of issues worth mentioning here are

• Size of the font files : this will effectively drive the size of the web page by a little more than 150 kb depending on the user’s browser
• Geez/English mixed content : Latin fonts shipped with geez fonts does not look professional

jGeez to the rescue

With the introduction of jGeez1.1.0.0, I have included a feature where users with geez font already installed are rewarded with faster web experience. This new feature evaluates client browser’s ability to correctly render geez literals before attempting to download these font files (if you are interested on how this isachieved please click here to visit my blog about that). So if the user already have a geez Unicode installed on his/her computer then your page will not download the fonts instead will use the geez font already on user’s computer. But if there is not geez Unicode found, jGeez will grab the appropriate font from jGeez CDN (public shared location).

Add these two lines in the header section of your html mark up and your are done

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.jgeez.com/cdn/jquery.jgeez.min.js"></script>

Please refer to jGeez developer’sguide found here and downloads page to fully understand how to quickly to add the full force of jGeez awesomeness J

Detecting if there is a Geez Unicode installed on client browsers

I have tried to cover in my previous blog, missing geez font is one of the most annoying things you will run into when viewing an Ethiopian website. So with the release of jGeez1.1.0.0 I have included a feature where this library detects if the browser is capable of rendering the geez literal and make a decision as to download geez font or use an already installed Unicode font.

You might think querying the list of fonts installed on user’s pc is as simple as using some kind of API on the browser part, well … unfortunately it is not. Mainly because of security considerations these browsers won’t disclose system information to applications originating from the web. In simplest terms in your web site style definition the best you can do is to list out font names you wish to use and the browser makes decision on which font to be used based on their availability on the user’s computer. If all else fails and all the fonts you listed are not available then the browser steps up and designates a default font for you (mostly Times roman or Microsoft sans serif).

So what this means for web page full of geez literals is, if the font is missing then the browser will try to render it using English font and every character turns into a square J. Well that fact is the core of how jGeez determines if a geez Unicode is installed on client’s pc or not: take a look at the sample image below

When there is no geez font the browser renders the characters as a generic square, but we know for a fact that the width of  "  " and "   " are not the same as shown by the dimension annotation. And that is how jGeez determines if the user has a valid geez font installed on their browsers.

jGeez creates two dummy span elements containing these two characters at the end of your webpage temporarily and compares their width. If their width is equal then that is a green light to go ahead and download the geez font appropriate for the current browser. If you are really interested how the actual code is implemented with jquery, you can find the source code in my public repository found at github.

Why go through all this trouble?

Well, one of the main reasons why I decided to include this feature in jGeez is all about better user experience for your geez site. Because embedding a font on your pages adds roughly 150 kb+ overhead on the size of your site. That is just un-necessary waste of bandwidth and slower rendering for the consumer who has a geez font already installed on his/her computer.

In conclusion, if you are a web developer targeting geez literal content, you don’t need to worry about missing fonts or even geez typing, jGeez takes care of that for you. Visit my primarysite dedicated to jGeez library here. It’s very easy to implement and all the jargons of how it works is abstracted away with just two lines of code.  

Introducing jGeez

 We have gone through generations of remarkable milestones in transitioning geez into the digital world. Starting from the advent of Power Geez to geez keyboards and google transliteration, how a geez literal user interacts with his/her system has been improving one step at a time. When we look at the field of web development, geez literal has been a cancer to achieving a smooth user experience and a dreadful burden to the overall look and feel of the graphic design.

    In addition to missing geez fonts (those squares) typing geez directly is limited to users who have the appropriate font and software installed on their devices. I have seen some Ethiopian websites that were able to incorporate their own custom javascript to enable users to directly type in their website without a need to install key map software. Some of them were even very impressive (ie ethiotube.net,amharicdictionary.net) but all these distributed effort created redundant libraries that do the same thing and left web users to learn different key maps when they switch from one web application to the other. All in all it goes without say that incorporating geez is one of the most painful phase in web development.

    So what if there was a way to integrate geez typing with just a couple of lines of code? That is what jGeez is. jGeez is a jquery based javascript library that lets web developers quickly add geez typing to their web application projects. This library utilizes the font-face css to ensure users ability to view geez characters even if they don’t have any geez font installed on their devices. 

please refer  to this link "jGeez library" to get a glimpse of adding geez typing in your web application. you will find all the necessary tools you need to quickly jump start your journey to integrate geez typing in your web application

jGeez library overview

join my forum to help in developing and enhancing this library