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.