BiDi 101: Through the Looking Glass with Bidirectional UI Support
Share
Click here to close
Click here to close
Subscribe here

BiDi 101: Through the Looking Glass with Bidirectional UI Support

BiDi 101: Through the Looking Glass with Bidirectional UI Support

Bidirectional UI Support

Try picking up a pen with your non-dominant hand and signing your name backwards. That’s how it feels for someone who’s accustomed to right-to-left (RTL) orientation to encounter an improperly mirrored web experience. User disorientation and functionality issues are the two big risks for globalization professionals targeting content to markets that use bidirectional (BiDi) scripts.

Our BiDi 101 series introduced BiDi markets and reviewed key BiDi script characteristics that tend to confound Westerners. Next, with help from fellow Moravians Jan Forst and Robert Sarver, let’s discuss the technical considerations and internationalization tools available to recreate a left-to-right (LTR) experience for a RTL or BiDi audience.

Mirroring

Placing a mirror along the left edge of a LTR instruction manual gives you a good idea of how that manual would look laid out for RTL, which is how BiDi scripts read. Left-aligned text becomes right-aligned. Page numbers in the bottom right corner move to the bottom left corner. Arrows indicating progress point left instead of right. In short, nearly everything about the experience is reversed.

The same is true of software UIs and web experiences. Here’s a quick list of UI elements to watch out for:

  • Menus are not only right-aligned, but the order of navigation elements starts at the right and proceeds left. For example, if the “home” menu would appear on the top left for Western markets, it would appear on the top right for BiDi markets.
  • Tab order starts at the top right and proceeds to the left.
  • Rotating banner ads wipe to the left.
  • Date pickers — the “Sunday” column is right-aligned and the dates are listed from right to left.
  • Form fields are right-aligned to accept user input appropriately.
  • Charts and graphs — the Y axis points left instead of right: otherwise, your message of strong growth could be entirely misread.
  • Back/next links are reversed such that the “proceed to the next page” link points to the left. Imagine what happens if you get this wrong on a credit card transaction page.
  • Images and graphics designed to blend with a LTR layout may clash with a RTL layout.
  • Star ratings — clicking the left-most star in a RTL environment means you’re applying the top rating, not the lowest, so all 5 stars need to light up. If your code is wrong, your well-loved product may become the lowest-ranked item in its category!

BiDi star rating

How to Prepare for BiDi Scripts

Platforms/Development Environments

The good news is, most major development platforms that support Unicode already support RTL scripts (IOS, Android, Windows, and HTML), so chances are, your software or web UI are capable of supporting RTL. Check out the links for documentation and community support.

Third-Party Components

Unless your software and/or web developers have written 100% of the code by themselves, you probably have third-party elements like scripted menus, banner ad carousels, media players or other software plug-ins. These components may not support RTL environments and may need to be replaced or extended. Look for documentation like this or this.

Keep it Clean

When text boxes, images, paragraph styles and other website elements are semantically clean and properly set up to reference cascading stylesheets, or CSS files, many aspects of your site can automatically tap HTML’s built-in support for RTL simply by referencing a different CSS file. But if your developer uses inline styles, or even “unconventional” techniques to achieve a particular look — say, nudging text into alignment using non-breaking spaces — then you might be in for some horrible surprises when you localize for BiDi scripts. Simply following best practices for site design can spare you quite a bit of localization grief.

Fonts

Older fonts and custom fonts may not support BiDi characters or ligatures. Assuming all of the underlying text is Unicode, you should be able to resolve those issues by selecting a more appropriate font.

Check Your RTL Status Quo

If you’re curious about the current state of your support for RTL, here are a couple of quick ways you can check it out:

  • Switch the default UI language on your desktop or mobile device to Arabic, Farsi, Hebrew, or some other BiDi language. (Just be sure you leave the settings tab accessible, so you can change it back easily.)
  • Use this open source BiDi checker.
  • Install this simple web page-flipping bookmarklet in your Web browser to generate mirror images of any web page, which may help you visualize what elements need to change to support RTL. (Here’s how to install bookmarklets.)

Web page-flipping bookmarklet in action

Test, and Test Again

Make sure you test your RTL sites and UIs carefully: Unicode Control Characters can be tricky for even seasoned developers. Without deep RTL experience, it’s not always intuitive to manage the directional flow of mixed-language text or numbers in a way that covers all the possible outcomes.

Careful testing during the product development stage is time well spent, especially for your first adventures in supporting bidirectional scripts. As software developers and localization managers well know, good testing mitigates the exponential costs and time delays of regressing bugs logged in localization testing.

Keep in mind that preparing your code is only half the battle. Be sure to check out the next post in our BiDi 101 series: avoiding the cultural pitfalls of targeting BiDi markets.

What are your favorite tips, tricks, or tools for preparing your software, mobile, or web experiences for RTL or BiDi audiences?

 

Comments