#145737 by yhager, documentation cleaned up by myself: add support for RTL CSS overrides and default RTL CSS override files for modules

Note: properties, which are different in the RTL display are marked with /* LTR */ in default CSS files now,
so maintainers remember that changing them should also have an effect on RTL CSS files.

This should open the way for better RTL (right-to-left written) language (such as Arabic and Hebrew) support.

32 files changed, 397 insertions, 92 deletions

diff --git a/includes/common.inc b/includes/common.inc
index 513b6fc9f..e5bdf49a2 100644
--- a/includes/common.inc
+++ b/includes/common.inc
@@ -1450,6 +1450,14 @@ function drupal_add_link($attributes) {
  * @param $path
  *   (optional) The path to the CSS file relative to the base_path(), e.g.,
  *   /modules/devel/devel.css.
+ *
+ *   If the direction of the current language is right-to-left (Hebrew, 
+ *   Arabic, etc.), the function will also look for an RTL CSS file and append 
+ *   it to the list. The name of this file should have an '-rtl.css' suffix.
+ *   For example a CSS file called 'name.css' will have a 'name-rtl.css' 
+ *   file added to the list, if exists in the same directory. This CSS file
+ *   should contain overrides for properties which should be reversed or
+ *   otherwise different in a right-to-left display.
  * @param $type
  *   (optional) The type of stylesheet that is being added. Types are: module
  *   or theme.
@@ -1483,6 +1491,7 @@ function drupal_add_link($attributes) {
  */
 function drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preprocess = TRUE) {
   static $css = array();
+  global $language;	
 
   // Create an array of CSS files for each media type first, since each type needs to be served
   // to the browser differently.
@@ -1492,8 +1501,16 @@ function drupal_add_css($path = NULL, $type = 'module', $media = 'all', $preproc
       $css[$media] = array('module' => array(), 'theme' => array());
     }
     $css[$media][$type][$path] = $preprocess;
-  }
 
+    // If the current language is RTL, add the CSS file with RTL overrides.
+    if (defined('LANGUAGE_RTL') && $language->direction == LANGUAGE_RTL) {
+      $rtl_path = str_replace('.css', '-rtl.css', $path);
+      if (file_exists($rtl_path)) {
+        $css[$media][$type][$rtl_path] = $preprocess;
+      }
+    }
+  }
+  
   return $css;
 }
 
diff --git a/misc/menu-collapsed-rtl.png b/misc/menu-collapsed-rtl.png
new file mode 100644
index 000000000..6ccfb241b
--- /dev/null
+++ b/misc/menu-collapsed-rtl.png
diff --git a/modules/aggregator/aggregator-rtl.css b/modules/aggregator/aggregator-rtl.css
new file mode 100644
index 000000000..508ca31c1
--- /dev/null
+++ b/modules/aggregator/aggregator-rtl.css
@@ -0,0 +1,5 @@
+/* $Id$ */
+
+#aggregator .feed-source .feed-icon {
+  float: left;
+}
diff --git a/modules/aggregator/aggregator.css b/modules/aggregator/aggregator.css
index 0efefdf7a..554de08fd 100644
--- a/modules/aggregator/aggregator.css
+++ b/modules/aggregator/aggregator.css
@@ -7,7 +7,7 @@
   margin-bottom: 0.75em;
 }
 #aggregator .feed-source .feed-icon {
-  float: right;
+  float: right; /* LTR */
   display: block;
 }
 #aggregator .feed-item {
diff --git a/modules/block/block-rtl.css b/modules/block/block-rtl.css
new file mode 100644
index 000000000..efc56df46
--- /dev/null
+++ b/modules/block/block-rtl.css
@@ -0,0 +1,6 @@
+/* $Id$ */
+
+#blocks td.block {
+  padding-left: inherit;
+  padding-right: 1.5em;
+}
diff --git a/modules/block/block.css b/modules/block/block.css
index 348c4f1f2..d357d59c3 100644
--- a/modules/block/block.css
+++ b/modules/block/block.css
@@ -4,7 +4,7 @@
   font-weight: bold;
 }
 #blocks td.block {
-  padding-left: 1.5em;
+  padding-left: 1.5em; /* LTR */
 }
 .block-region {
   background-color: #ff6;
diff --git a/modules/book/book-rtl.css b/modules/book/book-rtl.css
new file mode 100644
index 000000000..f9bcde48c
--- /dev/null
+++ b/modules/book/book-rtl.css
@@ -0,0 +1,8 @@
+/* $Id$ */
+
+.book-navigation .page-previous {
+  float: right;
+}
+.book-navigation .page-up {
+  float: right;
+}
diff --git a/modules/book/book.css b/modules/book/book.css
index 1c8ab8335..187a5c852 100644
--- a/modules/book/book.css
+++ b/modules/book/book.css
@@ -14,13 +14,13 @@
   text-align: left;
   width: 42%;
   display: block;
-  float: left;
+  float: left; /* LTR */
 }
 .book-navigation .page-up {
   margin: 0 5%;
   width: 4%;
   display: block;
-  float: left;
+  float: left; /* LTR */
 }
 .book-navigation .page-next {
   text-align: right;
diff --git a/modules/color/color-rtl.css b/modules/color/color-rtl.css
new file mode 100644
index 000000000..1f1485118
--- /dev/null
+++ b/modules/color/color-rtl.css
@@ -0,0 +1,45 @@
+/* $Id$ */
+
+#placeholder {
+  right: inherit;
+  left: 0;
+}
+
+/* Palette */
+.color-form .form-item {
+  padding-left: inherit;
+  padding-right: 1em;
+}
+.color-form label {
+  float: right;
+  clear: right;
+}
+.color-form .form-text, .color-form .form-select {
+  float: right;
+}
+.color-form .form-text {
+  margin-right: inherit;
+  margin-left: 5px;
+}
+
+#palette .hook {
+  float: right;
+}
+#palette .down, #palette .up, #palette .both {
+  background-position: 0 0;
+}
+#palette .up {
+  background-position: 0 -27px;
+}
+#palette .both {
+  background-position: 0 -54px;
+}
+
+#palette .lock {
+  float: right;
+  left: inherit;
+  right: -10px;
+}
+html.js #preview {
+  float: right;
+}
diff --git a/modules/color/color.css b/modules/color/color.css
index 5262683a9..3e013bf9a 100644
--- a/modules/color/color.css
+++ b/modules/color/color.css
@@ -8,51 +8,51 @@
 #placeholder {
   position: absolute;
   top: 0;
-  right: 0;
+  right: 0; /* LTR */
 }
 
 /* Palette */
 .color-form .form-item {
   height: 2em;
   line-height: 2em;
-  padding-left: 1em;
+  padding-left: 1em; /* LTR */
   margin: 0.5em 0;
 }
 .color-form label {
-  float: left;
-  clear: left;
+  float: left; /* LTR */
+  clear: left; /* LTR */
   width: 10em;
 }
 .color-form .form-text, .color-form .form-select {
-  float: left;
+  float: left; /* LTR */
 }
 .color-form .form-text {
   text-align: center;
-  margin-right: 5px;
+  margin-right: 5px; /* LTR */
   cursor: pointer;
 }
 
 #palette .hook {
-  float: left;
+  float: left; /* LTR */
   margin-top: 3px;
   width: 16px;
   height: 16px;
 }
 #palette .down, #palette .up, #palette .both {
-  background: url(images/hook.png) no-repeat 100% 0;
+  background: url(images/hook.png) no-repeat 100% 0; /* LTR */
 }
 #palette .up {
-  background-position: 100% -27px;
+  background-position: 100% -27px; /* LTR */
 }
 #palette .both {
-  background-position: 100% -54px;
+  background-position: 100% -54px; /* LTR */
 }
 
 #palette .lock {
-  float: left;
+  float: left; /* LTR */
   position: relative;
   top: -1.4em;
-  left: -10px;
+  left: -10px; /* LTR */
   width: 20px;
   height: 25px;
   background: url(images/lock.png) no-repeat 50% 2px;
@@ -75,5 +75,5 @@
 html.js #preview {
   display: block;
   position: relative;
-  float: left;
+  float: left; /* LTR */
 }
diff --git a/modules/comment/comment-rtl.css b/modules/comment/comment-rtl.css
new file mode 100644
index 000000000..6c88e8ace
--- /dev/null
+++ b/modules/comment/comment-rtl.css
@@ -0,0 +1,6 @@
+/* $Id$ */
+
+.indented {
+  margin-left: inherit;
+  margin-right: 25px;
+}
diff --git a/modules/comment/comment.css b/modules/comment/comment.css
index 25c29fbfa..1e3ff8b2d 100644
--- a/modules/comment/comment.css
+++ b/modules/comment/comment.css
@@ -1,5 +1,5 @@
 /* $Id$ */
 
 .indented {
-  margin-left: 25px;
+  margin-left: 25px; /* LTR */
 }
diff --git a/modules/dblog/dblog-rtl.css b/modules/dblog/dblog-rtl.css
new file mode 100644
index 000000000..208e0d9a0
--- /dev/null
+++ b/modules/dblog/dblog-rtl.css
@@ -0,0 +1,7 @@
+/* $Id$ */
+
+#dblog-filter-form .form-item {
+  float: right;
+  padding-right: inherit;
+  padding-left: .8em;
+}
diff --git a/modules/dblog/dblog.css b/modules/dblog/dblog.css
index 2f5a7c9a9..998754ace 100644
--- a/modules/dblog/dblog.css
+++ b/modules/dblog/dblog.css
@@ -1,8 +1,8 @@
 /* $Id$ */
 
 #dblog-filter-form .form-item {
-  float: left;
-  padding-right: .8em;
+  float: left; /* LTR */
+  padding-right: .8em; /* LTR */
   margin: 0.1em;
 }
 tr.dblog-user {
diff --git a/modules/forum/forum-rtl.css b/modules/forum/forum-rtl.css
new file mode 100644
index 000000000..cb5a7ba33
--- /dev/null
+++ b/modules/forum/forum-rtl.css
@@ -0,0 +1,18 @@
+/* $Id $ */
+
+#forum tr td.forum {
+  padding-left: inherit;
+  padding-right: 25px;
+  background-position: 98% 2px;
+}
+.forum-topic-navigation {
+  padding: 1em 3em 0 0;
+}
+.forum-topic-navigation .topic-previous {
+  text-align: left;
+  float: right;
+}
+.forum-topic-navigation .topic-next {
+  text-align: right;
+  float: left;
+}
diff --git a/modules/forum/forum.css b/modules/forum/forum.css
index 875cf608c..6e13dae23 100644
--- a/modules/forum/forum.css
+++ b/modules/forum/forum.css
@@ -11,8 +11,8 @@
   text-align: center;
 }
 #forum tr td.forum {
-  padding-left: 25px;
-  background-position: 2px 2px;
+  padding-left: 25px; /* LTR */
+  background-position: 2px 2px; /* LTR */
   background-image: url(../../misc/forum-default.png);
   background-repeat: no-repeat;
 }
@@ -20,19 +20,19 @@
   background-image: url(../../misc/forum-new.png);
 }
 .forum-topic-navigation {
-  padding: 1em 0 0 3em;
+  padding: 1em 0 0 3em; /* LTR */
   border-top: 1px solid #888;
   border-bottom: 1px solid #888;
   text-align: center;
   padding: 0.5em;
 }
 .forum-topic-navigation .topic-previous {
-  text-align: right;
-  float: left;
+  text-align: right; /* LTR */
+  float: left; /* LTR */
   width: 46%;
 }
 .forum-topic-navigation .topic-next {
-  text-align: left;
-  float: right;
+  text-align: left; /* LTR */
+  float: right; /* LTR */
   width: 46%;
 }
diff --git a/modules/help/help-rtl.css b/modules/help/help-rtl.css
new file mode 100644
index 000000000..2b627613d
--- /dev/null
+++ b/modules/help/help-rtl.css
@@ -0,0 +1,11 @@
+/* $Id$ */
+
+.help-items {
+  float: right;
+  padding-right: inherit;
+  padding-left: 3%;
+}
+.help-items-last {
+  padding-right: inherit;
+  padding-left: 0;
+}
diff --git a/modules/help/help.css b/modules/help/help.css
index 3536167f0..c8062be75 100644
--- a/modules/help/help.css
+++ b/modules/help/help.css
@@ -1,10 +1,10 @@
 /* $Id$ */
 
 .help-items {
-  float: left;
+  float: left; /* LTR */
   width: 22%;
-  padding-right: 3%;
+  padding-right: 3%; /* LTR */
 }
 .help-items-last {
-  padding-right: 0;
+  padding-right: 0; /* LTR */
 }
diff --git a/modules/node/node-rtl.css b/modules/node/node-rtl.css
new file mode 100644
index 000000000..d27041892
--- /dev/null
+++ b/modules/node/node-rtl.css
@@ -0,0 +1,8 @@
+/* $Id $ */
+
+#node-admin-buttons {
+  float: right;
+  margin-left: inherit;
+  margin-right: 0.5em;
+  clear: left;
+}
diff --git a/modules/node/node.css b/modules/node/node.css
index 029e83b8e..67bb8c727 100644
--- a/modules/node/node.css
+++ b/modules/node/node.css
@@ -13,9 +13,9 @@
   width: 100%;
 }
 #node-admin-buttons {
-  float: left;
-  margin-left: 0.5em;
-  clear: right;
+  float: left; /* LTR */
+  margin-left: 0.5em; /* LTR */
+  clear: right; /* LTR */
 }
 td.revision-current {
   background: #ffc;
diff --git a/modules/poll/poll-rtl.css b/modules/poll/poll-rtl.css
new file mode 100644
index 000000000..8be324dbf
--- /dev/null
+++ b/modules/poll/poll-rtl.css
@@ -0,0 +1,11 @@
+/* $Id $ */
+
+.poll .bar .foreground {
+  float: right;
+}
+.poll .percent {
+  text-align: left;
+}
+.poll .vote-form .choices {
+  text-align: right;
+}
diff --git a/modules/poll/poll.css b/modules/poll/poll.css
index afd86c6c4..d5eeb3ffa 100644
--- a/modules/poll/poll.css
+++ b/modules/poll/poll.css
@@ -8,13 +8,13 @@
 .poll .bar .foreground {
   background-color: #000;
   height: 1em;
-  float: left;
+  float: left; /* LTR */
 }
 .poll .links {
   text-align: center;
 }
 .poll .percent {
-  text-align: right;
+  text-align: right; /* LTR */
 }
 .poll .total {
   text-align: center;
@@ -23,7 +23,7 @@
   text-align: center;
 }
 .poll .vote-form .choices {
-  text-align: left;
+  text-align: left; /* LTR */
   margin: 0 auto;
   display: table;
 }
diff --git a/modules/search/search-rtl.css b/modules/search/search-rtl.css
new file mode 100644
index 000000000..b9a43ed89
--- /dev/null
+++ b/modules/search/search-rtl.css
@@ -0,0 +1,11 @@
+/* $Id $ */
+
+.search-advanced .criterion {
+  float: right;
+  margin-right: inherit;
+  margin-left: 2em;
+}
+.search-advanced .action {
+  float: right;
+  clear: right;
+}
diff --git a/modules/search/search.css b/modules/search/search.css
index fb05bdd07..7ca52dd2e 100644
--- a/modules/search/search.css
+++ b/modules/search/search.css
@@ -26,10 +26,10 @@
   font-size: 0.85em;
 }
 .search-advanced .criterion {
-  float: left;
-  margin-right: 2em;
+  float: left; /* LTR */
+  margin-right: 2em; /* LTR */
 }
 .search-advanced .action {
-  float: left;
-  clear: left;
+  float: left; /* LTR */
+  clear: left; /* LTR */
 }
diff --git a/modules/system/admin-rtl.css b/modules/system/admin-rtl.css
new file mode 100644
index 000000000..cea4ed7f8
--- /dev/null
+++ b/modules/system/admin-rtl.css
@@ -0,0 +1,38 @@
+/* $Id $ */
+
+div.admin-panel .body {
+  padding: 0 8px 2px 4px;
+}
+
+div.admin .expert-link {
+  text-align: left;
+  margin-right: inherit;
+  margin-left: 1em;
+  padding-right: inherit;
+  padding-left: 4px;
+}
+
+table.system-status-report th, table.system-status-report tr.merge-up td {
+  padding-right: 30px;
+}
+
+table.system-status-report th  {
+  background-position: 95% 50%;
+}
+
+table.screenshot {
+  margin-left: 1em;
+}
+
+div.date-container {
+  clear: right;
+}
+
+div.date-container div {
+  float: right;
+}
+div.custom-container {
+  margin-left: inherit;
+  margin-right: 15px;
+}
+
diff --git a/modules/system/admin.css b/modules/system/admin.css
index 91df67653..30416c90d 100644
--- a/modules/system/admin.css
+++ b/modules/system/admin.css
@@ -14,7 +14,7 @@ div.admin-panel .description {
 }
 
 div.admin-panel .body {
-  padding: 0 4px 2px 8px;
+  padding: 0 4px 2px 8px; /* LTR */
 }
 
 div.admin {
@@ -33,9 +33,9 @@ div.admin .right {
 }
 
 div.admin .expert-link {
-  text-align: right;
-  margin-right: 1em;
-  padding-right: 4px;
+  text-align: right; /* LTR */
+  margin-right: 1em; /* LTR */
+  padding-right: 4px; /* LTR */
 }
 
 table.package {
@@ -65,11 +65,11 @@ table.system-status-report th {
   border-bottom: 1px solid #ccc;
 }
 table.system-status-report th, table.system-status-report tr.merge-up td {
-  padding-left: 30px;
+  padding-left: 30px; /* LTR */
 }
 table.system-status-report th  {
   background-repeat: no-repeat;
-  background-position: 5px 50%;
+  background-position: 5px 50%; /* LTR */
   padding-top: 6px;
   padding-bottom: 6px;
 }
@@ -102,7 +102,7 @@ table.system-status-report tr.ok th {
  * Formatting for theme overview
  */
 table.screenshot {
-  margin-right: 1em;
+  margin-right: 1em; /* LTR */
 }
 .theme-info h2 {
   margin-bottom: 0;
@@ -117,7 +117,7 @@ table.screenshot {
  */
 div.date-container {
   overflow: auto;
-  clear: left;
+  clear: left; /* LTR */
 }
 
 div.date-container > div, div.date-container > div > div {
@@ -126,7 +126,7 @@ div.date-container > div, div.date-container > div > div {
 }
 
 div.date-container div {
-  float: left;
+  float: left; /* LTR */
 }
 
 html.js div.custom-container {
@@ -138,7 +138,7 @@ html.js div.custom-container .form-item label {
 }
 
 div.custom-container {
-  margin-left: 15px;
+  margin-left: 15px; /* LTR */
   width: 50%;
 }
 
diff --git a/modules/system/defaults-rtl.css b/modules/system/defaults-rtl.css
new file mode 100644
index 000000000..2b7dd7696
--- /dev/null
+++ b/modules/system/defaults-rtl.css
@@ -0,0 +1,7 @@
+/* $Id $ */
+
+th {
+  text-align: right;
+  padding-right: inherit;
+  padding-left: 1em;
+}
diff --git a/modules/system/defaults.css b/modules/system/defaults.css
index 87b45d74c..7e97e881b 100644
--- a/modules/system/defaults.css
+++ b/modules/system/defaults.css
@@ -22,8 +22,8 @@ table {
   border-collapse: collapse;
 }
 th {
-  text-align: left;
-  padding-right: 1em;
+  text-align: left; /* LTR */
+  padding-right: 1em; /* LTR */
   border-bottom: 3px solid #ccc;
 }
 
diff --git a/modules/system/system-rtl.css b/modules/system/system-rtl.css
new file mode 100644
index 000000000..7206a14e5
--- /dev/null
+++ b/modules/system/system-rtl.css
@@ -0,0 +1,85 @@
+/* $Id $ */
+
+.item-list .icon {
+  float: left;
+  padding-left: inherit;
+  padding-right: 0.25em;
+  clear: left;
+}
+.item-list ul li {
+  margin: 0 1.5em 0.25em 0;
+}
+
+.more-link {
+  text-align: left;
+}
+.more-help-link {
+  text-align: left;
+}
+
+dl.multiselect dt, dl.multiselect dd {
+  float: right;
+  margin: 0 0 0 1em;
+}
+ul.menu {
+  text-align:right;
+}
+ul.menu li {
+  margin: 0 0.5em 0 0;
+}
+li.expanded {
+  padding: 0.2em 0 0 0.5em;
+}
+li.collapsed {
+  list-style-image: url(../../misc/menu-collapsed-rtl.png);
+  padding: 0.2em 0 0 0.5em;
+}
+li.leaf {
+  padding: 0.2em 0 0 0.5em;
+}
+.block ul {
+  padding: 0 1em 0.25em 0;
+}
+
+ul.primary {
+  padding: 0 1em 0 0;
+}
+ul.primary li a {
+  margin-right: inherit;
+  margin-left: 0.5em;
+}
+ul.secondary li {
+  display: inline;
+  padding: 0 1em;
+  border-right: inherit;
+  border-left: 1px solid #ccc;
+}
+html.js input.form-autocomplete {
+  background-position: 0% 2px;
+}
+html.js input.throbbing {
+  background-position: 0% -18px;
+}
+
+html.js fieldset.collapsible legend a {
+  padding-left: inherit;
+  padding-right: 15px;
+  background-position: 98% 75%;
+}
+html.js fieldset.collapsed legend a {
+  background-image: url(../../misc/menu-collapsed-rtl.png);
+  background-position: 98% 50%;
+}
+
+div.teaser-button-wrapper {
+  float: left;
+  padding-right: inherit;
+  padding-left: 5%;
+}
+.teaser-checkbox div.form-item {
+  float: left;
+  margin: 0 0 0 5%;
+}
+.progress .percentage {
+  float: left;
+}
diff --git a/modules/system/system.css b/modules/system/system.css
index 7d30a5cca..e22c7888f 100644
--- a/modules/system/system.css
+++ b/modules/system/system.css
@@ -21,8 +21,8 @@ tbody th {
   border-bottom: 1px solid #ccc;
 }
 thead th {
-  text-align: left;
-  padding-right: 1em;
+  text-align: left; /* LTR */
+  padding-right: 1em; /* LTR */
   border-bottom: 3px solid #ccc;
 }
 
@@ -50,9 +50,9 @@ div.ok, tr.ok {
 }
 .item-list .icon {
   color: #555;
-  float: right;
-  padding-left: 0.25em;
-  clear: right;
+  float: right; /* LTR */
+  padding-left: 0.25em; /* LTR */
+  clear: right; /* LTR */
 }
 .item-list .title {
   font-weight: bold;
@@ -62,7 +62,7 @@ div.ok, tr.ok {
   padding: 0;
 }
 .item-list ul li {
-  margin: 0 0 0.25em 1.5em;
+  margin: 0 0 0.25em 1.5em; /* LTR */
   padding: 0;
   list-style: disc;
 }
@@ -109,11 +109,11 @@ tr.merge-up, tr.merge-up td, tr.merge-up th {
   color: #f00;
 }
 .more-link {
-  text-align: right;
+  text-align: right; /* LTR */
 }
 .more-help-link {
   font-size: 0.85em;
-  text-align: right;
+  text-align: right; /* LTR */
 }
 .nowrap {
   white-space: nowrap;
@@ -147,10 +147,10 @@ dl.multiselect dd.a, dl.multiselect dd.a .form-item {
   width: 8em;
 }
 dl.multiselect dt, dl.multiselect dd {
-  float: left;
+  float: left; /* LTR */
   line-height: 1.75em;
   padding: 0;
-  margin: 0 1em 0 0;
+  margin: 0 1em 0 0; /* LTR */
 }
 dl.multiselect .form-item {
   height: 1.75em;
@@ -170,27 +170,27 @@ dl.multiselect .form-item {
 ul.menu {
   list-style: none;
   border: none;
-  text-align:left;
+  text-align:left; /* LTR */
 }
 ul.menu li {
-  margin: 0 0 0 0.5em;
+  margin: 0 0 0 0.5em; /* LTR */
 }
 li.expanded {
   list-style-type: circle;
   list-style-image: url(../../misc/menu-expanded.png);
-  padding: 0.2em 0.5em 0 0;
+  padding: 0.2em 0.5em 0 0; /* LTR */
   margin: 0;
 }
 li.collapsed {
   list-style-type: disc;
-  list-style-image: url(../../misc/menu-collapsed.png);
-  padding: 0.2em 0.5em 0 0;
+  list-style-image: url(../../misc/menu-collapsed.png); /* LTR */
+  padding: 0.2em 0.5em 0 0; /* LTR */
   margin: 0;
 }
 li.leaf {
   list-style-type: square;
   list-style-image: url(../../misc/menu-leaf.png);
-  padding: 0.2em 0.5em 0 0;
+  padding: 0.2em 0.5em 0 0; /* LTR */
   margin: 0;
 }
 li a.active {
@@ -213,7 +213,7 @@ ul.links li {
 }
 .block ul {
   margin: 0;
-  padding: 0 0 0.25em 1em;
+  padding: 0 0 0.25em 1em; /* LTR */
 }
 
 /*
@@ -221,7 +221,7 @@ ul.links li {
 */
 ul.primary {
   border-collapse: collapse;
-  padding: 0 0 0 1em;
+  padding: 0 0 0 1em; /* LTR */
   white-space: nowrap;
   list-style: none;
   margin: 5px;
@@ -238,7 +238,7 @@ ul.primary li a {
   border-width: 1px;
   border-style: solid solid none solid;
   height: auto;
-  margin-right: 0.5em;
+  margin-right: 0.5em; /* LTR */
   padding: 0 1em;
   text-decoration: none;
 }
@@ -260,7 +260,7 @@ ul.secondary {
 ul.secondary li {
   display: inline;
   padding: 0 1em;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid #ccc; /* LTR */
 }
 ul.secondary a {
   padding: 0;
@@ -299,10 +299,10 @@ ul.secondary a.active {
 html.js input.form-autocomplete {
   background-image: url(../../misc/throbber.gif);
   background-repeat: no-repeat;
-  background-position: 100% 2px;
+  background-position: 100% 2px; /* LTR */
 }
 html.js input.throbbing {
-  background-position: 100% -18px;
+  background-position: 100% -18px; /* LTR */
 }
 
 /*
@@ -322,12 +322,12 @@ html.js fieldset.collapsed legend {
   display: block;
 }
 html.js fieldset.collapsible legend a {
-  padding-left: 15px;
-  background: url(../../misc/menu-expanded.png) 5px 75% no-repeat;
+  padding-left: 15px; /* LTR */
+  background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */
 }
 html.js fieldset.collapsed legend a {
-  background-image: url(../../misc/menu-collapsed.png);
-  background-position: 5px 50%;
+  background-image: url(../../misc/menu-collapsed.png); /* LTR */
+  background-position: 5px 50%; /* LTR */
 }
 /* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */
 * html.js fieldset.collapsed legend,
@@ -372,13 +372,13 @@ html.js .resizable-textarea textarea {
   margin-bottom: -2px;
 }
 div.teaser-button-wrapper {
-  float: right;
-  padding-right: 5%;
+  float: right; /* LTR */
+  padding-right: 5%; /* LTR */
   margin: 0;
 }
 .teaser-checkbox div.form-item {
-  float: right;
-  margin: 0 5% 0 0;
+  float: right; /* LTR */
+  margin: 0 5% 0 0; /* LTR */
   padding: 0;
 }
 textarea.teaser {
@@ -407,7 +407,7 @@ html.js .no-js {
   width: 0%;
 }
 .progress .percentage {
-  float: right;
+  float: right; /* LTR */
 }
 
 /*
diff --git a/modules/user/user-rtl.css b/modules/user/user-rtl.css
new file mode 100644
index 000000000..943dab8f7
--- /dev/null
+++ b/modules/user/user-rtl.css
@@ -0,0 +1,22 @@
+/* $Id $ */
+
+#permissions td.permission {
+  padding-left: inherit;
+  padding-right: 1.5em;
+}
+#access-rules .access-type, #access-rules .rule-type {
+  margin-right: inherit;
+  margin-left: 1em;
+  float: right;
+}
+#user-admin-buttons {
+  float: right;
+  margin-left: inherit;
+  margin-right: 0.5em;
+  clear: left;
+}
+
+.profile .picture {
+  float: left;
+  margin: 0 0 1em 1em;
+}
diff --git a/modules/user/user.css b/modules/user/user.css
index 065bbe3c0..4416afd36 100644
--- a/modules/user/user.css
+++ b/modules/user/user.css
@@ -4,11 +4,11 @@
   font-weight: bold;
 }
 #permissions td.permission {
-  padding-left: 1.5em;
+  padding-left: 1.5em; /* LTR */
 }
 #access-rules .access-type, #access-rules .rule-type {
-  margin-right: 1em;
-  float: left;
+  margin-right: 1em; /* LTR */
+  float: left; /* LTR */
 }
 #access-rules .access-type .form-item, #access-rules .rule-type .form-item {
   margin-top: 0;
@@ -26,9 +26,9 @@
   width: 100%;
 }
 #user-admin-buttons {
-  float: left;
-  margin-left: 0.5em;
-  clear: right;
+  float: left; /* LTR */
+  margin-left: 0.5em; /* LTR */
+  clear: right; /* LTR */
 }
 #user-admin-settings fieldset .description {
   font-size: 0.85em;
@@ -41,8 +41,8 @@
   margin: 1em 0;
 }
 .profile .picture {
-  float: right;
-  margin: 0 1em 1em 0;
+  float: right; /* LTR */
+  margin: 0 1em 1em 0; /* LTR */
 }
 .profile dt {
   margin: 1em 0 0.2em 0;