[development] Proposal to make drupal support RTL languages out of the box

[Munzir Taha]

Hi,
No doubt drupal is a great piece of work and the people behind it have done a 
great job and we are all thankful to them. However, being the first time to 
deal with it, I faced many problems regarding Arabic support. I, and another 
friend, Mugtaba, decided to lend a hand as a reward. We began with the 
translation of 4.7beta branch and almost finished it. Then we turned to the 
problem of RTL/BiDi and found the work of Ayman who has thankfully made his 
own bidi-theme. We thought about it carefully and found that Drupal has the 
flexibility to support RTL for all the themes out of the box with a trivial 
modifications to drupal files. So, instead of having themes for RTL which is 
different than the themes for LTR, we would patch all the themes to support 
both RTL and LTR.

The problem:
In RTL languages the direction should be set to be from right to left and 
hence everything on the page should be mirrored horizontally. Graphical 
arrows that point to the right, should now point to the left. Things that 
float right, should now float left. padding-left values, should go to 
padding-right values and vice versa. Other rules which are not direction 
oriented would remain the same.

The solution is to have a drupal_RTL.css file. I will shortly show an example 
of that file. This file should be loaded from common.inc in addition to 
drupal.css in case of RTL languages to override a few rules of the defaults.

This way drupal would support RTL language and mambo and zope/plone won't have 
an advantage on this issue ;).

// $Id: drupal_RTL.css, v 0.01 $
/* Override styles from drupal.css */

/*
** HTML elements
*/
table {
  direction: rtl;
}
th {
  text-align: right;
  padding-right: 0em;
  padding-left: 1em;
}

/*
** Menu styles
*/
ul.menu {
  text-align:right;
}
ul.menu li {
  margin: 0 0.5em 0 0;
}

//This rule uses a copy of the original image flipped horizontally.
li.collapsed {
  list-style-image: url('images/menu-collapsed-rtl.png');
}

I will attach a complete file.

For now, temporary I put the logic into my own template.php like this

<?php
// $Id: template.php, v 0.01 $
/**
 * Catch and override the theme_stylesheet_import function from theme.inc
 */

function phptemplate_stylesheet_import($path, $media = 'all') {
  $rtl = array("ar", "fa", "he", "ur", "yi");
  if (in_array(locale_initialize(), $rtl)) {
    if (file_exists(path_to_theme() . '/drupal_RTL.css')) {
      theme_add_style(path_to_theme() . '/drupal_RTL.css', $media);
    }
    if (file_exists(path_to_theme() . '/RTL.css')) {
      theme_add_style(path_to_theme() . '/RTL.css', $media);
    }
  }
  return theme_stylesheet_import($path, $media);
}
?>

Which would work but would require an unnecessary step of duplicating this 
same file in all the themes directories.

When we make this clear in the documentation, the developers of the themes 
could make their design in a more or less symmetric way that doesn't even 
require a separate RTL.css file but when the need arises, the theme author or 
any one interested could very easily make that file available and official 
part of the theme. As an example, I quickly tested the theme fancy and here 
is a minimal file that works.

// $Id: RTL.css, v 0.01 $
/* Override styles from style.css */
#logo img {
  float: right;
}
#menu {
  text-align: left;
}
#primary-tabs {
  float: left;
}
.bleft {
  width: 10px;
}
.bleft-img {
  background: #ce5003 url(images/cr.png) no-repeat top right;
}
.bright-img {
  background: #ce5003 url(images/cl.png) no-repeat top right;
}

Hope this would help solve the problem in a neat way.

-- 
Munzir Taha
Telecommunications and Electronics Engineer
Maintainer of Fedora Arabic Translation Project
https://listman.redhat.com/mailman/listinfo/fedora-trans-ar
Maintainer of the OpenBugs project page at
http://www.arabic-fedora.org/munzir/OpenBugs.html
Master CIW Designer, ICDL, MOUS, Linux+, LPI 101
Riyadh, SA