[Resolved] Bootstrap not RTL

[Author]

Posts

[Nashaat]

Hi,

I am using a Cred form and customize it using Bootstrap GRID columns.
The form look good in LTR but when changing the site to RTL, bootstrap still showing LTR instead RTL.

Please see form here : hidden link

If you take a look at the 18 colorpicker fields on the end of the form you can see that the numbers in the Label are LTR even in RTL mode.

what is the best solution for this? or how to load RTL bootstrap in toolset to solve this issue?

Thanks.

[Beda]

First, and this honestly I did not know, it seems Bootstrap 3 is not fully RTL ready:
https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3
It needs some tweaks.

Second, your labels are already RLT, if you compare to your source code you'll see that it's already RTL, but the number itself is not, and that seems to be another known issue:
https://stackoverflow.com/questions/8227183/rtl-is-on-web-page-reverses-numbers-with-a-dash

I think this needs some local tweaks to the CSS - best case you add this to your RTL styles so you can call them from within the theme you use.

I am honestly not even sure if Latin Numbers should be written RTL.
IMO (But I am honestly not sure about this) latin numbers are written and read always LTR.
This because if someone reads those numbers, will know they are latin since every non-LTR language as well has it's "equivalent" signs for numeric values, which then are written RTL.

What I mean is, to have those labels in a proper RTL format the numeric value likey should be written in Hebrew as well (א‬, ב‬, ג) etc.

I am not language specialist, please do correct me if I am wrong with this assumption.

[Nashaat]

Thanks for your Answer!

The problem with the labels i think it was misunderstanding. The label work just fine, but the column still LTR, since we know now that Bootstrap 3 is not rtl supported.

I ckecked the link : https://stackoverflow.com/questions/19730598/right-to-left-support-for-twitter-bootstrap-3

I see a solution there to use bootstrap RTL theme, which is not possible to do because i am using astra and would like to continue using it.

I found another solution on there but dont know how to implement it in my case? Where should i use or insert this code? Which directory?

"All you need to do is call the function layout.setDirection('rtl') or layout.setDirection('ltr') and it will change the CSS Rules for Bootstrap 3 grid system.

Should work on all browsers"

        var layout = {};
        layout.setDirection = function (direction) {
            layout.rtl = (direction === 'rtl');
            document.getElementsByTagName("html")[0].style.direction = direction;
            var styleSheets = document.styleSheets;
            var modifyRule = function (rule) {
                if (rule.style.getPropertyValue(layout.rtl ? 'left' : 'right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-push-\d\d*/)) {
                    rule.style.setProperty((layout.rtl ? 'right' : 'left'), rule.style.getPropertyValue((layout.rtl ? 'left' : 'right')));
                    rule.style.removeProperty((layout.rtl ? 'left' : 'right'));
                }
                if (rule.style.getPropertyValue(layout.rtl ? 'right' : 'left') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-pull-\d\d*/)) {
                    rule.style.setProperty((layout.rtl ? 'left' : 'right'), rule.style.getPropertyValue((layout.rtl ? 'right' : 'left')));
                    rule.style.removeProperty((layout.rtl ? 'right' : 'left'));
                }
                if (rule.style.getPropertyValue(layout.rtl ? 'margin-left' : 'margin-right') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-offset-\d\d*/)) {
                    rule.style.setProperty((layout.rtl ? 'margin-right' : 'margin-left'), rule.style.getPropertyValue((layout.rtl ? 'margin-left' : 'margin-right')));
                    rule.style.removeProperty((layout.rtl ? 'margin-left' : 'margin-right'));
                }
                if (rule.style.getPropertyValue('float') && rule.selectorText.match(/\.col-(xs|sm|md|lg)-\d\d*/)) {
                    rule.style.setProperty('float', (layout.rtl ? 'right' : 'left'));
                }
            };
            try {
                for (var i = 0; i < styleSheets.length; i++) {
                    var rules = styleSheets[i].cssRules || styleSheets[i].rules;
                    if (rules) {
                        for (var j = 0; j < rules.length; j++) {
                            if (rules[j].type === 4) {
                                var mediaRules = rules[j].cssRules || rules[j].rules
                                for (var y = 0; y < mediaRules.length; y++) {
                                    modifyRule(mediaRules[y]);
                                }
                            }
                            if (rules[j].type === 1) {
                                modifyRule(rules[j]);
                            }

                        }
                    }
                }
            } catch (e) {
                // Firefox might throw a SecurityError exception but it will work
                if (e.name !== 'SecurityError') {
                    throw e;
                }
            }
        }

[Beda]

Well, Toolset offers a CSS/JS editor for Layouts - if you use Layouts, or below each Filter, Loop and Content Template editor, you can find a JS section as well to insert your custom JS.

However, I am honestly not supporting this approach.

1. It puzzles me that Bootstrap - one of the greatest libraries does not support RTL. I am ashamed I did not know about it, and I need to confirm this first with my colleagues, as I somehow don't want to believe it.

2. Whether above #1 is true or not does not really matter. I believe we cannot just neglect RTL and drive you to use Custom Code to solve this.

We should (if this is needed) add a "fix" for it I think.

I will discuss this with the guys and girls in my team and as well with the DEV.

Please let me time until Monday for this.
Someone else will then update you here most likely.

[Nashaat]

Thank you for your honesty Beda i really appreciate that.
I am surprised too that bootstrap has no RTL support. I didn't use it before but heard a lot about it and started to us it just with your plugin.

Even the grid in my item listing created with views plugin is LTR when RTL. see here: hidden link
while developing the site I was thinking (oh i no need to worry about it for now later i will solve it for sure its the "famous Bootstrap" for sure there is a solution) !

I hope we find a solution for this very soon i need to deliver this site to my client!
Thank you

[Beda]

Currently, the official Bootstrap Does not support RTL.
This is definitive.

The only solution to this is customizing Bootstrap.
Our Developer reccomended hidden link.

This means you need to enqueue this yourself in the Theme you use and then set "This Theme uses Bootstrap 3.0" in the Settings under Toolset > Settings > General.

For now, Toolset cannot solve this problem, however, we have filed a feature request for 2 things:
- Bootstrap 4 (which in future will hold RTL Support natively)
- BS 3 and lower RTL support thru Toolset

We can close this ticket here as there is not much we can do in regard unfortunately.