Live preview

RTL support

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:

Live preview

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

Always use LTR:

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

Live preview

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

:Always use RTL

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

Live preview

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