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.