Can you spot the error in the following webpage?Unless you are one of the 56 million Internet users who read Arabic, the answer is probably no. But BidiChecker, a tool for checking webpages for errors in handling of bidirectional text, can find it:Oops! The Arabic movie title causes the line to be laid out in the wrong order, with half of the phrase "57 reviews" on one side of it and half on the other.As this example demonstrates, text transposition errors can occur even if your web application is entirely in a left-to-right language. If the application accepts user input or displays multilingual content, this data may be in one of the right-to-left languages, such as Arabic, Hebrew, Farsi or Urdu. Displaying right-to-left text in a left-to-right environment, or vice versa, is likely to cause text garbling if not done correctly. So most user interfaces, whether left-to-right or right-to-left, need to be able to deal with bidirectional (BiDi) text.Handling BiDi text can be tricky and requires special processing at every appearance of potentially BiDi data in the UI. As a result, BiDi text support often regresses when a developer adds a new feature–and fails to include BiDi support in the updated code.Called from your automated test suite, BidiChecker can catch regressions before they go live. It features a pure JavaScript API which can easily be integrated into a test suite based on common JavaScript test frameworks such as JSUnit. Here's a sample test for the above scenario:// Check for BiDi errors with Arabic data in an English UI. function testArabicDataEnglishUi() { // User reviews data to display; includes Arabic data. var reviewsData = [ {'title': 'The Princess Bride', 'reviews': '23'}, {'title': '20,000 Leagues Under the Sea', 'reviews': '17'}, {'title': 'ستار تريك', 'reviews': '57'} // “Star Trek” ]; // Render the reviews in an English UI. var app = new ReviewsApp(reviewsData, testDiv); app.setLanguage('English'); app.render(); // Run BidiChecker. var errors = bidichecker.checkPage(/* shouldBeRtl= */ false, testDiv); // This assertion will fail due to BiDi errors! assertArrayEquals([], errors); }We’ve just released BidiChecker as an open source project on Google Code, so web developers everywhere can take advantage of it. We hope it makes the web a friendlier place for users of right-to-left languages and the developers who support them.By Jason Elbaum, Internationalization Team
// Check for BiDi errors with Arabic data in an English UI. function testArabicDataEnglishUi() { // User reviews data to display; includes Arabic data. var reviewsData = [ {'title': 'The Princess Bride', 'reviews': '23'}, {'title': '20,000 Leagues Under the Sea', 'reviews': '17'}, {'title': 'ستار تريك', 'reviews': '57'} // “Star Trek” ]; // Render the reviews in an English UI. var app = new ReviewsApp(reviewsData, testDiv); app.setLanguage('English'); app.render(); // Run BidiChecker. var errors = bidichecker.checkPage(/* shouldBeRtl= */ false, testDiv); // This assertion will fail due to BiDi errors! assertArrayEquals([], errors); }
