Combining LTR and RTL Languages with Foundation Framework

Foundation Framework is a responsive web front end framework. Phonegap is cross-platform hybrid mobile platform that lets one develop mobile apps for the popular platforms (iOS, Android, Windows Phone) using web tools (HTML5, JS, CSS).

Combine Hebrew and English

In a recent PhoneGap project, most screens could be in either English (a LTR language) or Hebrew (a RTL) language, depending on the user phone language. Given the advantages of Foundation Framework, I chose it for constructing the UX. In order to tailor the UX for the requirements, I used Sass to generate the CSS.

RTL Foundation

Foundation lets you download a custom RTL version. Examining the RTL download, I observed that only two files differ:

  1. foundation.js
  2. foundation.css

So, I included in the js and css folders under www, the plain (LTR) foundation, and and in addition the two files above from the RTL version, renamed to:

  1. foundation-rtl.js
  2. foundation-rtl.css

Using RTL Foundation

The nice thing about RTL Foundation, is that you can construct the screen as in LTR language, and it will create the layout for you.

So in the HTML below (the funny looking characters are Hebrew), the layout of the columns on the screen from right to left, will be at the top to bottom order of HTML:

Vesion of Screen per Language

In a pure world, one would use one version of each screen for all languages, and just change the Foundation inclusion, depending on a URL parameter. Strings will be translated using an internationalization framework.

But in this particular project, there were some issues of layout because of different lengths of strings in Hebrew and English, that I had to solve with further tailoring with CSS for each language.

So I created a Hebrew version for some screens that was almost the same, except for the Foundation inclusions and some usage of CSS classes.

The CSS classes were generated with Sass. The scss file had these classes in the same nesting structure that was built for English.

For example,

.login-register-button-group {

           .login-button {
                  float: left;
           }

           .registration-button {
                  float: right;
           }

          .login-button-he {
                 float: right;
          }

          .registration-button-he {
                 float: left;
          }
   }