A few years ago I wrote a PHP-based Thaana text rendering class while investigating solutions to the problem of displaying Thaana text in web browsers on various devices. The class dynamically converts any given Thaana text into a formatted image of given dimensions and type. The use of images to display Thaana means that the information can be viewed on a large variety of devices and does away with the demand for the device to support Thaana fonts. On the flip side, the use of images does mean that this approach has higher bandwidth and data transfer requirements than text.

Features

The class makes use of the powerful image manipulation services provided by the GD library to create images from text and hence inherits the wide of features it offers. However, since the GD library does not (or atleast did not, back then) support right-to-left scripts and does not offer line wrapping to fit text within a bounding box, custom code had to be written to handle the unsupported text direction and formatting. The class also supports use of any Thaana font, made possible by GD support for loading TrueType fonts.

Applications

This piece of code was briefly put to live use around 2004 on the (now defunct) MUnet.net's Radheef service. More recently, it has been put to great use by Muraasil.com to display Thaana on their mobile service so that user's can read news in Thaana on mobile devices, including Windows Mobile-based phones and the iPhone.

Demo

Give it a go and play around: Thaana text rendering demo.

I am not releasing the code publicly just yet...

Thaana Common Fonts Research (CFR) is a Thaana related research project I launched late last month and has been running since. Today, I finally got around to writing down some introductory information on the project, so here it is.

Introduction

This project will conduct some basic research into the prevalence and distribution of Thaana fonts.

Purpose

The investigation is aimed at obtaining:
- An understanding of the prevalence of individual Thaana fonts
- An understanding of the co-occurrence dynamics of Thaana fonts
- The distribution of Thaana Unicode and non-Unicode Thaana fonts
- The OS dependence of the fonts

Significance

This study will help us to:
- Get a first look into the distribution of Thaana fonts
- Develop recommendations for the use of fonts on the web
- Develop recommendations for the use of fonts in software and in documents
- Formulate plans for improving the reach of Thaana (and hence, Dhivehi)

Method

The research is conducted via the World Wide Web by sampling the fonts installed on the devices used by Maldivian web users.

The process goes like as follows:
1) A small, invisible Flash-based data collector is embedded into websites.
2) When a user visits a participating website, the data collector automatically compiles a list of the fonts installed on the system. This is done once per user device.
3) The font names and the operating system of the user is sent to my server where the data is logged for later analysis.

It is intended that data sample collection will be carried out until the end of this month (June 2009).

Participate

Webmasters and website owners can participate and contribute to this research by embedding the Flash-based data collector using the HTML code shown below into their website. Please change the DOMAINHERE bit to the domain name of your site so that I know who to chase if there are issues. The field is also used to note your contribution and participation in the project.

<object data="http://labs.jawish.org/cfr/cfr.swf" height="1" width="1" type="application/x-shockwave-flash">
	<param name="flashvars" value="site=DOMAINHERE" />
	<param name="movie" value="http://labs.jawish.org/cfr/cfr.swf" />
</object>

If you operate a high traffic Thaana-based website, I urge you to consider participating and help make this project a success. My thanks in advance!

Statistics

As of writing this post, 2293 data samples has been collected and 269 Thaana fonts have been identified and is being tracked.

You can see LIVE stats on the CFR project home.

Here's an update to my Javascript Thaana Keyboard library which provides easy entry of Thaana on web pages without the involvement of OS-based keyboard switching. Hit the demo page to see it in action.

This release is solely a bugfix release addressing an issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area. I originally cut this release in February but decided to hold back on a public release till I had further issues to fix or had new features added, neither of which has come since...

Thanks goes to Ahmed Ali for bringing the bug to my attention.

Changelog

+ Fixed issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area.

Usage

Usage remains same as before. Please refer to my detailed post on the 4.0 release.

Demo

As usual, a demonstration and testing page is available.

Download

- full source version (5.66 KB)
- packed version (2.47 KB) [recommended]

Here's a minor update to my Javascript Thaana Keyboard library. This release, version 4.2, amounts to a single bugfix addressing an error in key translation for some keys when operating under the "Phonetic-HH" keyboard mode. Everything else remains as per the earlier v4 series releases.

Thanks goes to Nattu for bringing the bug to my attention.

Changelog:

+ Fixed handling of keys when in Phonetic-HH keyboard mode

Usage:

Usage remains same as before. Please refer to my detailed post on the 4.0 release.

Demo:

Check out the demonstration and testing page here.

Download:

- full source version (5.51 KB)
- packed version (2.46 KB) [recommended]

Update (13-Apr-2009): This version is now superseded by release v4.2.1.

I released Javascript Thaana Keyboard v4.0 only 10 days ago but I've since been made aware of a few bugs in the script that had gone unnoticed during testing back then. I decided to cut another release to fix those bugs which, although minor, could potentially be annoying to end-users. This new release also crams in a few tweaks to improve performance.

Changelog:

+ Fixed handling of Delete key and other special keys
+ Added correct handling for Thaana brackets "()"
+ Improved performance

Usage:

Usage remains same as before, so please refer to my post on the 4.0 release.

Demo:

Check out the demonstration and testing page here.

Download:

- full source version (10.6 KB)
- packed version (2.46 KB) [recommended]

Update (19-Dec-2008): This version is now superseded by release v4.2.

Here is an update to my Javascript Thaana Keyboard (JTK). This 4.0 release packs in a bunch of new features, making JTK much more powerful and more flexible than any of the earlier releases.

Keyboard support:

Most notable on this new release is the introduction of support for the various different types of Thaana keyboard in use. JTK now supports the following keyboard layouts:

Phonetic (Segha version): This keyboard is perhaps the most popular Thaana keyboard layout. JTK identifies this keyboard as "phonetic".

Phonetic (Hassan Hameed version): This keyboard is similar to above but notably differs in its mapping of alifu, abafili, aabaafili, gaafu and the sukun. JTK identifies this keyboard as 'phonetic-hh'.

Typewriter: This is the standardized Thaana layout used on typewriters. JTK identifies this keyboard as 'typewriter'.

Browser support:

JTK 4.0 adds support for IE5.5, which has a very significant market share still. Hence JTK should now work perfectly well on Microsoft Internet Explorer 5.5+, Mozilla Firefox 1+, Opera 9+, Apple Safari 2+ and Google Chrome 0.1+.

Basic usage:

The basic usage allows for fast and easy integration of JTK on your Thaana web pages.

1. Link the file in the HEAD section of the page:

2. For any element accepting input (i.e. INPUTs, TEXTAREAs, content-editable DIVs), assign them the special class name "thaanaKeyboardInput". JTK will automatically handle text entry to any element with that class name. You can assign further classes to the elements without ill-effect, if needed.

3. There are two ways to set the keyboard used for an element.
defaultKeyboard method: This method allows setting a default keyboard to be used on all elements handled by JTK. To do this, add the following to the HEAD section of your web page but make sure it is added after the code inserted from step 1 above.

thaanaKeyboardState method: This method allows per element control on the type of keyboard used by an element handled by JTK. To do this, add a form element (can be a radio, checkbox, select, hidden or text field) with its name set to the text entry element id suffixed with the string "_thaanaKeyboardState". The value of these fields should specify either 'off', 'phonetic', 'phonetic-hh' or 'typewriter', indicating the status and the keyboard in use.

So, if you had a text entry field with the id "fullname" then the keyboard could be specified using a hidden field as follows:

4. Make sure that the text direction for the Thaana fields is set to "rtl". This can be easily achieved using CSS, by adding a class definition for the "thaanaKeyboardInput" class or by any other method of your choice. Adding the following to your CSS definition should suffice for most uses:

.thaanaKeyboardInput {
    font-family: faruma, 'mv iyyu nala', 'mv elaaf normal';
    direction: rtl;
}

If the above instructions are followed correctly, the JTK Thaana functionality would be in effect soon as the page has loaded!

Advanced Usage: The JTK object, methods and properties

To facilitate advanced integration functionality for developers looking to have (finer) control over its behavior, JTK now makes itself available as a public object named "thaanaKeyboard".

The following properties and methods exposed by the "thaanaKeyboard" object:

defaultKeyboard: [property] The Thaana keyboard layout type to default to when JTK enabled elements do not have a keyboard specified.
Valid values are: 'off' to keep Thaana disabled, 'phonetic' to use the standard phonetic layout, 'phonetic-hh' to use the phonetic layout by Dr. Hassan Hameed and 'typewriter' to use the typewriter layout.

setHandlerById ( id, action ): [method] Sets the state of the JTK handler for a page element.
The id argument should be a string containing the id of any content-editable element. The action argument should specify either "enable" or "disable" depending on whether input handling for Thaana should be enabled or disabled, respectively.

setHandlerByClass ( class, action ): [method] Sets the state of the JTK handler for a set of page elements.
The class argument should be a string containing the class name of any content-editable element (i.e input, textarea etc). The action argument should specify either "enable" or "disable" depending on whether input handling for Thaana should be enabled or disabled, respectively.

License:

JTK 4.0 is released under the MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Demo:

Check out the demonstration and testing page here.

Download:

- original full source version (10.0 KB)
- packed version (2.33 KB) [recommended]

As always, drop a line here if you use it and/or have problems or suggestions. Enjoy.

Update (31-Oct-2008): This version is now superseded by release v4.1.

Maldivians who use Firefox would be aware that certain Dhivehi websites, such as Miadhu Online, no longer display the Thaana fonts correctly when they switched to the recently released version 3 of the popular browser. I would like to review the issue for the benefit of Maldivian web developers and put forward some solutions that could be used. Further, I would also like to make available a fix that ordinary web users can themselves use until website owners (or the Firefox developers) fix the issue.

Problem description

Firefox 3.x series (and the 2.x series as well, to a lesser extent) fails in correctly displaying Thaana in web pages when certain non-Unicode Thaana fonts are applied to the elements using CSS. The same pages, however, render correctly without issue with Internet Explorer, Safari and Opera.

DOCTYPE - One contributing factor seems to be the DOCTYPE of the page. My guess is that this issue may have something to do with quirksmode rendering or standards compliance. The lack of a DOCTYPE in the markup gives correct rendering of the Thaana fonts on the page. However, omission of the DOCTYPE cannot and should not be considered a solution as DOCTYPE is required for most page markup and browsers need the correct DOCTYPE specification to correctly render modern pages.

Font - Another factor seems to be the font file used. The Thaana characters fail to be rendered correctly when almost all of the commonly used Thaana fonts, such as A_Faseyha, A_Waheed and A_Randhoo, are used. However, some fonts do work without issue - A_Ilham for example.

Here are some demo pages to highlight the issues. Each of the pages has three lines of Thaana - first of which is Thaana text enclosed in a font tag specifying a (problematic) Thaana font, the second is a H3 headline which has the font family set to a (problematic) Thaana font using CSS alone, the third is again a H3 headline which has the font family is set to a (problematic) Thaana font using CSS but has the text placed inside a font tag and finally the fourth line has a H3 headline whose font family is set to a (working) Thaana font using CSS alone.
View Thaana on page with: no DOCTYPE, HTML 4.01 DOCTYPE and XHTML 1.0 DOCTYPE.

Developer's fix

There are two definite solutions that can be easily applied by web developers.

Solution 1: Add HTML Font tags around any and all text that is to be displayed in Thaana. Specify the font to be used within the "face" attribute of the Font tags as usual. The flip-side of this method is that it results in a significant increase in page size. Haveeru News seems to have addressed the problem using this method. Here's a example:

bwlimIhunc aufulunc 

should be transformed into 

bwlimIhunc aufulunc

Solution 2: Change font used in the CSS definition to "A_Ilham". It is, perhaps, not as clean and pretty as "A_Faseyha" but until there is a fix to Firefox it will have to do.

A further alternative solution would be for the site owners and developers to take this occasion to shift to Unicode Thaana. It is much more reliable and is the currently recommended method of displaying Thaana on the web. Jazeera Daily, Haama Daily and MvHeadlines, to name a few, are all using Unicode for text display and entry. You can utilize the PHP-based Thaana Conversions class I released to convert the existing non-Unicode Thaana text to Unicode - and you can do such conversion on-the-fly on page requests.

User's fix

I wrote a quick bookmarklet-based solution several weeks ago for my use after getting annoyed with having to open Internet Explorer to view pages from sites affected by this bug. This solution will, or rather should, work on any affected site and on any computer.

Simply right click on this link - Jaa's Thaana Fix - and select "Bookmark this link" from the drop-down menu. Alternatively, you can drag and drop the link onto your bookmarks toolbar. When you are on a page that is messed up by the bug, such as Miadhu Online, Vaikaradhoo Live or Kavaasaa, click the "Thaana fix" link on your Bookmarks menu or toolbar. You will need to do this for each page you view.

Happy reading