#164451 by several people: Right to left (RTL) CSS styles for Garland, so Drupal can even be installed in RTL form from the start

6 files changed, 454 insertions, 56 deletions

diff --git a/themes/garland/fix-ie-rtl.css b/themes/garland/fix-ie-rtl.css
new file mode 100644
index 000000000..50eced058
--- /dev/null
+++ b/themes/garland/fix-ie-rtl.css
@@ -0,0 +1,63 @@
+/* $Id$ */
+
+body {
+  /* Center layout */
+  text-align: center;
+  /* Allow text resizing */
+  font-size: 80%;
+}
+
+#squeeze {
+  zoom: 1;
+  direction: ltr;
+}
+
+#squeeze .left-corner{
+  direction: rtl
+}
+
+#header-region, #wrapper #container {
+  /* Reset text alignment */
+  text-align: right;
+}
+
+#wrapper #container #center {
+  /* Reduce amount of damage done by extremely wide content */
+  overflow: hidden;
+}
+
+#wrapper #container #center .right-corner .left-corner {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 400px;
+}
+
+fieldset {
+  /* Don't draw backgrounds on fieldsets in IE, as they look really bad. */
+  background: none;
+}
+
+/* Prevent fieldsets from shifting when changing collapsed state. */
+html.js fieldset.collapsible {
+  position: relative;
+  top: -1em;
+}
+
+html.js fieldset.collapsed {
+  top: 0;
+  margin-bottom: 1em;
+}
+
+td.menu-disabled {
+  /* Use filter to emulate CSS3 opacity */
+  filter: alpha(opacity=50);
+}
+
+#header-region {
+  /* Because of the lack of min-height, we use height as an alternative */
+  height: 1em;
+}
+
+#attach-hide label, #uploadprogress div.message {
+  /* Fading elements in IE causes the text to bleed unless they have a background. */
+  background-color: #ffffff;
+}
diff --git a/themes/garland/fix-ie.css b/themes/garland/fix-ie.css
index beae9021c..df9fe2f58 100644
--- a/themes/garland/fix-ie.css
+++ b/themes/garland/fix-ie.css
@@ -15,7 +15,7 @@ body {
 
 #header-region, #wrapper #container {
   /* Reset text alignment */
-  text-align: left;
+  text-align: left; /* LTR */
 }
 
 #wrapper #container #center {
@@ -35,7 +35,7 @@ fieldset {
 
 ul.primary {
   /* Fix missing top margin */
-  position: relative;
+  position: relative; /* LTR */
 /*  top: 0.5em; */
 }
 
diff --git a/themes/garland/page.tpl.php b/themes/garland/page.tpl.php
index 82f5df1bf..a59d41fdc 100644
--- a/themes/garland/page.tpl.php
+++ b/themes/garland/page.tpl.php
@@ -9,7 +9,7 @@
     <?php print $styles ?>
     <?php print $scripts ?>
     <!--[if lt IE 7]>
-    <link type="text/css" rel="stylesheet" media="all" href="<?php print base_path() . path_to_theme() ?>/fix-ie.css" />
+      <?php print phptemplate_get_ie_styles(); ?>
     <![endif]-->
   </head>
   <body<?php print phptemplate_body_class($left, $right); ?>>
diff --git a/themes/garland/style-rtl.css b/themes/garland/style-rtl.css
new file mode 100644
index 000000000..e136a4a01
--- /dev/null
+++ b/themes/garland/style-rtl.css
@@ -0,0 +1,321 @@
+/* $Id$ */

+

+html {

+  direction: rtl;

+}

+

+/**

+ * Markup free clearing

+ * Details: http://www.positioniseverything.net/easyclearing.html

+ */

+.clear-block:after {

+  content: ".";

+  display: block;

+  height: 0;

+  clear: both;

+  visibility: hidden;

+}

+

+.clear-block {

+  display: inline-block;

+}

+

+/* Hides from IE-mac \*/

+* html .clear-block {

+  height: 1%;

+}

+

+.clear-block {

+  display: block;

+}

+/* End hide from IE-mac */

+

+/**

+ * Generic elements

+ */

+body {

+  direction: rtl;

+}

+

+ol li, ul li {

+  margin: 0.4em .5em 0.4em 0;

+}

+

+ul.menu, .item-list ul {

+  margin: 0.35em -0.5em 0 0;

+}

+

+ul.menu ul, .item-list ul ul {

+  margin-left: inherit;

+  margin-right: 0em;

+}

+

+ol li, ul li, ul.menu li, .item-list ul li, li.leaf {

+  margin: 0.15em .5em 0.15em 0;

+}

+

+ul li, ul.menu li, .item-list ul li, li.leaf {

+  padding: 0 1.5em .2em 0; 

+  background: transparent url("images/menu-leaf.gif") no-repeat 100% .35em;

+}

+

+ol li {

+  margin-left: inherit;

+  margin-right: 2em;

+}

+

+ul li.expanded {

+  background: transparent url("images/menu-expanded.gif") no-repeat 100% .35em;

+}

+

+ul li.collapsed {

+  background: transparent url("images/menu-collapsed-rtl.gif") no-repeat 100% .35em;

+}

+

+ul.inline li {

+  padding: 0 0 0 1em;

+}

+

+ol.task-list {

+  margin-left: inherit;

+  margin-right: 0;

+}

+

+ol.task-list li {

+  padding: 0.5em 2em 0.5em 1em;

+}

+

+ol.task-list li.active {

+  background: transparent url(images/task-list.png) no-repeat 97px 50%;

+}

+

+ol.task-list li.done {

+  background: transparent url(../../misc/watchdog-ok.png) no-repeat 100% 50%;

+}

+

+ol.task-list li.active {

+  margin-right: inherit;

+  margin-left: 1em;

+}

+

+dl {

+  margin: 0.5em 1.5em 1em 0;

+}

+

+dl dt {

+}

+

+dl dd {

+  margin: 0 1.5em .5em 0;

+}

+

+.form-button, .form-submit {

+  margin: 2em 0 1em 0.5em;

+}

+

+#header-region h2 {

+  margin: 0 0 0 1em;

+}

+

+#wrapper {

+  background: #edf5fa url("images/body.png") repeat-x 50% 0;

+}

+

+#wrapper #container #header h1 img {

+  padding-right: inherit;

+  float: right; 

+  padding-right: inherit;

+  padding-left : 20px;

+}

+

+#sidebar-left .block-region {

+  margin: 0 0 0 15px;

+}

+

+#sidebar-right .block-region {

+  margin: 0 15px 0px 0;

+}

+

+/* Now we add the backgrounds for the main content shading */

+#wrapper #container #center #squeeze {

+  background: #fff url("images/bg-content.png") repeat-x 50% 0;  

+}

+

+#wrapper #container .breadcrumb {

+  position: absolute;

+  top: 15px;

+  left: inherit; 

+  right: 35px;

+  z-index: 3;

+}

+

+/**

+ * Primary navigation

+ */

+ul.primary-links {

+  float: left; 

+width:70%;

+}

+

+ul.primary-links li {

+  float: right;  

+}

+

+/**

+ * Secondary navigation

+ */

+ul.secondary-links {

+  padding: 20px 0 0;

+  float: left;

+  clear: left;

+}

+

+ul.secondary-links li {

+  float: right;

+}

+

+ul.primary {

+  float: right;

+}

+ul.secondary {

+  clear: both;

+  text-align: right;

+}

+h2.with-tabs {

+  float: right;

+  margin: 0 0 0 2em;

+}

+

+ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,

+ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {

+  margin: 0 1px 0 0;

+  

+}

+ul.primary li a:after {

+  /* Fix Firefox 2 RTL bug. */

+  content: " ";

+}

+

+ul.links li, ul.inline li {

+  padding-left: 1em;

+  padding-right: 0;

+}

+

+.node .links, .comment .links {

+  text-align: right;

+}

+

+.node .links ul.links li, .comment .links ul.links li {}

+.terms ul.links li {

+  padding-right: 1em;

+  padding-left: 0;

+}

+

+.picture, .comment .submitted {

+  padding-left: inherit;

+  float: left;

+  clear: left;

+  padding-right: 1em;

+}

+

+.new {

+  float: left;

+}

+

+.terms {

+  float: left;

+}

+

+.indented {

+  margin-left: 0; /* an should be inherit, but force left margin to be 0  */

+  margin-right: 25px;

+}

+

+html.js fieldset.collapsible legend a {

+  padding-left: inherit; 

+  padding-right: 2em;

+  background: url("images/menu-expanded.gif") no-repeat 100% 50%;

+}

+

+html.js fieldset.collapsed legend a {

+  background: url("images/menu-collapsed-rtl.gif") no-repeat 100% 50%;

+}

+

+/**

+ * Syndication Block

+ */

+#block-node-0 h2 {

+  float: right;

+  padding-right: inherit;

+  padding-left: 20px;

+}

+

+#block-node-0 img {

+  float: left;

+}

+

+#block-node-0 .content {

+  clear: left;

+}

+

+/**

+ * Login Block

+ */

+#user-login-form ul {

+  text-align: right;

+}

+

+div.admin .left {

+  float: right;

+}

+

+div.admin .right {

+  float: left;

+}

+

+/* Fix Opera, IE6 and IE7 header width */

+#wrapper #container #header {

+  position: relative;

+  width: 100%;

+}

+

+#wrapper #container #header #logo-floater {

+  width: 100%;	

+  left: 0;	

+  top:0;

+}

+

+/**

+ * Fixes for IE7 - Does not break other browsers 

+ */

+

+/* Position:relative on these breaks IE7. */  

+ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,

+ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {

+  position: static;

+}

+  

+/* Fix right and left cloumns position breaking on window resize */

+#container {

+  position: relative;

+}

+

+#center {

+  position: relative;

+}

+

+#sidebar-right{

+  position: absolute;

+  right: 0;

+}

+

+/**

+ * Apply hasLayout to elements in IE7, using standard property "min-height" 

+ * (see http://www.satzansatz.de/cssd/onhavinglayout.html)

+ */

+

+/* Fix background bleed in center column. */

+#squeeze,

+#squeeze .right-corner {

+  min-height: 1%;

+}

diff --git a/themes/garland/style.css b/themes/garland/style.css
index e95c822aa..277b7ce0a 100644
--- a/themes/garland/style.css
+++ b/themes/garland/style.css
@@ -104,40 +104,40 @@ ol {
 }
 
 ol li, ul li {
-  margin: 0.4em 0 0.4em .5em;
+  margin: 0.4em 0 0.4em .5em; /* LTR */
 }
 
 ul.menu, .item-list ul {
-  margin: 0.35em 0 0 -0.5em;
+  margin: 0.35em 0 0 -0.5em; /* LTR */
   padding: 0;
 }
 
 ul.menu ul, .item-list ul ul {
-  margin-left: 0em;
+  margin-left: 0em; /* LTR */
 }
 
 ol li, ul li, ul.menu li, .item-list ul li, li.leaf {
-  margin: 0.15em 0 0.15em .5em;
+  margin: 0.15em 0 0.15em .5em; /* LTR */
 }
 
 ul li, ul.menu li, .item-list ul li, li.leaf {
   padding: 0 0 .2em 1.5em;
   list-style-type: none;
   list-style-image: none;
-  background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em;
+  background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em; /* LTR */
 }
 
 ol li {
   padding: 0 0 .3em;
-  margin-left: 2em;
+  margin-left: 2em; /* LTR */
 }
 
 ul li.expanded {
-  background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em;
+  background: transparent url(images/menu-expanded.gif) no-repeat 1px .35em; /* LTR */
 }
 
 ul li.collapsed {
-  background: transparent url(images/menu-collapsed.gif) no-repeat 0px .35em;
+  background: transparent url(images/menu-collapsed.gif) no-repeat 0px .35em; /* LTR */
 }
 
 ul li.leaf a, ul li.expanded a, ul li.collapsed a {
@@ -147,26 +147,26 @@ ul li.leaf a, ul li.expanded a, ul li.collapsed a {
 ul.inline li {
   background: none;
   margin: 0;
-  padding: 0 1em 0 0;
+  padding: 0 1em 0 0; /* LTR */
 }
 
 ol.task-list {
-  margin-left: 0;
+  margin-left: 0; /* LTR */
   list-style-type: none;
   list-style-image: none;
 }
 ol.task-list li {
-  padding: 0.5em 1em 0.5em 2em;
+  padding: 0.5em 1em 0.5em 2em; /* LTR */
 }
 ol.task-list li.active {
-  background: transparent url(images/task-list.png) no-repeat 3px 50%;
+  background: transparent url(images/task-list.png) no-repeat 3px 50%; /* LTR */
 }
 ol.task-list li.done {
   color: #393;
-  background: transparent url(../../misc/watchdog-ok.png) no-repeat 0px 50%;
+  background: transparent url(../../misc/watchdog-ok.png) no-repeat 0px 50%; /* LTR */
 }
 ol.task-list li.active {
-  margin-right: 1em;
+  margin-right: 1em; /* LTR */
 }
 
 fieldset ul.clear-block li {
@@ -176,14 +176,14 @@ fieldset ul.clear-block li {
 }
 
 dl {
-  margin: 0.5em 0 1em 1.5em;
+  margin: 0.5em 0 1em 1.5em; /* LTR */
 }
 
 dl dt {
 }
 
 dl dd {
-  margin: 0 0 .5em 1.5em;
+  margin: 0 0 .5em 1.5em; /* LTR */
 }
 
 img, a img {
@@ -279,7 +279,7 @@ span.submitted, .description {
 }
 
 .form-button, .form-submit {
-  margin: 2em 0.5em 1em 0;
+  margin: 2em 0.5em 1em 0; /* LTR */
 }
 
 #watchdog-form-overview .form-submit,
@@ -334,7 +334,7 @@ table .form-button, table .form-submit {
 }
 
 #header-region h2 {
-  margin: 0 1em 0 0;
+  margin: 0 1em 0 0; /* LTR */
 }
 
 #header-region h3, #header-region label, #header-region li {
@@ -374,8 +374,8 @@ table .form-button, table .form-submit {
 
 #wrapper #container #header h1 img {
   padding-top: 16px;
-  padding-right: 20px;
-  float: left;
+  padding-right: 20px; /* LTR */
+  float: left; /* LTR */
 }
 
 /* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. */
@@ -441,11 +441,11 @@ body.sidebars #squeeze {
 }
 
 #sidebar-left .block-region {
-  margin: 0 15px 0 0px;
+  margin: 0 15px 0 0px; /* LTR */
 }
 
 #sidebar-right .block-region {
-  margin: 0 0px 0 15px;
+  margin: 0 0px 0 15px; /* LTR */
 }
 
 .block-region {
@@ -488,7 +488,7 @@ body.sidebars #squeeze {
 #wrapper #container .breadcrumb {
   position: absolute;
   top: 15px;
-  left: 35px;
+  left: 35px; /* LTR */
   z-index: 3;
 }
 
@@ -539,7 +539,7 @@ body.sidebars #footer {
 ul.primary-links {
   margin: 0;
   padding: 0;
-  float: right;
+  float: right; /* LTR */
   position: relative;
   z-index: 4;
 }
@@ -547,7 +547,7 @@ ul.primary-links {
 ul.primary-links li {
   margin: 0;
   padding: 0;
-  float: left;
+  float: left; /* LTR */
   background-image: none;
 }
 
@@ -569,9 +569,9 @@ ul.primary-links li a:hover, ul.primary-links li a.active {
  */
 ul.secondary-links {
   margin: 0;
-  padding: 18px 0 0;
-  float: right;
-  clear: right;
+  padding: 18px 0 0; /* LTR */
+  float: right; /* LTR */
+  clear: right; /* LTR */
   position: relative;
   z-index: 4;
 }
@@ -579,7 +579,7 @@ ul.secondary-links {
 ul.secondary-links li {
   margin: 0;
   padding: 0;
-  float: left;
+  float: left; /* LTR */
   background-image: none;
 }
 
@@ -614,18 +614,18 @@ ul.primary, ul.primary li, ul.secondary, ul.secondary li {
 }
 ul.primary {
   padding: 0.5em 0 10px;
-  float: left;
+  float: left; /* LTR */
 }
 ul.secondary {
   clear: both;
-  text-align: left;
+  text-align: left; /* LTR */
   border-bottom: 1px solid #e9eff3;
   margin: -0.2em -26px 1em;
   padding: 0 26px 0.6em;
 }
 h2.with-tabs {
-  float: left;
-  margin: 0 2em 0 0;
+  float: left; /* LTR */
+  margin: 0 2em 0 0; /* LTR */
   padding: 0;
 }
 
@@ -634,7 +634,7 @@ ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.seconda
   border: 0;
   background: transparent;
   padding: 4px 1em;
-  margin: 0 0 0 1px;
+  margin: 0 0 0 1px; /* LTR */
   height: auto;
   text-decoration: none;
   position: relative;
@@ -662,13 +662,13 @@ ul.secondary li.active a {
 ul.links li, ul.inline li {
   margin-left: 0;
   margin-right: 0;
-  padding-left: 0;
-  padding-right: 1em;
+  padding-left: 0; /* LTR */
+  padding-right: 1em; /* LTR */
   background-image: none;
 }
 
 .node .links, .comment .links {
-  text-align: left;
+  text-align: left; /* LTR */
 }
 
 .node .links ul.links li, .comment .links ul.links li {}
@@ -680,20 +680,20 @@ ul.links li, ul.inline li {
 }
 
 .picture, .comment .submitted {
-  float: right;
-  clear: right;
-  padding-left: 1em;
+  float: right; /* LTR */
+  clear: right; /* LTR */
+  padding-left: 1em; /* LTR */
 }
 
 .new {
   color: #ffae00;
   font-size: 0.92em;
   font-weight: bold;
-  float: right;
+  float: right; /* LTR */
 }
 
 .terms {
-  float: right;
+  float: right; /* LTR */
 }
 
 .preview .node, .preview .comment, .sticky {
@@ -731,7 +731,7 @@ ul.links li, ul.inline li {
 }
 
 .indented {
-  margin-left: 25px;
+  margin-left: 25px; /* LTR */
 }
 
 .comment h3 a.active {
@@ -852,29 +852,29 @@ html.js fieldset.collapsed {
 }
 
 html.js fieldset.collapsible legend a {
-  padding-left: 2em;
-  background: url(images/menu-expanded.gif) no-repeat 0% 50%;
+  padding-left: 2em; /* LTR */
+  background: url(images/menu-expanded.gif) no-repeat 0% 50%; /* LTR */
 }
 
 html.js fieldset.collapsed legend a {
-  background: url(images/menu-collapsed.gif) no-repeat 0% 50%;
+  background: url(images/menu-collapsed.gif) no-repeat 0% 50%; /* LTR */
 }
 
 /**
  * Syndication icons and block
  */
 #block-node-0 h2 {
-  float: left;
-  padding-right: 20px;
+  float: left; /* LTR */
+  padding-right: 20px; /* LTR */
 }
 
 #block-node-0 img, .feed-icon {
-  float: right;
+  float: right; /* LTR */
   padding-top: 4px;
 }
 
 #block-node-0 .content {
-  clear: right;
+  clear: right; /* LTR */
 }
 
 /**
@@ -884,7 +884,7 @@ html.js fieldset.collapsed legend a {
   text-align: center;
 }
 #user-login-form ul {
-  text-align: left;
+  text-align: left; /* LTR */
 }
 
 /**
@@ -929,11 +929,11 @@ div.item-list,
 }
 
 div.admin .left {
-  float: left;
+  float: left; /* LTR */
   width: 48%;
 }
 div.admin .right {
-  float: right;
+  float: right; /* LTR */
   width: 48%;
 }
 
diff --git a/themes/garland/template.php b/themes/garland/template.php
index 26820b78d..a6279e6de 100644
--- a/themes/garland/template.php
+++ b/themes/garland/template.php
@@ -96,3 +96,17 @@ function phptemplate_node_submitted($node) {
       '!datetime' => format_date($node->created),
     ));
 }
+
+/**
+ * Generates IE CSS links for LTR and RTL languages.
+ */
+function phptemplate_get_ie_styles() {
+  global $language;
+  
+  $iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
+  if (defined('LANGUAGE_RTL') && $language->direction == LANGUAGE_RTL) {
+    $iecss .= '<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";</style>';
+  }
+  
+  return $iecss;
+}