How to automatically change the site direction LTR\RTL?

**the.contender** · 05-26-2010, 06:18 PM

Hi all

I am looking to make my site bilingual (Arabic\English) that's mean 2 different directions

English => LTR "Left To Right"
Arabic => RTL "Right To Left"

so, i need a script "Like facebook" that when the user choose Arabic Language the site will change the whole template+Text to RTL, and the exact opposite when choose English language.

Thanks & Best Regards,

P.S I've searched on this forum for this case, but i didn't find a useful info, so if there is a post talk about the same issue and it's [Resolved] kindly put the link below.

**djr33** · 05-26-2010, 08:06 PM

There are several ways to approach this. I am working on a similar site.

The 'dir' attribute can attach to many tags. You can specify it on each if you would like or you can just use it for the whole html tag:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">

The way that my site works is that the 'ltr' (and 'en') values are automatically generated using PHP.
I think you could also do this using Javascript, but it is probably better to do this on the server (PHP, ASP, CGI, etc) because then it won't require Javascript so it will work for all users.

That is a complete solution, unless you need to mix languages. In that case, use <tag dir="ltr"> (or rtl) as needed.

That will not actually reverse the layout, just the text. If you want to mirror the entire site (this will be confusing for images), then you can use that and also switch every instance of "left" and instance of "right" in your CSS and html and it will flip it. For example: <div align="left"> vs <div align="right">
I thought about doing this for my site (decided to not make it this complicated), and here is the idea that I had (and it worked):
<div align="<?php echo $left; ?>">

That line outputs a variable called "left".
If the language is LTR then I set that to 'left' (so it reads: align="left").
If the language is RTL then I set that to 'right' (so it reads: align="right").
So I use $left and $right based on the English direction. For arabic, $left would be "right" and $right would be "left".
You could also name them $startdir and $enddir, but that is a little more confusing. Basically I look at it as designing the site for English then allowing Arabic to switch it. (You could do the opposite).

In general just changing the direction on the <html> tag should be enough.

**the.contender** · 05-26-2010, 10:34 PM

thanks a lot djr33 !

can you please write the script

i am not that expert on Java scripts

,but on php i can help

let's say i want to mirror the entire site

and the lang variable is "&lang_id=5" thats for Arabic, Eng is "&lang_id=1"

I appreciate your efforts to help me

**djr33** · 05-27-2010, 01:15 AM

Everything I've described is for PHP, not Javascript.

Why do you need this for Javascript? Are you changing the language using Javascript?

Or would you like to use PHP?

**the.contender** · 05-27-2010, 01:00 PM

Originally Posted by djr33

Everything I've described is for PHP, not Javascript.

Why do you need this for Javascript? Are you changing the language using Javascript?

Or would you like to use PHP?

i am not that prof in coding

i am just studying php till now

i am recently work on Social Engine called SE, but it doesn't support auto swap between RTL\LTR langs ...

so, can you please write the code...??

thanks in advance

**djr33** · 05-27-2010, 05:40 PM

PHP Code:


<?php
$language = 'arabic'; //or 'english' //set the system language
$rtl = array('arabic','hebrew','urdu'); //make a list of rtl languages
$textdir = 'ltr';
if (in_array($language,$rtl)) { //is this a rtl language?
    $textdir = 'rtl'; //switch the direction
} //end if
?>
<html dir="<?php echo $textdir; ?>">
<!--now the HTML tag has the right direction in it, either rtl or ltr-->

If you don't understand that, then you should read some tutorials. It's not really possible to explain it better. If you'd prefer that someone does this for you (this is a 'help' forum, not a 'do-it-for-you' forum), then you could post this as a paid request and you won't need to do it yourself. But for free, the example above is close enough.

If you have a specific question about some code you have, please post the code. But without code (just asking for ideas), there's not much more I can do.

Thread: How to automatically change the site direction LTR\RTL?

Thread Tools

Search Thread

How to automatically change the site direction LTR\RTL?

Bookmarks

Bookmarks

Posting Permissions