Developing multilingual websites using PHP, part 3 – Right-to-Left vs. Left-to-Right

The problem

 

 

When developing a website for Hebrew and other languages, there is an additional issue to deal with.  If all the languages are left-to-right, then it is straightforward to use the same template or design with all languages.  All that needs to be switched when the site is viewed in a different language is the text.  However, with Hebrew, people are reading the website in the opposite direction.  Many website designs have something displayed on the right or left side of the page.  When the page is read in the opposite direction, it is usually advised to put the displays on the opposite sides of the page.  To do this, one may just change the entire direction of the page from left-to-right to right-to-left by inserting this piece of CSS in the “body” tag:

style=”direction:rtl”

 

 

Alternatively, one may put in the CSS file:

body { direction:rtl }

 

 

Still, even after changing the direction of the entire document, there remains an issue – the border definitions in CSS are also in the opposite direction.

For example, if I want to have a blue, solid border separating the left area and the main area, I can assign a class “left_area” to the left area and define the following in CSS:

left_area { border-right: solid blue 1px }

However, if I change the direction of the document to right-to-left, and the “left_area” is now on the right side of the page, instead of having a border in between the “left_area” and the main page, the CSS definition above will cause the line to be displayed on the right side of the page, and not in between the sections.

Solutions

 

 

One possible solution is to make a separate template or CSS file for right-to-left languages.  The disadvantage is that this causes duplicate code, and if the design is changed, it needs to be changed in twice as many places.

My suggestion is to dynamically generate the CSS file using PHP.  Instead of calling the CSS file style.css, I would call it style.css.php.  In the link, one can add a parameter dir to indicate the direction of the document.

Hence, instead of this link in the HTML header:

 

 

 

One can use the following link instead, where the PHP variable $page_dir indicates the direction of the document.

 

 

In the CSS document itself, one would then assign variables the appropriate values for the directions.

 

 $page_dir=isset($_REQUEST[‘dir’])? $_REQUEST[‘dir’]:’ltr’;

 

 

 $left=($page_dir==’ltr’)?’left’:’right’;

 

 

 $right=($page_dir==’ltr’)?’right’:’left’;

 

 

?>

 

 

In the CSS document itself, instead of hard-coded right and left directions, like this:

left_area { border-right: solid blue 1px; }

 

 

One can use the variables to define the directions, like this

left_area { border-: solid blue 1px; }

 

 

Doing this, one can design the website for one language and seamlessly have it displayed in a different language in the opposite direction.

This entry was posted in Uncategorized and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>