Opened 3 years ago

Last modified 3 years ago

#14923 new feature

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.

Change History (6)

comment:1 in reply to:  description Changed 3 years ago by 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?

comment:2 Changed 3 years ago by Scott González

Component: ui.core[meta] ui.dev
Version: git1.11.4

comment:3 Changed 3 years ago by ahmedasaleh

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

comment:4 Changed 3 years ago by Scott González

Today at noon ET.

Last edited 3 years ago by Scott González (previous) (diff)

comment:5 Changed 3 years ago by Ahmed Mustafa

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

comment:6 Changed 3 years ago by 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" );
Last edited 3 years ago by Ryan J Ollos (previous) (diff)
Note: See TracTickets for help on using tickets.