#145737 by yhager, documentation cleaned up by myself: add support for RTL CSS...

#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.

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;
 }
 

modules/aggregator/aggregator-rtl.css

+/* $Id$ */
+
+#aggregator .feed-source .feed-icon {
+  float: left;
+}

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 {

modules/block/block-rtl.css

+/* $Id$ */
+
+#blocks td.block {
+  padding-left: inherit;
+  padding-right: 1.5em;
+}

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;

modules/book/book-rtl.css

+/* $Id$ */
+
+.book-navigation .page-previous {
+  float: right;
+}
+.book-navigation .page-up {
+  float: right;
+}

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;

modules/color/color-rtl.css

+/* $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;
+}

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 */
 }

modules/comment/comment-rtl.css

+/* $Id$ */
+
+.indented {
+  margin-left: inherit;
+  margin-right: 25px;
+}

modules/comment/comment.css

 /* $Id$ */
 
 .indented {
-  margin-left: 25px;
+  margin-left: 25px; /* LTR */
 }

modules/dblog/dblog-rtl.css

+/* $Id$ */
+
+#dblog-filter-form .form-item {
+  float: right;
+  padding-right: inherit;
+  padding-left: .8em;
+}

modules/dblog/dblog.css

 /* $Id$ */
 
 #dblog-filter-form .form-item {
-  float: left;
-  padding-right: .8em;
+  float: left; /* LTR */
+  padding-right: .8em; /* LTR */
   margin: 0.1em;
 }
 tr.dblog-user {

modules/forum/forum-rtl.css

+/* $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;
+}

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%;
 }

modules/help/help-rtl.css

+/* $Id$ */
+
+.help-items {
+  float: right;
+  padding-right: inherit;
+  padding-left: 3%;
+}
+.help-items-last {
+  padding-right: inherit;
+  padding-left: 0;
+}

modules/help/help.css

 /* $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 */
 }

modules/node/node-rtl.css

+/* $Id $ */
+
+#node-admin-buttons {
+  float: right;
+  margin-left: inherit;
+  margin-right: 0.5em;
+  clear: left;
+}

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;

modules/poll/poll-rtl.css

+/* $Id $ */
+
+.poll .bar .foreground {
+  float: right;
+}
+.poll .percent {
+  text-align: left;
+}
+.poll .vote-form .choices {
+  text-align: right;
+}

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;
 }

modules/search/search-rtl.css

+/* $Id $ */
+
+.search-advanced .criterion {
+  float: right;
+  margin-right: inherit;
+  margin-left: 2em;
+}
+.search-advanced .action {
+  float: right;
+  clear: right;
+}

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 */
 }

modules/system/admin-rtl.css

+/* $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;
+}
+

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%;
 }
 

modules/system/defaults-rtl.css

+/* $Id $ */
+
+th {
+  text-align: right;
+  padding-right: inherit;
+  padding-left: 1em;
+}

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;
 }
 

modules/system/system-rtl.css

+/* $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 {