diff --git a/browser/components/loop/content/css/contacts.css b/browser/components/loop/content/css/contacts.css
index 7988c81483e..4d8579194c2 100644
--- a/browser/components/loop/content/css/contacts.css
+++ b/browser/components/loop/content/css/contacts.css
@@ -134,7 +134,7 @@
   background-color: #fff;
 }
 
-body[dir="rtl"] .contact > .details > .username > i.icon-google {
+html[dir="rtl"] .contact > .details > .username > i.icon-google {
   left: 1rem;
   right: auto;
 }
@@ -193,7 +193,7 @@ body[dir="rtl"] .contact > .details > .username > i.icon-google {
   left: auto;
 }
 
-body[dir="rtl"] .contact > .dropdown-menu {
+html[dir="rtl"] .contact > .dropdown-menu {
   right: auto;
   left: 3em;
 }
@@ -211,7 +211,7 @@ body[dir="rtl"] .contact > .dropdown-menu {
   margin-top: 3px;
 }
 
-body[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
+html[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
   background-position: center right;
 }
 
@@ -259,7 +259,7 @@ body[dir="rtl"] .contact > .dropdown-menu > .dropdown-menu-item > .icon {
   word-wrap: break-word;
 }
 
-body[dir=rtl] .contacts-gravatar-promo > p {
+html[dir="rtl"] .contacts-gravatar-promo > p {
   margin-right: 0;
   margin-left: 4px;
 }
@@ -279,7 +279,7 @@ body[dir=rtl] .contacts-gravatar-promo > p {
   right: 8px;
 }
 
-body[dir=rtl] .contacts-gravatar-promo > .button-close {
+html[dir="rtl"] .contacts-gravatar-promo > .button-close {
   right: auto;
   left: 8px;
 }
diff --git a/browser/components/loop/content/css/panel.css b/browser/components/loop/content/css/panel.css
index b8878079389..24846996b30 100644
--- a/browser/components/loop/content/css/panel.css
+++ b/browser/components/loop/content/css/panel.css
@@ -265,7 +265,7 @@ body {
   flex: 0 1 auto;
 }
 
-body[dir=rtl] .new-room-view > .context > .context-content > .context-preview {
+html[dir="rtl"] .new-room-view > .context > .context-content > .context-preview {
   float: left;
 }
 
@@ -563,7 +563,7 @@ body[dir=rtl] .new-room-view > .context > .context-content > .context-preview {
   right: 4px;
 }
 
-body[dir=rtl] .generate-url-spinner {
+html[dir="rtl"] .generate-url-spinner {
   left: 4px;
   right: auto;
 }
@@ -749,7 +749,7 @@ body[dir=rtl] .generate-url-spinner {
   right: 14px;
 }
 
-body[dir="rtl"] .settings-menu .dropdown-menu {
+html[dir="rtl"] .settings-menu .dropdown-menu {
   /* This is specified separately rather than using -moz-margin-start etc, as
      we need to override .dropdown-menu's values which can't use the gecko
      specific extensions. */
diff --git a/browser/components/loop/content/js/conversation.js b/browser/components/loop/content/js/conversation.js
index 86a14d30cf2..665cae5c684 100644
--- a/browser/components/loop/content/js/conversation.js
+++ b/browser/components/loop/content/js/conversation.js
@@ -163,7 +163,8 @@ loop.conversation = (function(mozL10n) {
       dispatcher: dispatcher, 
       mozLoop: navigator.mozLoop}), document.querySelector("#main"));
 
-    document.body.setAttribute("dir", mozL10n.getDirection());
+    document.documentElement.setAttribute("lang", mozL10n.getLanguage());
+    document.documentElement.setAttribute("dir", mozL10n.getDirection());
     document.body.setAttribute("platform", loop.shared.utils.getPlatform());
 
     dispatcher.dispatch(new sharedActions.GetWindowData({
diff --git a/browser/components/loop/content/js/conversation.jsx b/browser/components/loop/content/js/conversation.jsx
index d24272c0432..5d0da75de73 100644
--- a/browser/components/loop/content/js/conversation.jsx
+++ b/browser/components/loop/content/js/conversation.jsx
@@ -163,7 +163,8 @@ loop.conversation = (function(mozL10n) {
       dispatcher={dispatcher}
       mozLoop={navigator.mozLoop} />, document.querySelector("#main"));
 
-    document.body.setAttribute("dir", mozL10n.getDirection());
+    document.documentElement.setAttribute("lang", mozL10n.getLanguage());
+    document.documentElement.setAttribute("dir", mozL10n.getDirection());
     document.body.setAttribute("platform", loop.shared.utils.getPlatform());
 
     dispatcher.dispatch(new sharedActions.GetWindowData({
diff --git a/browser/components/loop/content/js/panel.js b/browser/components/loop/content/js/panel.js
index 89d5f4addb8..885f13de71b 100644
--- a/browser/components/loop/content/js/panel.js
+++ b/browser/components/loop/content/js/panel.js
@@ -1002,7 +1002,8 @@ loop.panel = (function(_, mozL10n) {
       mozLoop: navigator.mozLoop, 
       dispatcher: dispatcher}), document.querySelector("#main"));
 
-    document.body.setAttribute("dir", mozL10n.getDirection());
+    document.documentElement.setAttribute("lang", mozL10n.getLanguage());
+    document.documentElement.setAttribute("dir", mozL10n.getDirection());
     document.body.setAttribute("platform", loop.shared.utils.getPlatform());
 
     // Notify the window that we've finished initalization and initial layout
diff --git a/browser/components/loop/content/js/panel.jsx b/browser/components/loop/content/js/panel.jsx
index 0c718a8f500..58f71ac55de 100644
--- a/browser/components/loop/content/js/panel.jsx
+++ b/browser/components/loop/content/js/panel.jsx
@@ -1002,7 +1002,8 @@ loop.panel = (function(_, mozL10n) {
       mozLoop={navigator.mozLoop}
       dispatcher={dispatcher} />, document.querySelector("#main"));
 
-    document.body.setAttribute("dir", mozL10n.getDirection());
+    document.documentElement.setAttribute("lang", mozL10n.getLanguage());
+    document.documentElement.setAttribute("dir", mozL10n.getDirection());
     document.body.setAttribute("platform", loop.shared.utils.getPlatform());
 
     // Notify the window that we've finished initalization and initial layout
diff --git a/browser/components/loop/content/shared/css/common.css b/browser/components/loop/content/shared/css/common.css
index e6ff7a96218..fbf317fcda6 100644
--- a/browser/components/loop/content/shared/css/common.css
+++ b/browser/components/loop/content/shared/css/common.css
@@ -426,7 +426,7 @@ p {
   border-radius: 2px;
 }
 
-body[dir=rtl] .dropdown-menu {
+html[dir="rtl"] .dropdown-menu {
   left: auto;
   right: 0;
 }
@@ -481,7 +481,7 @@ body[dir=rtl] .dropdown-menu {
   background-size: 1em 1em;
 }
 
-body[dir="rtl"] .checkbox {
+html[dir="rtl"] .checkbox {
   float: right;
 }
 
diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css
index 1c6a82efa30..894ab93ca5e 100644
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -879,7 +879,7 @@ html, .fx-embedded, #main,
   text-decoration: underline;
 }
 
-body[dir="rtl"] .room-invitation-addcontext {
+html[dir="rtl"] .room-invitation-addcontext {
   padding-left: 0;
   padding-right: 1.5em;
   background-position: right top;
@@ -1104,13 +1104,13 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
   background-image: url("../img/icons-10x10.svg#close-active");
 }
 
-body[dir=rtl] .room-context-btn-close,
-body[dir=rtl] .room-context-btn-edit {
+html[dir="rtl"] .room-context-btn-close,
+html[dir="rtl"] .room-context-btn-edit {
   right: auto;
   left: 8px;
 }
 
-body[dir=rtl] .room-context-btn-edit {
+html[dir="rtl"] .room-context-btn-edit {
   left: 20px;
 }
 
diff --git a/browser/components/loop/ui/react-frame-component.js b/browser/components/loop/ui/react-frame-component.js
index 6304dfcd675..969f3456989 100644
--- a/browser/components/loop/ui/react-frame-component.js
+++ b/browser/components/loop/ui/react-frame-component.js
@@ -62,6 +62,14 @@ window.Frame = React.createClass({
       );
 
       React.render(contents, doc.body, this.fireOnContentsRendered.bind(this));
+
+      // Set the RTL mode. We assume for now that rtl is the only query parameter.
+      //
+      // See also "ShowCase" in ui-showcase.jsx
+      if (document.location.search === "?rtl=1") {
+        doc.documentElement.setAttribute("lang", "ar");
+        doc.documentElement.setAttribute("dir", "rtl");
+      }
     } else {
       // Queue it, only if it isn't already. We do need to set the timeout
       // regardless, as this function can get re-entered several times.
diff --git a/browser/components/loop/ui/ui-showcase.css b/browser/components/loop/ui/ui-showcase.css
index 1c8335e50ee..a8d3100c27f 100644
--- a/browser/components/loop/ui/ui-showcase.css
+++ b/browser/components/loop/ui/ui-showcase.css
@@ -86,6 +86,14 @@ body {
   color: #555;
 }
 
+.showcase .checkbox-wrapper label {
+  font-weight: bold;
+}
+
+.showcase .checkbox.checked {
+  background-image: url("../content/shared/img/check.svg#check-blue");
+}
+
 .showcase p.note {
   margin: 0;
   padding: 0;
diff --git a/browser/components/loop/ui/ui-showcase.js b/browser/components/loop/ui/ui-showcase.js
index 280436891cc..fc9ab5008f8 100644
--- a/browser/components/loop/ui/ui-showcase.js
+++ b/browser/components/loop/ui/ui-showcase.js
@@ -31,6 +31,7 @@
   // 3. Shared components
   var ConversationToolbar = loop.shared.views.ConversationToolbar;
   var FeedbackView = loop.shared.views.FeedbackView;
+  var Checkbox = loop.shared.views.Checkbox;
 
   // Store constants
   var ROOM_STATES = loop.store.ROOM_STATES;
@@ -415,11 +416,42 @@
   });
 
   var ShowCase = React.createClass({displayName: "ShowCase",
+    getInitialState: function() {
+      // We assume for now that rtl is the only query parameter.
+      //
+      // Note: this check is repeated in react-frame-component to save passing
+      // rtlMode down the props tree.
+      var rtlMode = document.location.search === "?rtl=1";
+
+      return {
+        rtlMode: rtlMode
+      };
+    },
+
+    _handleCheckboxChange: function(newState) {
+      var newLocation = "";
+      if (newState.checked) {
+        newLocation = document.location.href.split("#")[0];
+        newLocation += "?rtl=1";
+      } else {
+        newLocation = document.location.href.split("?")[0];
+      }
+      newLocation += document.location.hash;
+      document.location = newLocation;
+    },
+
     render: function() {
+      if (this.state.rtlMode) {
+        document.documentElement.setAttribute("lang", "ar");
+        document.documentElement.setAttribute("dir", "rtl");
+      }
+
       return (
         React.createElement("div", {className: "showcase"}, 
           React.createElement("header", null, 
             React.createElement("h1", null, "Loop UI Components Showcase"), 
+            React.createElement(Checkbox, {label: "RTL mode?", checked: this.state.rtlMode, 
+              onChange: this._handleCheckboxChange}), 
             React.createElement("nav", {className: "showcase-menu"}, 
               React.Children.map(this.props.children, function(section) {
                 return (
diff --git a/browser/components/loop/ui/ui-showcase.jsx b/browser/components/loop/ui/ui-showcase.jsx
index 1f641c8a9c5..c52a34f2050 100644
--- a/browser/components/loop/ui/ui-showcase.jsx
+++ b/browser/components/loop/ui/ui-showcase.jsx
@@ -31,6 +31,7 @@
   // 3. Shared components
   var ConversationToolbar = loop.shared.views.ConversationToolbar;
   var FeedbackView = loop.shared.views.FeedbackView;
+  var Checkbox = loop.shared.views.Checkbox;
 
   // Store constants
   var ROOM_STATES = loop.store.ROOM_STATES;
@@ -415,11 +416,42 @@
   });
 
   var ShowCase = React.createClass({
+    getInitialState: function() {
+      // We assume for now that rtl is the only query parameter.
+      //
+      // Note: this check is repeated in react-frame-component to save passing
+      // rtlMode down the props tree.
+      var rtlMode = document.location.search === "?rtl=1";
+
+      return {
+        rtlMode: rtlMode
+      };
+    },
+
+    _handleCheckboxChange: function(newState) {
+      var newLocation = "";
+      if (newState.checked) {
+        newLocation = document.location.href.split("#")[0];
+        newLocation += "?rtl=1";
+      } else {
+        newLocation = document.location.href.split("?")[0];
+      }
+      newLocation += document.location.hash;
+      document.location = newLocation;
+    },
+
     render: function() {
+      if (this.state.rtlMode) {
+        document.documentElement.setAttribute("lang", "ar");
+        document.documentElement.setAttribute("dir", "rtl");
+      }
+
       return (
         <div className="showcase">
           <header>
             <h1>Loop UI Components Showcase</h1>
+            <Checkbox label="RTL mode?" checked={this.state.rtlMode}
+              onChange={this._handleCheckboxChange} />
             <nav className="showcase-menu">{
               React.Children.map(this.props.children, function(section) {
                 return (