Commit 860947d3 authored by Gábor Hojtsy's avatar Gábor Hojtsy

#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.
parent 7f83d274
......@@ -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;
}
......
/* $Id$ */
#aggregator .feed-source .feed-icon {
float: left;
}
......@@ -7,7 +7,7 @@
margin-bottom: 0.75em;
}
#aggregator .feed-source .feed-icon {
float: right;
float: right; /* LTR */
display: block;
}
#aggregator .feed-item {
......
/* $Id$ */
#blocks td.block {
padding-left: inherit;
padding-right: 1.5em;
}
......@@ -4,7 +4,7 @@
font-weight: bold;
}
#blocks td.block {
padding-left: 1.5em;
padding-left: 1.5em; /* LTR */
}
.block-region {
background-color: #ff6;
......
/* $Id$ */
.book-navigation .page-previous {
float: right;
}
.book-navigation .page-up {
float: right;
}
......@@ -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;
......
/* $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;
}
......@@ -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 */
}
/* $Id$ */
.indented {
margin-left: inherit;
margin-right: 25px;
}
/* $Id$ */
.indented {
margin-left: 25px;
margin-left: 25px; /* LTR */
}
/* $Id$ */
#dblog-filter-form .form-item {
float: right;
padding-right: inherit;
padding-left: .8em;
}
/* $Id$ */
#dblog-filter-form .form-item {
float: left;
padding-right: .8em;
float: left; /* LTR */
padding-right: .8em; /* LTR */
margin: 0.1em;
}
tr.dblog-user {
......
/* $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;
}
......@@ -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%;
}
/* $Id$ */
.help-items {
float: right;
padding-right: inherit;
padding-left: 3%;
}
.help-items-last {
padding-right: inherit;
padding-left: 0;
}
/* $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 */
}
/* $Id $ */
#node-admin-buttons {
float: right;
margin-left: inherit;
margin-right: 0.5em;
clear: left;
}
......@@ -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;
......
/* $Id $ */
.poll .bar .foreground {
float: right;
}
.poll .percent {
text-align: left;
}
.poll .vote-form .choices {
text-align: right;
}
......@@ -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;
}
......
/* $Id $ */
.search-advanced .criterion {
float: right;
margin-right: inherit;
margin-left: 2em;
}
.search-advanced .action {
float: right;
clear: right;
}
......@@ -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 */
}
/* $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;
}
......@@ -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%;
}
/* $Id $ */
th {
text-align: right;
padding-right: inherit;
padding-left: 1em;
}
......@@ -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;
}
......
/* $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;
}
......@@ -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 */