Right-to-Left Language Localization in Rails Web Design

One of the more interesting and challenging web design tasks I’ve faced recently was the TerraCycle Israel website. A Hebrew website features a script and language I have no knowledge of, and a visual site alignment that’s a mirror image of what I’m used to. I’ve launched many websites in various languages, but this was the first experience of a complex right-to-left language site, and implementing that localization in Rails.

All my previous international website deployments have shared certain similarities; they all use Latin script and lettering, western European languages, and the left-to-right visual alignment that I’m used to as a native English speaker.

Even in situations where I’m not sure of the particular wording or translation of content, I’ve always been in a position to know “this looks OK” or “there’s something wrong” when viewing a site that’s in staging.

Resolving local problems in a universal template

The challenge for the Israel site was to maintain our universal Rails code structure while allowing for the far wider degree of customization necessary to display a right-to-left aligned site in a non-Latin script. The added difficulty…I speak zero Hebrew!

The pay-off was significant. Creating increased flexibility within the code base provides a solid foundation for deployment of other websites with right-to-left, non-Latin language types (e.g. Arabic, Urdu or Japanese), in addition to the Israeli launch.

I asked TerraCycle’s Israeli team to make some initial translations and add some Hebrew content pages to provide a basic foundation for me to work from. It also let them look at the site and tell me what looked weird or needed changing. Without that initial content I wasn’t even in a position to guess effectively what might be needed.

The broad strokes were relatively simple. I added behavior configurations that administrators could set on a site wide basis. The Rails code then checked for this configuration when loading certain parts of the site. It defaulted the HTML document to right-to-left, and also loaded a specific right-to-left stylesheet.

These configuration options also enabled the site to utilize different CSS classes (while still utilizing as much of the master stylesheet as possible), or sometimes loaded HTML in a different order.

E.g. the search bar in the site header needed to be styled slightly differently, and so checks if the configuration “:right_to_left” is true or not. It assigns different CSS classes to the input elements based on the results of that check.

<aside id="header-search">
  <% if config[:right_to_left] == "true"%>

    <% form_tag(search_brigades_url, :method => 'get') do %>
      <%= submit_tag t('header.search'), :class => 'search-submit custom-font big-edges-leftonly' %>
      <%= text_field_tag :query, value = t('header.search'), :class => 'small-query-box big-edges-rightonly' %>
    <% end %>

  <% else %>

    <% form_tag(search_brigades_url, :method => 'get') do %>
      <%= submit_tag t('header.search'), :class => 'search-submit custom-font big-edges-rightonly' %>
      <%= text_field_tag :query, value = t('header.search'), :class => 'small-query-box big-edges-leftonly' %>
    <% end %>

  <% end %>

</aside><!-- #header-search -->

The devil is in the details

These changes put us on the right track in terms of moving sidebars, displaying page text content and other major aspects of the site. But things are never that simple. Lists and forms needed to be styled more specifically, and even simple issues such as graphical icons of an arrow pointing to the right needed to be reset to a mirror image.

Even more complex were changes to certain jQuery calculations. E.g. on the Points page of the TerraCycle site, the dynamic sidebar pulls an aside from the main content on a hover event. It clones and repositions it as a replacement for the default sidebar, and then dynamically calculates an offset to allow for the sidebar to scroll down the page with the user; all of these calculations needed to be updated.

Despite these challenges, the right-to-left specific stylesheet is less than 8k in size (a result, I think, of the strength of the base framework CSS and the flexibility offered by the use of absolute positioning). The right-to-left jQuery file is also about 90% identical to the English language default.

The importance of working with local teams

What became very clear was that localization of this type required far more hands-on time with staff in Israel. For most new country setups I provide the country lead a website administration document, allow them to get on with translation and configuration, and provide on-call support as necessary.

In this case, the last two weeks of the project saw me spending three or four hours on the phone to Israel on a near daily basis, talking through translations and design aspects. We needed to do this because I could make the changes, but I couldn’t recognize whether the changes were correct. Our Israel team needed to give me the Hebrew text, an explanation of the layout, and immediate feedback on the changes on the staging site.

My Skype chat history is filled with lines of text that I can’t read, but which is successfully integrated into the site!

Providing future flexibility

Website localization is more than mere translation, but a shared script, alignment and generally common norms of layout and content meant that the configuration of previous Latin-based language sites was smooth. The difference in scope of localization for a non-Latin language site was really driven home during the Israel site deployment.

The process has been a success. TerraCycle Israel shares exactly the same code structure as other TerraCycle sites. I didn’t need to use Flash, with all the strengths that underpin TerraCycle’s complex web system.

I think the Israel site looks great (I’ve fallen in love with Hebrew from a typographical design aspect). As a longer term bonus, the template for all TerraCycle sites can now switch to a right-to-left language with a single configuration option, a massive bonus when moving into other markets.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?