Switching from ltr to rtl in Templates

In response to the award that Mahmood is giving out for bidirectional text I figured I might give a couple of tips of how I would approach the issue so that we see some competition for the award.

The theme should have a simple "switch" to allow the user to change the theme's orientation from Right-to-Left, or Left-to-Right depending on language - for example, "English" and "Arabic" buttons.

From reading this, a switch would be essentially a session var that you want to set in your theme, preferably in pages/default. So the first thing that you want to do is set the page that you are working on to be able to grab that session var to set it. Here is a very easy trick:

<xar:set name="dummy"> xarVarFetch( 'langswitch', 'str:1', $langswitch, 'ltr', XARVAR_NOT_REQUIRED, XARVAR_PREP_FOR_DISPLAY); </xar:set>

What this will do is look for the $langswitch on each page that is being loaded. We want to prep the var to prevent any XSS problem, and we only want to look for a string since we are changing between ltr and rtl. You will want to do this after the initial dummy set for the xarVarFetch since we are reusing that nomenclature, and it is necessary to look for the $langswitch to begin with and we need to make sure that we actually get the session var for use:

<xar:if condition="isset($langswitch)"> <xar:set name="dummy"> xarSessionSetVar('langsession', $langswitch) </xar:set> </xar:if> <xar:set name="langsession"> xarSessionGetVar('langsession') </xar:set> <xar:if condition="empty($langsession)"> <xar:set name="langsession"> rtl </xar:set> </xar:if>

We are doing two things here. First, we are setting the $langswitch var when we see it come across as a $_GET var. Second, we are getting the $langsession var so that we can process it later. Finally, we want to make sure the var is set so we don't get any nasty php E_ALL errors later when we use this variable.

So far we have done all of our processing before the initial <html> tag. Now, lets get into the actual processing which becomes rather easy. All we need to do from this point on is switch our stylesheet that we load to either our ltr or rtl style sheet.

<xar:if condition="$langsession eq rtl"> <style type="text/css"> @import url(&xar-baseurl;#xarTplGetThemeDir()#/style/rtl.css); </style> <xar:else /> <style type="text/css"> @import url(&xar-baseurl;#xarTplGetThemeDir()#/style/ltr.css); </style> </xar:if>

And your stylesheet would need to have is something along these lines if I am not mistaken:

Code:

@import url(style.css);
body
{
direction: rtl;
}

Code:

@import url(style.css);
body
{
direction: ltr;
}

Depending on whether you want ltr or rtl text.

Finally, we need some way to set our "switch" which is mentioned in the requirements. Also, very easy to do. All we need is a link to our current page with a parameter. If memory serves, here is all you would need to do:

<xar:if condition="$langsession eq rtl"> <a href="#xarServerGetCurrentUrl(array('langswitch' => 'ltr'))#> <xar:mlstring> Left to Right Text </xar:mlstring> </a> <xar:else /> <a href="#xarServerGetCurrentUrl(array('langswitch' => 'rtl'))#> <xar:mlstring> Right to Left Text </xar:mlstring> </a> </xar:if>

This is a very simple trick to add a parameter on to the current URL. By doing this, we start the processing that was explained earlier.

Taking this idea further, what you probably want to do is set the locale and look for a dynamic data switch to know to only display articles or content in the current language. I'll leave that for another tutorial on the subject.

Print | Related

John Cox

Switching from ltr to rtl in Templates