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.