RTL/BiDi support in Drupal missing a default drupal_RTL.css file

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 over drupal on this issue ;).

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

// $Id: template.php, v 0.01 $
/**
 * Catch and override the theme_stylesheet_import function from theme.inc
 */
function phptemplate_stylesheet_import($path, $media = 'all') {
// May be it's better to add a variable isRTL to locales_meta
// table so as not to hardcode the languages in the code
  $rtl = array("ar", "fa", "he", "ur", "yi"); // There are a couple or so more
  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.

/* 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.