Category Archives: JavaScript

Injecting BidiChecker to test Arabic web pages

Google has just announced the release of BidiChecker – an open source tool to automatically test Arabic web pages for issues related to bidirectional support. This is a great news, as bidirectional support is always a huge problem and requires both deep Arabic language understanding and deep technical HTML/CSS understanding, preferably at the same time. Any level of automation would be useful.

However, all the tool usage descriptions are geared towards using it with automated JavaScript testing library. I just wanted to test the tool on a couple of public web pages, both ones we maintain and others.

Here is the sequence of steps to inject and trigger BidiChecker into any Arabic page using jQuery and Firefox+Firebug:

  1. Load the page in the Firefox with Firebug console enabled.
  2. Inject jQuery if you don’t have it on the page already. I use jQuerify bookmarklet
  3. In Firebug’s console paste the following code:
    jQuery.getScript(
         "http://bidichecker.googlecode.com/svn/trunk/lib/bidichecker_packaged.js", 
         function(){
             var bidiErrors = bidichecker.checkPage(true, top.document.body);
             bidichecker.runGui(bidiErrors);
    });
  4. If there are any BiDi issues, the BidiChecker’s error navigation window will pop up and the offending text will be shown in red in the page itself. If you used jQuerify plugin, you may get one for the “jQuery injected” message itself.

Loading BidiChecker library directly from Google Code’s SVN is probably not a particularly polite way of doing it, but it is great for a quick test and introduction to the tool.

It is also possible to use a standalone BidiChecker bookmarklet, but I prefer Firebug approach as it then lets me to explore the page further using Code Inspector and other tools.

DOJO 1.0: Highlighting alternative table rows

DOJO has hit 1.0 and changed a lot of things. So the documentation is still all over the place with examples using old syntax.

I am migrating to DOJO from jQuery, so just wanted to get basic dojo.query functionality to work. Specifically, I wanted to highlight alternative table rows.

Not easy! At least for a newbie. I had to piece together 3 different documents and examples to figure out the easiest syntax.

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
 <script type="text/javascript">
    dojo.addOnLoad(function(){
        dojo.query("table tbody tr:nth-child(odd)").addClass("even");
     });
</script>

This highlights 1st, 3rd, 5th… rows in table body. It is also possible to say nth-child(3n+0) to select every third row. However nth-child(3n) does not work, at least in 1.0.