As part of my continued work supporting the international e-commerce platform for Benefit Cosmetics, I recently had the pleasure to help launch the Middle East sites. Specifically I was tasked to make the site right-to-left (RTL).
From the start I found this very interesting since, in my years of experience dealing with multilingual sites, RTL had never been an issue. In a RTL site everything is flipped. Languages like Arabic that read starting from the right require the entire interface be flipped as well. Immediately I was concerned that with attempting to flip the layout, the entire interface would break and not float properly. As it turns out I was wrong! Here is what happened…
First of all, I didn’t have Arabic content to test with, and someone suggested using “flipped” english. I did this by using the unicode-bidi: bidi-override; css rule. In Drupal I had to fake a RTL language so I went in the language settings, and changed the orientation of English. The config page can be found here: /admin/config/regional/language/edit/en
This setting controls the “dir” attribute of the tag on every page Drupal renders. The browser now recognizes the RTL attribute and attempts to provide some default styles. I wanted to enhance this method by using a custom class in our CSS instead of targeting with html[dir=rtl]. To do this, I went ahead and created a custom module with a `preprocess_html` hook. In here I simply loaded the global language variable and added the following code.
/** * Implement hook_preprocess_html(&$vars). */ function bc_orientation_preprocess_html(&$vars) { global $language; if ($language->dir == 'rtl') { $vars['classes_array'][] = 'switch-orientation'; } }
This feature enabled us to target new RTL specific css rules with the .switch-orientation class. As I mentioned earlier, I thought this would be the hard part, but it wasn't. The theme was already well built so the layout changes necessary were minimal.
At this point, some dummy Arabic content was being scattered across the site, and a member of the Middle East team was ready to review it. To our surprise, he was very happy with the results, except in cases where the content was mixed. As it turns out the handy unicode-bidi: bidi-override; rule was not necessary and was keeping the English flipped! I immediately felt silly and proceeded to remove that rule and rectify the mistake.
The next challenge was the administrative interface and form elements. Our Middle East team liaison explained that most users prefer filling out textfields LTR even if they are typing in Arabic, however, for textareas they prefer RTL. This made sense, as email addresses and passwords make up the bulk of these LTR fields. The administrative interface had to be in English as well.
For the administrative part, the content moderator for the Middle East team requested the interface to be consistently LTR. Since Drupal would try to maintain the interface in RTL when editing Arabic nodes, I used my custom module to put some overrides in place.
global $language; $is_admin = path_is_admin(current_path()); if ($is_admin && $language->dir == 'rtl') { $vars['classes_array'][] = 'switch-orientation'; // We force the direction to be ltr for admin pages. This variable goes to // populate the direction attribute of the <html> tag. $language->dir = 'ltr'; drupal_add_css(drupal_get_path('module', 'bc_orientation') . '/stylesheets/admin.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE, 'weight' => 10)); }
As you can see, I checked that the path is an admin path and added the same 'switch-orientation' class. Setting the language to 'LTR' prevents the browser from adding it's default RTL styles, and I took care of any remaining issues with the custom admin stylesheet.
Overall, the main complication in this process was discovery. I had no idea what the user expectation was for RTL and ran into complications because of it. After talking to an Arabic user, the path was much clearer, and I believe we achieved a great result both on the front end and the administrative interface.
Stay tuned for the launch of the new Middle East Benefit Cosmetics sites!