Firefox 3 Thaana display bug: review and fixes

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 :-)

Trackbacks

  1. PingBack

Comments

Display comments as (Linear | Threaded)

  1. KALO says:

    Wow thanks!! I always thought that this was a problem with the fonts! I tried installin the fonts over and over again but didnt work! Anyways thanks alot jaa!! U da man!

  2. kalube says:

    thanks jaa!! I knew it was a font problem...same thing here always have to change to IE to view Miadhu n some other dhivehi site that i visit

  3. Nattu says:

    Thanks man.. Had the same problem with haveeru. It took me almost a day to figure out that a_faseyha doesn't work on Firefox input boxes. Had to use A_Ilham for that..

  4. primary0 says:

    i've noticed that this is a windows only issue. haven't had that problem on linux or mac. great fix though. a very annoying problem it was.

  5. jaa says:

    Ah yes, I hadn't checked it on other platforms. Thanks for the info :-)

  6. Nass says:

    Thanks a lot for this. Everytime I see a juicy headline in MvHeadlines (in my googleReader) and I click on it, to my annoyance I find that it's from the Miadhu site and I can't see the article. This fixes the problem beautifully. Thanks again.

  7. jaa says:

    Hehe. That's exactly what annoyed me too!

  8. ajaaibu says:

    nice fix.. and a great suggestion. but what about Opera 9.51??.. like firefox, those fonts didn't work on Opera 9.51 too.. Hope to see a fix soon ;-).. you are doing a great job man.. thanks a lot!

  9. jaa says:

    Far as I know, the font issue is not present in Opera. If there is an issue, it might be because of missing or corrupt fonts. Either way, the bookmarklet fix given above should and does work on Opera too :-)

  10. enwie says:

    hey its not working for me... :-(
    what am i doing wrong here?

  11. GRoadhi says:

    thnx a lot jaa, its been a long tyme, i hv been struggling 2 read the dhivehi version of miadhu website since i started t use Firefox 3. ;-)

  12. flashpixel says:

    whoa man!! ure just the best solution for these font stuff we can trust on =D .. you had helped many maldivians to build there dhivehi websites, display is everythin .. cheers!! youre just great!!

  13. Jaa says:

    thanks :-)

  14. shame says:

    yea the problem with A_ilham is that its not clear much thn faseyha..specially wen its used in headline, its not very nice..i used the same method ( A_ilham ) for the fix..bt for firefox wen i remove the DOCTYPE it works fine..bt had to use ilham smwher for the browser to detect the font..

  15. Adam says:

    Why my website isnt compaticle with firefox. The guy who did my website is saying he needs to change the whole website and will charge same if i want to make it compatible with firefox? Any clues?

  16. jaa says:

    Simplest fix is to get the guy who developed your site to change the font used to "A_Ilham". That should get your site working.

  17. Adam says:

    Thanks Jaa

  18. suhana says:

    ya ya. dats gd


Add Comment


HTML-Tags will be converted to Entities.
Standard emoticons like :-) and ;-) are converted to images.
To leave a comment you must approve it via e-mail, which will be sent to your address after submission.