#14923 new feature ()

Opened February 29, 2016 11:16AM UTC

Last modified March 02, 2016 05:15PM UTC

mirroring widgets to support RTL languages

Reported by: ahmedasaleh Owned by:
Priority: minor Milestone: none
Component: [meta] ui.dev Version: 1.11.4
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (6)

Changed March 01, 2016 02:00PM UTC by scottgonzalez comment:1

Replying to [ticket:14923 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?

Changed March 01, 2016 02:01PM UTC by scottgonzalez comment:2

component: ui.core → [meta] ui.dev
version: git → 1.11.4

Changed March 02, 2016 12:24PM UTC by ahmedasaleh comment:3

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

Changed March 02, 2016 02:15PM UTC by scottgonzalez comment:4

_comment0: Today at [https://www.timeanddate.com/worldclock/fixedtime.html?month=1&day=17&year=2011&hour=12&min=0&sec=0&p1=43 noon ET]. → 1456928180807334

Today at noon ET.

Changed March 02, 2016 04:36PM UTC by AhmedMustafa comment:5

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

Changed March 02, 2016 04:41PM UTC by rjollos comment:6

_comment0: 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" ); → 1456938924042654

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" );