RTL Support and Limitations

RTL stands for “right-to-left” and this a key component when delivering a website in an RTL language such as Hebrew, Arabic, Urdu, etc. Gantry has built in RTL support which will automatically “flip” the content layouts and ordering to support RTL. We’ve also provided an override in the advanced section of the template details, so you can turn this default behavior off if you like. However, by default, if the language file supports it, RTL will be enabled.

RTL support is a very powerful feature for which Gantry provides a lot of heavy lifting. This short screencast shows how easy providing RTL support in your Gantry-powered template can be.

The toggle to tell Joomla that a language should be displayed in RTL format is located in the language's XML file. In the case of the default en-GB language, there is a configuration file located:

YOUR_SITE/languages/en-GB/en-GB.xml

This file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- $Id -->
<metafile version="1.5"  client="site" >
    <name>English(United Kingdom)</name>
    <tag>en-GB</tag>
    <version>1.5.15</version>
    <creationDate>2009-10-27</creationDate>
    <author>Joomla! Project</author>
    <authorEmail>admin@joomla.org</authorEmail>
    <authorUrl>www.joomla.org</authorUrl>
    <copyright>Copyright (C) 2005 - 2009 Open Source Matters. All rights reserved.</copyright>
    <license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
    <description></description>
    <metadata>
        <name>English (United Kingdom)</name>
        <tag>en-GB</tag>
        <rtl>0</rtl>
        <locale>en_GB.utf8, en_GB.UTF-8, en_GB, eng_GB, en, english, english-uk, uk, gbr, britain, england, great britain, uk, united kingdom, united-kingdom</locale>
        <winCodePage>iso-8859-1</winCodePage>
        <backwardLang>english</backwardLang>
        <pdfFontName>freesans</pdfFontName>
    </metadata>
    <params />
</metafile>

The relevant part is that rtl tag that is currently set to 0. By changing this value to 1, you effectively switch on RTL for this language.

A visual example of how this looks/works can be seen below. The first image is in the default english in the traditional LTR format, while the second one is the same default english but with the RTL toggle enabled in the en-GB.xml language file.

RTL Limitations

Gantry provides a great deal of functionality to support RTL right out of the box. However, RTL is complicated and your specific layout will need extensive RTL support in your CSS files to properly handle the needs of your design when in RTL mode. For example if you have a module header that is shaped like a ribbon that comes in on the left side of the module in regular LTR mode, then you must create a special version of this ribbon that comes in from the right for RTL mode. Also you will have to provide the specific changes to the layout in your CSS file to ensure this image is rendered correctly.

To help out with this process we have created a special feature that detects the RTL mode, and then inserts a class called rtl in the body tag. That way you can add specific rules such as:

body.rtl .module .ribbon {float:right;}

to just target the .ribbon class in RTL mode.

Other limitations are entirely based on the browsers. Some browsers support RTL mode very well. Not surprisingly these are the mozilla and webkit based browsers: Firefox, Safari, Chrome, etc. Internet Explorer, even the latest version 8.0 release does a very poor job of rendering in RTL mode, and you will probably have to spend extensive time doing CSS work-arounds for these browsers. This is far beyond the scope of what Gantry can do for you.