All: Support RTL and LTR in RTL context

Supporting RTL in a LTR context is implicit
RTL is invoked by using a ui-rtl class wrapper with dir="rtl" attribute.
LTR in a RTL context is invoked by using a ui-ltr class wrapper and
accompanying dir="ltr" inside the ui-rtl wrapper.
ui-btn-start, ui-btn-end, ui-btn-icon-start and ui-btn-icon-end has been
added to allow easier ordering of elements,
as a replacement for *-left and *-right counterparts.
Tests have not been 100% updated with RTL considerations in this commit.
The only test updates are the ones needed to pass all current tests.
Transitions have not been included in RTL considerations.
RTL versions of demos have been copied and modified from
their LTR counterparts, and
can be accessed from the Right To Left option on the demos menu.

Ref jquery-archivegh-5167

Author: rhelms

css/structure/jquery.mobile.collapsible.css

@@ -17,10 +17,24 @@
 	border-left-width: 0;
 	border-right-width: 0;
 }
+.ui-rtl .ui-collapsible-heading .ui-btn {
+	text-align: right;
+}
+.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn {
+	text-align: left;
+}
 .ui-collapsible-heading .ui-btn-icon-top,
 .ui-collapsible-heading .ui-btn-icon-bottom {
 	text-align: center;
 }
+.ui-rtl .ui-collapsible-heading .ui-btn-icon-top,
+.ui-rtl .ui-collapsible-heading .ui-btn-icon-bottom {
+	text-align: center;
+}
+.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn-icon-top,
+.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn-icon-bottom {
+	text-align: center;
+}
 .ui-collapsible-inset .ui-collapsible-heading .ui-btn {
 	border-right-width: 1px;
 	border-left-width: 1px;

css/structure/jquery.mobile.controlgroup.css

@@ -47,6 +47,20 @@ fieldset.ui-controlgroup {
 	float: left;
 	clear: none;
 }
+.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
+.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
+.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
+.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
+.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
+	float: right;
+}
+.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
+.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
+.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
+.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
+.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
+	float: left;
+}
 .ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
 .ui-controlgroup-controls .ui-btn-icon-notext {
 	width: auto;
@@ -68,9 +82,16 @@ fieldset.ui-controlgroup {
 .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
 	border-right-width: 0;
 }
+.ui-rtl :not(.ui-ltr) .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
+	border-right-width: 1px;
+	border-left-width: 0;
+}
 .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
 	border-right-width: 1px;
 }
+.ui-rtl :not(.ui-ltr) .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-first-child {
+	border-left-width: 1px;
+}
 .ui-controlgroup-controls .ui-btn-corner-all,
 .ui-controlgroup-controls .ui-btn.ui-corner-all {
 	-webkit-border-radius: 0;

css/structure/jquery.mobile.core.css

@@ -73,6 +73,16 @@ div.ui-mobile-viewport {
 	visibility: hidden;
 }
 
+.ui-rtl {
+	direction: rtl;
+	text-align: right;
+}
+
+.ui-ltr {
+	direction: ltr;
+	text-align: left;
+}
+
 /* Non-js content hiding */
 .ui-nojs {
 	position: absolute !important;
@@ -103,6 +113,10 @@ div.ui-mobile-viewport {
 	margin-left: -1.4375em;
 	margin-top: -1.4375em;
 }
+.ui-rtl .ui-load-default {
+	margin-left: 0;
+	margin-right: -1.4375em;
+}
 .ui-loader-verbose {
 	width: 12.5em;
 	filter: Alpha(Opacity=88);
@@ -113,6 +127,10 @@ div.ui-mobile-viewport {
 	margin-top: -2.6875em;
 	padding: .625em;
 }
+.ui-rtl .ui-loader-verbose {
+	margin-left: 0;
+	margin-right: -6.875em;
+}
 .ui-loader-default h1 {
 	font-size: 0;
 	width: 0;
@@ -143,6 +161,10 @@ div.ui-mobile-viewport {
 	padding: .9375em;
 	margin-left: -7.1875em;
 }
+.ui-rtl .ui-loader-textonly {
+	margin-left: 0;
+	margin-right: -7.1875em;
+}
 .ui-loader-textonly .ui-icon-loading {
 	display: none;
 }
@@ -193,6 +215,10 @@ div.ui-mobile-viewport {
 	white-space: nowrap;
 	outline: 0 !important;
 }
+.ui-rtl .ui-header .ui-title,
+.ui-rtl .ui-footer .ui-title {
+	text-overflow: clip;
+}
 .ui-footer .ui-title {
 	margin: 0 1em;
 }
@@ -237,6 +263,9 @@ div.ui-mobile-viewport {
 	-ms-user-select: none;
 	user-select: none;
 }
+.ui-rtl .ui-btn {
+	text-overflow: clip;
+}
 .ui-btn-icon-notext,
 .ui-header button.ui-btn.ui-btn-icon-notext,
 .ui-footer button.ui-btn.ui-btn-icon-notext {
@@ -266,7 +295,9 @@ div.ui-mobile-viewport {
 
 /* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
 .ui-header .ui-btn-left,
-.ui-header .ui-btn-right {
+.ui-header .ui-btn-right,
+.ui-header .ui-btn-start,
+.ui-header .ui-btn-end {
 	font-size: 12.5px;
 }
 .ui-mini.ui-btn-icon-notext,
@@ -281,12 +312,34 @@ div.ui-mobile-viewport {
 	vertical-align: middle;
 	margin-right: .625em;
 }
-.ui-btn-icon-left {
+.ui-rtl .ui-btn-inline {
+	margin-right: 0;
+	margin-left: .625em;
+}
+.ui-btn-icon-left,
+.ui-btn-icon-start {
 	padding-left: 2.5em;
 }
-.ui-btn-icon-right {
+.ui-rtl .ui-btn-icon-start {
+    padding-right: 2.5em;
+    padding-left: 1em;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-start {
+    padding-left: 2.5em;
+    padding-right: 1em;
+}
+.ui-btn-icon-right,
+.ui-btn-icon-end {
 	padding-right: 2.5em;
 }
+.ui-rtl .ui-btn-icon-end {
+    padding-left: 2.5em;
+    padding-right: 1em;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-end {
+    padding-right: 2.5em;
+    padding-left: 1em;
+}
 .ui-btn-icon-top {
 	padding-top: 2.5em;
 }
@@ -302,6 +355,8 @@ div.ui-mobile-viewport {
 }
 .ui-btn-icon-left:after,
 .ui-btn-icon-right:after,
+.ui-btn-icon-start:after,
+.ui-btn-icon-end:after,
 .ui-btn-icon-top:after,
 .ui-btn-icon-bottom:after,
 .ui-btn-icon-notext:after {
@@ -313,34 +368,106 @@ div.ui-mobile-viewport {
 }
 .ui-btn-icon-notext:after,
 .ui-btn-icon-left:after,
-.ui-btn-icon-right:after {
+.ui-btn-icon-right:after,
+.ui-btn-icon-start:after,
+.ui-btn-icon-end:after {
 	top: 50%;
 	margin-top: -11px;
 }
-.ui-btn-icon-left:after {
+.ui-btn-icon-left:after,
+.ui-btn-icon-start:after {
 	left: .5625em;
 }
-.ui-btn-icon-right:after {
+.ui-rtl .ui-btn-icon-start:after {
+    right: .5625em;
+    left: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-start:after {
+    left: .5625em;
+    right: auto;
+}
+.ui-btn-icon-right:after,
+.ui-btn-icon-end:after {
 	right: .5625em;
 }
+.ui-rtl .ui-btn-icon-end:after {
+    left: .5625em;
+    right: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-end:after {
+    right: .5625em;
+    left: auto;
+}
 .ui-mini.ui-btn-icon-left:after,
 .ui-mini .ui-btn-icon-left:after,
 .ui-header .ui-btn-icon-left:after,
-.ui-footer .ui-btn-icon-left:after {
+.ui-footer .ui-btn-icon-left:after,
+.ui-mini.ui-btn-icon-start:after,
+.ui-mini .ui-btn-icon-start:after,
+.ui-header .ui-btn-icon-start:after,
+.ui-footer .ui-btn-icon-start:after {
 	left: .37em;
 }
+.ui-rtl .ui-mini.ui-btn-icon-start:after,
+.ui-rtl .ui-mini .ui-btn-icon-start:after,
+.ui-rtl .ui-header .ui-btn-icon-start:after,
+.ui-rtl .ui-footer .ui-btn-icon-start:after {
+    right: .37em;
+    left: auto;
+}
+.ui-rtl .ui-ltr .ui-mini.ui-btn-icon-start:after,
+.ui-rtl .ui-ltr .ui-mini .ui-btn-icon-start:after,
+.ui-rtl .ui-ltr .ui-header .ui-btn-icon-start:after,
+.ui-rtl .ui-ltr .ui-footer .ui-btn-icon-start:after {
+    left: .37em;
+    right: auto;
+}
 .ui-mini.ui-btn-icon-right:after,
 .ui-mini .ui-btn-icon-right:after,
 .ui-header .ui-btn-icon-right:after,
-.ui-footer .ui-btn-icon-right:after {
+.ui-footer .ui-btn-icon-right:after,
+.ui-mini.ui-btn-icon-end:after,
+.ui-mini .ui-btn-icon-end:after,
+.ui-header .ui-btn-icon-end:after,
+.ui-footer .ui-btn-icon-end:after {
 	right: .37em;
 }
+.ui-rtl .ui-mini.ui-btn-icon-end:after,
+.ui-rtl .ui-mini .ui-btn-icon-end:after,
+.ui-rtl .ui-header .ui-btn-icon-end:after,
+.ui-rtl .ui-footer .ui-btn-icon-end:after {
+    left: .37em;
+    right: auto;
+}
+.ui-rtl .ui-ltr .ui-mini.ui-btn-icon-end:after,
+.ui-rtl .ui-ltr .ui-mini .ui-btn-icon-end:after,
+.ui-rtl .ui-ltr .ui-header .ui-btn-icon-end:after,
+.ui-rtl .ui-ltr .ui-footer .ui-btn-icon-end:after {
+    right: .37em;
+    left: auto;
+}
 .ui-btn-icon-notext:after,
 .ui-btn-icon-top:after,
 .ui-btn-icon-bottom:after {
 	left: 50%;
 	margin-left: -11px;
 }
+.ui-rtl .ui-btn-icon-notext:after,
+.ui-rtl .ui-btn-icon-top:after,
+.ui-rtl .ui-btn-icon-bottom:after {
+	left: 0;
+	right: 50%;
+	margin-left: 0;
+	margin-right: -11px;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-notext:after,
+.ui-rtl .ui-ltr .ui-btn-icon-top:after,
+.ui-rtl .ui-ltr .ui-btn-icon-bottom:after {
+	left: 50%;
+	right: 0;
+	margin-left: -11px;
+	margin-right: 0;
+}
 .ui-btn-icon-top:after {
 	top: .5625em;
 }
@@ -352,28 +479,70 @@ div.ui-mobile-viewport {
 .ui-header .ui-btn-left,
 .ui-header .ui-btn-right,
 .ui-btn-left > [class*="ui-"],
-.ui-btn-right > [class*="ui-"] {
+.ui-btn-right > [class*="ui-"],
+.ui-header .ui-btn-start,
+.ui-header .ui-btn-end,
+.ui-btn-start > [class*="ui-"],
+.ui-btn-end > [class*="ui-"]{
 	margin: 0;
 }
 .ui-btn-left,
-.ui-btn-right {
+.ui-btn-right,
+.ui-btn-start,
+.ui-btn-end {
 	position: absolute;
 	top: .24em;
 }
-.ui-btn-left {
+.ui-btn-left,
+.ui-btn-start {
 	left: .4em;
 }
-.ui-btn-right {
+.ui-rtl .ui-btn-start {
+    right: .4em;
+    left: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-start {
+    left: .4em;
+    right: auto;
+}
+.ui-btn-right,
+.ui-btn-end {
 	right: .4em;
 }
-.ui-btn-icon-notext.ui-btn-left {
+.ui-rtl .ui-btn-end {
+    left: .4em;
+    right: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-end {
+    right: .4em;
+    left: auto;
+}
+.ui-btn-icon-notext.ui-btn-left,
+.ui-btn-icon-notext.ui-btn-start {
 	top: .3125em;
 	left: .3125em;
 }
-.ui-btn-icon-notext.ui-btn-right {
+.ui-rtl .ui-btn-icon-notext.ui-btn-start {
+    right: .3125em;
+    left: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-notext.ui-btn-start {
+    left: .3125em;
+    right: auto;
+}
+.ui-btn-icon-notext.ui-btn-right,
+.ui-btn-icon-notext.ui-btn-end {
 	top: .3125em;
 	right: .3125em;
 }
+.ui-rtl .ui-btn-icon-notext.ui-btn-end {
+    left: .3125em;
+    right: auto;
+}
+.ui-rtl .ui-ltr .ui-btn-icon-notext.ui-btn-end {
+    right: .3125em;
+    left: auto;
+}
 
 /* Button elements */
 button.ui-btn,

css/structure/jquery.mobile.fixedToolbar.css

@@ -16,11 +16,15 @@
 	padding-top: 0;
 }
 .ui-header-fixed .ui-btn-left,
-.ui-header-fixed .ui-btn-right {
+.ui-header-fixed .ui-btn-right,
+.ui-header-fixed .ui-btn-start,
+.ui-header-fixed .ui-btn-end {
 	margin-top: 1px;
 }
 .ui-header-fixed.ui-fixed-hidden .ui-btn-left,
-.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
+.ui-header-fixed.ui-fixed-hidden .ui-btn-right,
+.ui-header-fixed.ui-fixed-hidden .ui-btn-start,
+.ui-header-fixed.ui-fixed-hidden .ui-btn-end {
 	margin-top: 0;
 }
 .ui-footer-fixed {