Translating a language that uses left to right orientation is pretty straight forward.
You just take the strings and replace them by strings in the other language.
For Drupal, the process is described in the document Locale or internationalization support.

Even though you need to do all that is mentioned in the above web site, it is not enough in some cases.

Languages that are right to left in orientation (Arabic and other semitic languages, such as Hebrew, Syriac, Aramaic, Amharic, ... etc.), need special handling.

The orientation of the page has to be changes as well.

Here are some hints on what to change in Drupal to make Arabic work. The assumption I have is that you will be using xtemplate (because it is the most advanced and customizable of them):

Approach 1 - Arabic only web site

  • In "includes/theme.inc", in function theme_head(), change the "utf-8" to "windows-1256". This is not strictly necessary, but it will display the correct character encoding for those who do not have Arabic on their Windows.
  • Edit the "themes/xtemplate/xtemplate.css" file (or better yet, configure your Home » administer » configuration » themes Stylesheet URL field to point at a new stylesheet that is a modified copy of the default one). For the "body" tag, add
       direction: rtl;
       text-align: right;
    

    This will flip the entire screen from left to right.

    You may need to do this for other tags as well, as the need arises while you are testing.

  • While you are at it, add the font "tahoma" before the other fonts, since its Arabic equivalent looks very good, better than the default Arabic ones which are plain ugly (personal preference of course).

This has a drawback that it will make the site Arabic only. Since even English content will be flipped from right to left (confusing!).

Approach 2 - Multilingual web site

Approach 1 above can be satisfactory when your visitors and contributers are only Arabic speaking, and does not involve any code changes (almost).

But if you want your site to be truly multi lingual, then there is a more elaborate (and complex) approach to take.

The idea centers on detecting which languages should be handled right to left (e.g. when locale is "ar", ...etc.), and setting a RTL (Right To Left) flag. Ideally, this would be in the locale table in the database (e.g. a special "location"), or in the $languages array in the conf.php file.

Then, all the drupal functions that output HTML, will have to put:
dir="rtl"
after every div tag, depending on whether the RTL flag is set or not.

A simpler variation of this approach may be to have a special Arabic CSS file, and Drupal to load this Arabic CSS if the locale is Arabic (or a language that is RTL). I am not sure if this will work, but it sure is simpler than changing a lot of code.

In all cases, the locale "ar" has to be created in the locale row has to be created in it.

I do not have the time to translate all drupal strings into Arabic (about 400 of them), but perhaps someone else can pick up from here, and do this task.

To see how other CMS applications handle Arabic, check The Linux for Arab web site, which is using PostNuke, and completely Arabized

Other links to check on Drupal localization:

Comments

Anonymous’s picture

I'm very interested in collaborating on an arabic translation of the drupal interface... the CSS method is, by far, most appealing to me. I know a number of people that would be contribute to the translation of the 400 strings of text... are there others who are interested in collaborating on this?

kbahey’s picture

I did some testing on the CSS only approach outlined above on my home server. If all you need is an Arabic only web site, then this seems the easiest solution.

The hard part is going thru the code and changing the strings, or using the locale module to create Arabic strings in the database. This is time consuming and I cannot afford it.

As for content itself, Arabic just works, because MySQL stores it correctly and the browser displays it correctly too. For example:

السلام عليكم، كيف حالكم؟ هذه الجملة بالعربية الفصحى
صح النوم يا عرب

The above should be in Arabic.

Let us know how you proceed though (in this article) and if you have found any collaborators/volunteers on this effort.

Khalid

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Steven’s picture

In my browser (Moz Firefox), the above displays correctly. When selecting text from the middle of line 1 to the middle of line 2, the direction is also correct (i.e. right-to-left). Unicode has built-in rules about how to handle such mixing of directions, and all you need to do is apply the proper styles in CSS.

I don't get your comment about using windows-1256 encoding though. Unicode (as UTF-8) can handle all sorts of languages, and the arabic fragment above displays perfectly here. Changing the encoding will require more work that just theme.inc: XML input is always converted to UTF-8 (with iconv, if present), and emails sent by Drupal also assume UTF-8 encoding of the content. It is not a good idea to change this unless you know Drupal well.

kbahey’s picture

You are right. UTF-8 should be the standard.

I guess it is because most Arabic sites out there use windows-1256 that I put it as the de facto standard.

As a historical note: Microsoft managed to convert the entire region (about 300 million total population) to its way of doing things. Apple have very little presence, and Linux is gaining a foothold but very slowly. Web developers use ASP on Windows NT/2000/XP, and users use only Windows with MS Internet Explorer. Most developers think that the internet is a Microsoft only game. I have even seen big corporations demanding that a web based application be run only under MS Internet Explorer 5.x or greater! When I questioned what about Apple users? The reply was : "Too bad! Tough". Just visit Al Jazeera web site for example in MSIE, and see how the left and right panes just disappear under konquerer/FireFox/...etc. Very sad indeed.

However, with web sites that show that Open Source platforms (Linux, Apache, PHP, Drupal, FireFox, ...etc.) are equally capable, there is hope that this will change, and the Microsoft monoculture may have a serious challenger.

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Steven’s picture

I see where you're coming from (and my opinion on Al Jazeera has suddenly gone down a lot), but trust me, stick to UTF-8. Even IE can handle it properly ;).

If you find you need to export your data in a legacy encoding, you can use PHP's support for iconv (see php.net) to convert between encodings. You might be interested in my quest for a proper, Unicode-compatible, IME-friendly editor.

kbahey’s picture

My lamentation was towards the state of affairs of things out of our control, mainly that Microsoft has managed to coerce an entire region and culture to be 99% exclusively dependant on it in both the server side and the client side.

If it was up to me (and others who believe in standards and open source), we would develop everything to be standard based, and not reliant on any particular platform, giving the end user the choice of any O.S. they like, and any browser they like.

I gave an example of Al Jazeera, but the problem is far more than one site. Most high traffic sites in Arabic are ASP/IIS/MSSQL/Windows, and require MSIE (on Windows of course) to display correctly.

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Bèr Kessels’s picture

Your lamentation might be correct, but eventhoug microsoft does a lot of evil things, their browsers (IE) still *do* follow utf-8. So if you choose that format, IE users will be able to see arabic, in the proper way, but other users will be too.

and about tha region thing: beleive me: you are not alone there! in the west of europe the figures of microsof use are about similar. IT is mainly due to the newcomers in the EU (former eastern europe, used to be neglected by microsoft) that OSS is gaining a little foothold over here, in the EU. And i beleive the US is not much better of. :) But enough of that! whining does not help, good products do!

And if this solved you problem, would you be so kind to report back that it helped? This will help others whom are looking for the same solution.

[Ber]

kbahey’s picture

You are correct, UTF-8 certainly works. I use it on my site, and yes, IE does work with it.

My lamentation was mainly about people who are so Microsoft-centered that they do not think that there are other browsers out there, and build their sites with features that only display in IE such as some side bars menus, ...etc. (I gave examples above).

Thanks

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

angeltest’s picture

Hello, I am doing the Farsi translation and I know a group who want to contribute the Arabic translation. Please send me an email for more information at avo@myway.com
thanks
Angel

omar’s picture

I believe that there is still work to do on the translation, but here`s an example of an instance of Drupal in RTL.

The Afghan Peace & Democracy Act site

kbahey’s picture

Congratulations Omar.

Can you please publish here the details on how you did it (modules you changed, style sheet changes, ...etc.), so others could benefit from the experience?

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Dries’s picture

Maybe this information/post should be added to the Drupal manual too?

angeltest’s picture

Hi Omar:
I am trying to do make the configuration for the farsi language, and creating the PO file. This site looks so cool, and I need some detail information, Did you create this site?
Thanks
Angel
avo@myway.com

alaa’s picture

I'm working on a couple of english/arabic drupal pages.

the solution I'm using for the BIDI text direction problem is to make the theme scan the content and decide if the text should be RTL or LTR, this is not an efficient method but it works (you can see it @ http://www.eglug.org).

I think the best way to implement this though would be through a filter and not through the theme, this way you can calculate bidi on a paragraph by paragraph basis, and it gets cached (right?)

if I come up with a useable BIDI filter I'll add it to contrib.
----
http://www.manalaa.net

omar’s picture

To control the direction of the content in mixed language pages we 1) used taxonomy to categorise the language of the content, 2) made it so that a class tag (e.g. class=ar) was included in a div statement outputed with each node's content and then 3) used the CSS to lay it out in left-to-right or right-to-left.

To control the overall direction of the page (e.g. so that the navigation box would appear on the right side of the page instead of the left side when using the Farsi/Dari/Arabic/Pashtu interface) we added a function that switches the left and right "sidebars" (by adapting the $blocks statement depending on the $lang global). Note: While this is a technique that I like and have seen on some quality sites, we ended up disabling it on our site as the end users, with limited internet browsing experience, found it to be somewhat disorienting.

Good luck.

alaa’s picture

the problem is, I got we have a bilingual forum, members post comments in the language they prefer, sometimes it is even mixed, with arabic paragraphs followed by english paragraphs.

so using taxonomy wouldn't work, I need a transparent solution, where posters don't have to worry about technical details as bidi.

the direction of the interface I guess should be having a seperate theme for each language.

http://www.manalaa.net

alaa’s picture

I started a Drupal Arabic translation project at Arabeyes.

Arabeyes is a Free/Open Source arabization meta project.

Will commit the translated files to the drupal contrib CVS when they're done.

http://www.manalaa.net

kbahey’s picture

For the sake of completeness of this thread, I am adding other resources that would be of interest to Right-To-Left languages.

Arabic translation project http://drupal.org/node/12996
bidi.module (bi-directional) here http://drupal.org/node/13829.
Hebrew web site, which has a nice theme http://drupal.org/node/18838

--
Consulting: 2bits.com
Personal: Baheyeldin.com

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

mgifford’s picture

Hi,

Just wanted to post that I've just put some patches in my sandbox in the cvs contrib directory:
/sandbox/mgifford/patches/i18n/

themes_civicspace_template.php.rtl.patch

themes_civicspace_box.tpl.php.rtl.patch
themes_civicspace_comment.tpl.rtl.patch
themes_civicspace_node-forum.tpl.php.rtl.patch
themes_civicspace_node.tpl.php.rtl.patch
themes_civicspace_page.tpl.php.rtl.patch

Which should allow a multi-lingual rtl/ltr site.

It still needs to be reviewed a bit, but I do think that it should cover most of the basics. I'd be interested in feedback from someone who actually can read a rtl language (I can't).

Mike
--
Mike Gifford, OpenConcept Consulting
Free Software for Social Change -> http://www.openconcept.ca

Ayman’s picture

Hi,

I've tested your patches and they seem to work well, thanks for your efforts :)

Actually I found your post because I came here to post another solution for rtl/ltr switching, your way seems cleaner and easier to get going than mine, because I did some changes to core files.

My patches change the imported CSS files depending on the locale, for example: style-rtl.css is imported instead of style.css when the locale is RTL, this is also done for drupal.css which assumes the locale is always LTR.

Here you will find the patches, and a bidi theme based on box_grey (forum, book, and comment modules also require simple changes because they assume page direction is LTR, I'll upload the patches later).

What do you think? And how can I help? I really want to see BiDi support in Drupal out of the box :)

By the way, is it possible to get the theme into Drupal's themes page as a regular RTL theme for now? I can make it work as an RTL-only theme with Drupal without my patches.

mgifford’s picture

Hi Ayman,

Glad that my patches worked. Good to keep it in the themes rather than having to move it into the core.

Although I've got quite a lot of experience with multi-lingual CMS's, I'm unilingual and have quite a lot of trouble identifying where there are problems with rtl displays.

It would be useful for me to know what problems my changes do not address. Where are the other problems that we need to resolve for Drupal to be able to support Arabic, Persian, & Hebrew properly? What are the options that people will want and how do you deal with ltr text blocks that may come up?

I find with drupal the way to move it into a release will be to make the changes as simple as possible and then build support around them. If we have a few patches that will make rtl languages supported by a default install of Drupal, then we have to start talking about it, testing it and demonstrating that this is a change worth adopting for the whole community.

Mike
--
Mike Gifford, OpenConcept Consulting
Free Software for Social Change -> http://www.openconcept.ca

Ayman’s picture

Thanks again for your efforts!

The theme still lacks styles for rtl elements, I haven't went through all elements, but I think the majority can be themed when locale is rtl.

As for dealing with ltr blocks, there is alaa's bidi module, tinymce's bidirectionality plugin, or letting the user manually type HTML code for flipping direction.

--
Ayman Hourieh
http://aymanh.com/

kbahey’s picture

I am adding the CSC-SY case study to this discussion.
--
Drupal development and customization: 2bits.com
Personal: Baheyeldin.com

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Ayman’s picture

BiDi theme is now in CVS. (Thanks kbahey for committing the files)

The theme can be used for right-to-left locale sites (like Arabic),
or multi-lingual sites with one or more enabled right-to-left
locales.

In a related note, I made a presentation about Drupal in Arabic a while back, it's available for download at this link:
http://aymanh.com/download/scs-oct-2005.pdf

I'll contact Dries and see if he can add it to the marketing material.

--
Ayman Hourieh
http://aymanh.com/

sepeck’s picture

http://drupal.org/node/13188

-sp
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

Ayman’s picture

HEAD version of the theme has undergone some changes, it doesn't require patching any more for bidi functionality, these updates are compatible with Drupal 4.6, please test and report issues, if all is well, the 4.6 version will be updated soon.

--
Ayman Hourieh
http://aymanh.com/

hoshantm’s picture

I do not think modules / themes should be used for RTL handling. RTL should be handled at the core if drupal is realy serious about multilingual support. The following features could help.
1) Make i18n part of drupal core
2) Since i18n module allows to specify the language of each element, it should automatically handle RTL.
3) Allow dir="rtl" tag to be used in nodes. That will allow to embed RTL and LTR languages within the same node/page/book page. In RTL nodes, one would have to specify the LTR tag to overwrite the RTL node direction. In LTR nodes, an RTL tag would overwrite the LTR node direction.

Ayman’s picture

Hi,

I'm sorry I totally forgot about uploading my work on the Arabic translation, here is my ar.po:
http://aymanh.com/download/ar.po.gz

It contains almost all of the user interface, and many parts of the admin interface, for core version 4.6 and some contrib modules.

I'll notify translation maintainers about this too, hopefully they can make some use of it.

--
Ayman Hourieh
http://aymanh.com/

munzirtaha’s picture

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 could easily 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 over drupal 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 can send a complete file or put it in an 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.

// $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/OpenBug

I3lind5pot’s picture

this is all nice and good but here is the problem , i am a total n00b in this subject so i dont know what to do and where to put all those scripts , i have managed to edit scripts at phpBB forums with some help but here , it seems like i am looking on a board full of nothing , i dont understand what i have to do , so please people , help me out in this subject .....

another thing , i have installed the Bidi theme succefully and it was all good but ..... for the things i am planning to do with my website i need a little bit more stylish looking website and Bidi doesnt seem so "beautiful" or "attracting" , and as i have read , making a new theme is hell of a hard work and needs alot of experiance in designing and as i have said i am a n00b in those subject .....

i hope you can help me

I3lind5pot

amir abbas’s picture

excuse me my language is persian and its right to left language like arabic
this changes are not clear for me
could you explain it more
im new with drupal

--
www.persi-cms.com

danirob’s picture

Hi,
I tried to introduce the two tags you recommended in my XML file but they did not work. I don't know exactly where and how to place them. Sorry........

The text is in Farsi and need to be RTL and right align.
My XML file is like this:

<?xml version="1.0" encoding="UTF-8"?>>
<props>>
<txt1>Normal Text in English تحولی عظیم درروشهای آموزش زبان انگلیسی است.</txt1>
<txt2></txt2>
.
.
.
<txt25></txt25>
</props>

Please let me know if you can help.

amir abbas’s picture

excuse me my language (persian) is like arabic
i dont know how can i change the direction of the page
im new with drupal :(

--
www.persia-cms.com

druvision’s picture

FYI - I've added an issue to allow (+preliminary code) to allow RTL support in core. For the meanwhile - Support was added to i18n - but please help in moving this support to core and helping it become automatic.

david007’s picture

I started a Drupal Arabic translation project ;)
____________________________
Insurance Center

transformative’s picture

We had to modify a theme to allow Arabic as well.

Here is what we put in the head of our page.tpl.php page to make it work.

 <style type="text/css">
.rtl { direction: rtl; unicode-bidi: embed; }
.ltr { direction: ltr; unicode-bidi: embed; }
<?php if (in_array($language, array('ar', 'fa', 'ur', 'he'))) {
echo 'body { direction: rtl; unicode-bidi: embed; }
p { direction: rtl; unicode-bidi: embed; }
#navigation a { text-align:right; }';
} ?>
</style> 

A further description can be found here:

http://openconcept.ca/blog/kevin/i18n/theme_changes/bidi

lameei’s picture

subscribing!!!!

ameenr’s picture

finally, i've found drupal arabic, at http://ifadah.net/drupal.. and i'm running it at one of my sites.