Opened 7 years ago
Last modified 7 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 Changed 7 years ago by
comment:2 Changed 7 years ago by
Component: | ui.core → [meta] ui.dev |
---|---|
Version: | git → 1.11.4 |
comment:3 Changed 7 years ago by
My colleague will join and discuss with you your concerns, at which time exactly the meeting?
comment:6 Changed 7 years ago by
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" );
Replying to ahmedasaleh:
Thanks for your interest in improving RTL support. We'd love to have your help.
This shouldn't be a separate folder. Every theme should support RTL.
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).
We want to try to avoid this and detect the direction from the DOM. See #11053.
Position seems like one of the few places where a change *shouldn't* happen, but we can discuss that in a separate ticket.
Are you able to join our weekly meeting tomorrow at noon ET in #jquery-meeting on irc.freenode.net?