Munzir Whatever the outcome from this discussion, please add your suggestion to this discussion which is a repository of RTL issues with Drupal http://drupal.org/node/3696 Thanks On 3/11/06, Munzir Taha <munzirtaha@gmail.com> wrote:
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