Right-to-Left
This document describes how to add RTL or Right-to-Left script support to your application, where the writing starts from the right of the page and continues to the left, for languages like Arabic, Hebrew, Syriac, Samaritan or Thaana.
Bootstrap RTL
Because the template is largely based on Bootstrap, we'll need to add RTL support for the Bootstrap framework first.
Installation
You can check if it's already installed by simply looking for the bower_components/bootstrap-rtl
directory.
Using Bower:
bower install bootstrap-rtl --save
Loading
Update src/less/themes/$THEME_NAME/vendor/bootstrap.less
, to include after the main bootstrap import:
// Load Bootstrap
@import "../../../vendor/bootstrap/bootstrap";
// Load Bootstrap RTL
@import "../../../vendor/bootstrap-rtl/bootstrap-rtl";
Now, when running the build process, $BUILD_PATH/$THEME_NAME/css/vendor/bootstrap.css
will include the regular Bootstrap, plus the newly added Bootstrap RTL package.
Basic usage
flip
The bootstrap-rtl
package pretty much handles automatically most of the elements provided by the Bootstrap framework and additionally includes a new CSS class flip
which you can add on all HTML elements using the following classes:
pull-left
pull-right
media-left
media-right
text-left
text-right
navbar-left
navbar-right
Example:
<div class="pull-left flip">
...
</div>
Swig templates
Some of the Swig templates included with our libraries, already provide support for RTL and can automatically add the flip
class when required. To enable this, update src/html/themes/$THEME_NAME/swig.json
or create the file if it doesn't exist already, with the following content:
{
"rtl": true
}
Now, within any Swig template that ends up being used in src/html/themes/$THEME_NAME/**/*.html
, you can conditionally apply the flip
class on any element:
<div class="pull-left{% if rtl %} flip{% endif %}">
...
</div>
Components
Most of our proprietary assets include RTL support.