jQuery Forum

I have been working on RTL support for jQuery Mobile and you asked on twitter how to make this more maintainable.

I suggest adding an RTL property to the page class/element; then check this property before setting any button/icon default positions and check it in sliders code as shown below; then make another RTL CSS file that overrides/reverses some values (floats, margins, text-direction.. etc) which users can simply link when RTL support is needed.

Here is my idea:

1) Make a property for RTL, I would make it a boolean and name it IsRTL or make it as an enumeration or a string and name it something like data-uidirection. The default value is false/ltr so it should be explicity set on the mark-up when RTL is needed, for example:

<div data-role="page" data-uidirection="rtl">

...

</div>

2) In jQuery JS file check the property in the slider code to make sliders and flip switches work properly, the value should be increased when dragging the handle to the LEFT or pressing the LEFT button and vice versa:

The switch statement on line 7792 may look like this:

For handle dragging, I guess its code on line 7860 and you can only subtract the percent from 100, like:

Then finally on line 7901 check the property to decide which CSS to change:

Line 4807, if it is RTL the back button should be on the right and its arrow should be a right arrow: