mirroring widgets to support RTL languages

[ahmedasaleh]

For languages with RTL direction like Arabic , it is required to mirror any possible widget. So for example a progress bar should start the progress from right side and continue progressing till left side. In order to support mirroring of JQuery widgets, we propose the following:

1-Create another RTL-theme folder to be a placeholder for the mirrored .css files.

2-The rtl-css files wont be a duplication of the original css files. It will contain the classes that need to be changed only. Thus, we should be sure that the final "jquery-ui.css" contains classes from both files.

3-Add "dir" attribute & "isRtl()" function to the "Base Widget" module to indicate the rendering direction of the widget "RTL / LTR".

4-Accordingly, changes should be made within some js files (position.js ...etc) to be rendered correctly in RTL-layout.

We have done some progress, if our approach is OK for you we will create a PR on Github.

It worth mentioning that we will add the support for bunch of widgets and some utils.

[Scott González]

Replying to ahmedasaleh:

Thanks for your interest in improving RTL support. We'd love to have your help.

1-Create another RTL-theme folder to be a placeholder for the mirrored .css files.

This shouldn't be a separate folder. Every theme should support RTL.

2-The rtl-css files wont be a duplication of the original css files. It will contain the classes that need to be changed only. Thus, we should be sure that the final "jquery-ui.css" contains classes from both files.

I'm not sure that this can be generically done in a single theme file as opposed to specific changes in the widget files (plus some generic rules in the theme).

3-Add "dir" attribute & "isRtl()" function to the "Base Widget" module to indicate the rendering direction of the widget "RTL / LTR".

We want to try to avoid this and detect the direction from the DOM. See #11053.

4-Accordingly, changes should be made within some js files (position.js ...etc) to be rendered correctly in RTL-layout.

Position seems like one of the few places where a change *shouldn't* happen, but we can discuss that in a separate ticket.

We have done some progress, if our approach is OK for you we will create a PR on Github.

Are you able to join our weekly meeting tomorrow at noon ET in #jquery-meeting on irc.freenode.net?

[ahmedasaleh]

My colleague will join and discuss with you your concerns, at which time exactly the meeting?

[Scott González]

Today at ​noon ET.

[Ahmed Mustafa]

I've installed ChatZilla, what should be my next step ?

[Ahmed Mustafa]

Based on your comments, I would suggest the following approach:

1- Create *.rtl.css file for every existing *.css file.

e.g. themes/base/accordion.rtl.css

            .rtl .ui-accordion .ui-accordion-header {
                padding: .5em .7em .5em .5em;
            }

2- Create isRtl() function inside the "Base Widget" module as follows:

    isRtl: function() {
        return this.widget().css( "direction" );
    }

3- Make minor changes to ui/widgets/*.js to make sure that every widget displayed correctly in RTL layout.

e.g. ui/widgets/accordion.js: _create()

        if( this.isRtl() )
            this._addClass( "ui-accordion", "rtl" );