RTL support

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.

This script allows you to toggle between LTR and RTL without reloading the page. It is called by the oncomplete handler of an AJAX call.

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.

BootsFaces adds some limited support for RTL (right-to-left) languages. Many components offer a dir attribute. Setting it to rtl activates the support for right-to-left languages of your browser. You can read a good explanation of this feature here: http://www.i18nguy.com/markup/right-to-left.html.

However, RTL isn't fully supported by Bootstrap itself. So you need to add this library to fully active RTL support: https://github.com/morteza/bootstrap-rtl.

There's a catch: activating this library makes RTL the default. You can't revert this effect by using the dir="ltr" setting of the BootsFaces components. The RTL-to-LTR switcher of this page circumvents this problem by activating and deactivating the CSS file when you toggle the switch.

Examples

This is an example I found at http://www.i18nguy.com/markup/right-to-left.html, adapted to make use of <b:column /> and <b:panelGrid /> . As you can see, the CSS library https://github.com/morteza/bootstrap-rtl reverts the order of the columns:

Using the default direction:

European Digits
0
1
2
3
4
5
6
7
8
9
Arabic Digits
٠
١
٢
٣
٤
٥
٦
٧
٨
٩

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.

Always use LTR:

Setting dir="ltr" influences the text within the columns, but it doesn't change the column ordering itself:

European Digits
0
1
2
3
4
5
6
7
8
9
Arabic Digits
٠
١
٢
٣
٤
٥
٦
٧
٨
٩

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.

:Always use RTL

:Analogously, setting dir="rtl" influences the text within the columns, but it doesn't change the column ordering itself

European Digits
0
1
2
3
4
5
6
7
8
9
Arabic Digits
٠
١
٢
٣
٤
٥
٦
٧
٨
٩

Note that this tab always uses dir="ltr". Otherwise, the sourcecode looks a bit corrupted.